Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Qwik - Deliver instant apps at scale

Qwik - Deliver instant apps at scale

Only load the JavaScript that is actually used by the user….

Same loading time behaviour, no matter how much the web application scales in its feature set…

With Qwik, a so-called O(1) framework enters the scene, which uses intelligent mechanisms to break down the web application into such small components and understand their relationships with one another, so that lazy loading is raised to a new level.

In this session, we will learn together how Qwik works under the hood.

In addition, we will examine how Qwik, in contrast to conventional web frameworks, manages to get by without hydration and thus achieve the best possible page speed.

Then we'll take a look at Qwik's APIs that enable progressive JavaScript reloading and how this process can be streamlined.

https://md-devdays.de/act-details/1000168

Gregor Woiwode

May 09, 2023
Tweet

More Decks by Gregor Woiwode

Other Decks in Programming

Transcript

  1. For Mobify, every 100ms decrease in homepage load speed worked

    out to a 1.11% increase in session-based conversion, yielding an average annual revenue increase of nearly $380,000. Every 100ms faster → 1% more conversions https://qwik.builder.io/docs/think-qwik/#does-page-speed-really-matter
  2. COOK reduced average page load time by 850 milliseconds which

    increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10%. 850ms faster → 7% more conversions https://qwik.builder.io/docs/think-qwik/#does-page-speed-really-matter
  3. The BBC found they lost an additional 10% of users

    for every additional second their site took to load. 1 seconds slowness → 10% less users https://qwik.builder.io/docs/think-qwik/#does-page-speed-really-matter
  4. The BBC found they lost an additional 10% of users

    for every additional second their site took to load. 1 seconds slowness → 10% less users https://qwik.builder.io/docs/think-qwik/#does-page-speed-really-matter
  5. … is like saving & restoring the state of a

    Virtual Machine. Resumability Inspired by: https://www.youtube.com/watch?v=Zddw6qy5pf0
  6. Optimizer onClick$(() => { /*.your code … */ }); Optimizer

    parses Inspired by https://www.youtube.com/watch?v=BxGbnLb5i9Q
  7. Prefetching Service- Worker CACHE |- 78476324.js |- 95834343.js |- 13834574.js

    |- … … loading JS sources is moved to its own Service Worker Thread.
  8. Component component$ STATE useSignal useStore TASKS useTask$ useVisibleTask$ CONTEXT createContextId

    useContext useContextProvider SLOTS is enhanced progressively by hooks.
  9. Routing component$ SERVER server$ env PAGES Routing Dynamic Head DATA

    routeLoader$ routeAction$ Endpoints LAYOUTS … comes with Qwik City
  10. Attributions - Photo by Anika Huizinga on Unsplash - Photo

    by Dawid Zawiła on Unsplash - Photo by RephiLe water on Unsplash - Photo by Jed Villejo on Unsplash