Qwik - Deliver instant apps at scale

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