Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Deliver
    instant apps
    at scale

    View Slide

  2. New perspectives
    open up
    new paths.

    View Slide

  3. Part I
    The todays challenge
    & Qwik‘s role

    View Slide

  4. How do we ensure great
    performance on large
    scaled web-apps?

    View Slide

  5. The increase of JS-Usage
    https://httparchive.org/reports/page-weight?start=earliest&end=latest&view=list#bytesJs (2023/05/07)
    Median MOBILE
    834%
    Median DESKTOP
    502.5%

    View Slide

  6. The increase of JS-Usage
    https://httparchive.org/reports/page-weight?start=earliest&end=latest&view=list#bytesJs (2023/05/07)
    Linear Growth
    O(n)

    View Slide

  7. Hydration
    HYDRATION PROCESS
    How web-apps
    get interactive
    https://www.builder.io/blog/hydration-is-pure-overhead

    View Slide

  8. https://twitter.com/mhevery/status/1514087689246568448

    View Slide

  9. Why do we need
    performance at scale?

    View Slide

  10. 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

    View Slide

  11. 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

    View Slide

  12. 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

    View Slide

  13. 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

    View Slide

  14. Less JavaScript
    Less Network- Traffic
    Less CPU-Pressure
    Supports healthy nature

    View Slide

  15. https://www.builder.io/blog/hydration-is-pure-overhead
    HYDRATION PROCESS
    What if we can
    Skip Hydation?
    Resumability

    View Slide

  16. … is like saving & restoring the state of a Virtual Machine.
    Resumability
    Inspired by: https://www.youtube.com/watch?v=Zddw6qy5pf0

    View Slide

  17. Resumability

    View Slide

  18. Server Browser
    Resumability

    View Slide

  19. Resumability
    Server Browser

    View Slide

  20. DEMO

    View Slide

  21. Part II
    Optimizer & Loader

    View Slide

  22. Optimizer
    onClick$(() => {
    /*.your code … */
    });
    Optimizer
    parses
    Inspired by https://www.youtube.com/watch?v=BxGbnLb5i9Q

    View Slide

  23. Optimizer
    Optimizer
    transforms
    onClick(qrl(
    ‘./my-component.js’,
    ‘my-function-symbol’
    ));

    View Slide

  24. Loader
    my-function-symbol

    View Slide

  25. Prefetching
    Service-
    Worker
    CACHE
    |- 78476324.js
    |- 95834343.js
    |- 13834574.js
    |- …
    … loading JS sources is moved to its own Service Worker Thread.

    View Slide

  26. Part III
    Components & Routing

    View Slide

  27. Component
    component$ STATE
    useSignal
    useStore
    TASKS
    useTask$
    useVisibleTask$
    CONTEXT
    createContextId
    useContext useContextProvider
    SLOTS
    is enhanced progressively by hooks.

    View Slide

  28. DEMO

    View Slide

  29. Routing
    component$ SERVER
    server$
    env
    PAGES
    Routing
    Dynamic Head
    DATA
    routeLoader$
    routeAction$ Endpoints
    LAYOUTS
    … comes with Qwik City

    View Slide

  30. Integrations
    🌳
    unpic
    https://qwik.builder.io/docs/integrations
    And many
    more…
    Auth.js

    React
    Playwright vitest

    View Slide

  31. DEMO

    View Slide

  32. Community

    View Slide

  33. Community
    Join Discord via
    qwik.builder.io

    View Slide

  34. @GregOnNet
    Gregor Woiwode, CTO
    Find me at the conference and say hi!

    View Slide

  35. https://speakerdeck.com/gregonnet/qwik-deliver-instant-apps-at-scale
    Your Slides

    View Slide

  36. https://github.com/GregOnNet/qwik-showcase
    The code examples

    View Slide

  37. 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

    View Slide