Tweet
Tweet

Slide 1

Slide 1 text

Deliver instant apps at scale

Slide 2

Slide 2 text

New perspectives open up new paths.

Slide 3

Slide 3 text

Part I The todays challenge & Qwik‘s role

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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%

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Why do we need performance at scale?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Resumability

Slide 18

Slide 18 text

Server Browser Resumability

Slide 19

Slide 19 text

Resumability Server Browser

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

Part II Optimizer & Loader

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Loader my-function-symbol

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Part III Components & Routing

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Integrations 🌳 unpic https://qwik.builder.io/docs/integrations And many more… Auth.js ⚛ React Playwright vitest

Slide 31

Slide 31 text

DEMO

Slide 32

Slide 32 text

Community

Slide 33

Slide 33 text

Community Join Discord via qwik.builder.io

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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