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

Transcript

1. Deliver instant apps at scale
2. New perspectives open up new paths.
3. Part I The todays challenge & Qwik‘s role
4. How do we ensure great performance on large scaled web-apps?
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%
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)
7. Hydration HYDRATION PROCESS How web-apps get interactive https://www.builder.io/blog/hydration-is-pure-overhead
8. https://twitter.com/mhevery/status/1514087689246568448
9. Why do we need performance at scale?
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
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
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
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
14. Less JavaScript Less Network- Traffic Less CPU-Pressure Supports healthy nature
15. https://www.builder.io/blog/hydration-is-pure-overhead HYDRATION PROCESS What if we can Skip Hydation? Resumability
16. … is like saving & restoring the state of a Virtual Machine. Resumability Inspired by: https://www.youtube.com/watch?v=Zddw6qy5pf0
17. Resumability
18. Server Browser Resumability
19. Resumability Server Browser
20. DEMO
21. Part II Optimizer & Loader
22. Optimizer onClick$(() => { /*.your code … */ }); Optimizer parses Inspired by https://www.youtube.com/watch?v=BxGbnLb5i9Q
23. Optimizer Optimizer transforms onClick(qrl( ‘./my-component.js’, ‘my-function-symbol’ ));
24. Loader my-function-symbol
25. Prefetching Service- Worker CACHE |- 78476324.js |- 95834343.js |- 13834574.js |- … … loading JS sources is moved to its own Service Worker Thread.
26. Part III Components & Routing
27. Component component$ STATE useSignal useStore TASKS useTask$ useVisibleTask$ CONTEXT createContextId useContext useContextProvider SLOTS is enhanced progressively by hooks.
28. DEMO
29. Routing component$ SERVER server$ env PAGES Routing Dynamic Head DATA routeLoader$ routeAction$ Endpoints LAYOUTS … comes with Qwik City
30. Integrations 🌳 unpic https://qwik.builder.io/docs/integrations And many more… Auth.js ⚛ React Playwright vitest
31. DEMO
32. Community
33. Community Join Discord via qwik.builder.io
34. @GregOnNet Gregor Woiwode, CTO Find me at the conference and say hi!
35. https://speakerdeck.com/gregonnet/qwik-deliver-instant-apps-at-scale Your Slides
36. https://github.com/GregOnNet/qwik-showcase The code examples
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