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

2

3 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML

4 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON

5 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

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 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

8 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client

9 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML

10 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration

11 Jake Archibald, developer advocate for Google Chrome “All your users are non-JS users while they‘re downloading your JS”

Prerendering 12 Browser Server GET / Static HTML Snapshot API run App AJAX Fun… FCP TTI load & run App AJAX Fun…

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 State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration

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 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 Addy Osmani, Speed team lead for Google Chrome “JavaScript is the most expensive part of your page”

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 Test your app on real, low-cost devices and slow networks (No, an emulator is not enough)

20

21 RAGE CLICKS Akamai: Metrics That Matter “15% of users tried to interact sometime between onload and interactive.” RAGE CLICKS

22 Hydration is not a progressive enhancement, it‘s an uncanny valley

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 My suggestion for 99% of Web apps: Use Server-Side Rendering and Progressive Enhancement

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