Architectures for Modern Web Front Ends

Eine moderne Web-Anwendung wird selbstverständlich in JavaScript implementiert, erzeugt ihr HTML clientseitig im Browser selbst und kommuniziert mit dem Server nur, um über ein HTTP/REST-API Daten im JSON-Format abzuholen – das, so scheint es, ist die gängige Weisheit. Aber haben die bewährten Ansätze wie serverseitiges HTML und „Progressive Enhancement“ tatsächlich ausgedient? In diesem Talk möchten wir darüber diskutieren, welche Vor- und Nachteile es hat, eine Anwendung in diesem Stil zu bauen und wieso teilweise als altmodisch angesehene Ansätze für viele Anwendungen eine gute Wahl sind.

Transcript

1. 1 Oct o b e r 21, 20 19 | Muni ch F ul l S t a ck D a y Architectures for Modern Web Front Ends LUCAS DOHMEN @moonbeamlabs
3. 3 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML
4. 4 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON
5. 5 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
6. Why routing? 6 Browser Server GET / 200 OK… GET /app.js 200 OK… App start… Bookmarks? Deep links? Reload? Solution: Store some app state in the URI
7. 7 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
8. 8 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
9. 9 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML
10. 10 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
11. 11 Jake Archibald, developer advocate for Google Chrome “All your users are non-JS users while they‘re downloading your JS”
12. Prerendering 12 Browser Server GET / Static HTML Snapshot API run App AJAX Fun… FCP TTI load & run App AJAX Fun…
13. Hydration 13 Static HT FCP TTI load & run App How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM?
14. 14 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
15. 15 Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration JSON API State Business Logic State Business Logic Same functionality, different languages!
16. 16 State Server Client JSON (Pre-)Rendering Logic Routing HTML Business Logic JSON API Routing Rendering Logic Look & Presentation Logic JSON Client Hydration State Business Logic Much, much more JavaScript
17. 17 Addy Osmani, Speed team lead for Google Chrome “JavaScript is the most expensive part of your page”
18. Cost of JavaScript on Reddit.com 18 Pixel 3 Moto G4 Alcatel 2X 5059D 0 seconds 1 second 2 seconds Main thread Worker thread The cost of JavaScript in 2019
19. 19 Test your app on real, low-cost devices and slow networks (No, an emulator is not enough)
21. 21 RAGE CLICKS Akamai: Metrics That Matter “15% of users tried to interact sometime between onload and interactive.” RAGE CLICKS
22. 22 Hydration is not a progressive enhancement, it‘s an uncanny valley
23. 23 My fancy blog Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Comment Use SSR for the page Use React/Vue/… for the WYSIWYG editor …as a progressive enhancement …or custom elements Work with and think in components
24. 24 My suggestion for 99% of Web apps: Use Server-Side Rendering and Progressive Enhancement
25. Thanks! Questions? 25 Lucas Dohmen lucas.dohmen@innoq.com +49 151 75062496 @moonbeamlabs Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0 Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com