Architectures for Modern Web Front Ends

This talk was presented with Stefan Tilkov at [OOP 2020](https://www.oop-konferenz.de/oop2020/programm/konferenzprogramm/sessiondetails/action/detail/session/ndo-2-3/title/architekturoptionen-fuer-moderne-web-frontends.html?tx_dmconferences_session%5BshowRooms%5D=0&cHash=90e72b5becbb77a3cc27b1f0c57ace50)

Abstract (German):
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 ist, so scheint es, 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 die Vor- und Nachteile unterschiedlicher Stile von Web-Anwendungen beleuchten und zeigen, für welche Anwendungsfälle welcher davon passt.

Transcript

1. Architectures for Modern Web Front Ends 2 0 2 0 / 0 2 / 0 6 O O P Stefan Tilkov @stilkov Lucas Dohmen @moonbeamlabs
2. Annoying your app users in 10 easy steps
3. 1.
 Forbid the use of the back and forward buttons
4. 2.
 Send them to the home page when they hit “refresh” …
5. 3.
 … or at least ensure the browser pops up a warning window
6. 4.
 Make sure they can’t open a second browser window
7. 5.
 Let them see UI decoration and ads first, content last
8. 6.
 Make sure they can’t bookmark or send a link
9. 7.
 Don’t let Google index anything
10. 8.
 Show users a picture of your app – it’s surely better than nothing
11. 9.
 Disable assistive technologies. Who needs a screen reader, anyway?
12. 10.
 Ensure non-functioning JavaScript gives them a blank page
13. History repeating … CORBA Web WS-* REST
14. What’s the client side analogy?
15. 1) in the SOAP/WSDL sense “Web app”2) 2) built as a careless SPA “Web service”1) > Uses HTTP as transport > Ignores HTTP verbs > Ignores URIs > Exposes single “endpoint” > Fails to embrace the Web > Uses browser as runtime > Ignores forward, back, refresh > Does not support linking > Exposes monolithic “app” > Fails to embrace the browser
16. The web-native way of distributing logic Process Flow Presentation Domain Logic Data Server Client > Rendering, layout, styling
 on an unknown client > Logic & state machine on server > Client user-agent extensible via
 code on demand
17. HTML & Hypermedia • In REST, servers expose a hypermedia format • Option 1: Just invent your own JSON-based, incomplete clone • Option 2: Just use HTML • Clients need to be RESTful, too • Option 1: Invent your own, JS-based, buggy, incomplete implementation • Option 2: Use the browser
18. A great REST hypermedia API is very similar to a simple, server-sided rendered web application
19. The role of JS in modern Web applications
20. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML
21. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON
22. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
23. Why Routing? Solution:
 Store some app
 state in the URI! Bookmarks? Deep links? Reload? Browser Server GET / 200 OK… GET /app.js 200 OK… App start…
24. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
25. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
26. Searchability Crawler Server GET / Static HTML Snapshot API run App AJAX Fun…
27. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client
28. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML
29. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Same Code
30. “All your users are non-JS users while they‘re downloading your JS” Jake Archibald, developer advocate for Google Chrome
31. Prerendering Browser Server GET / Static HTML Snapshot API run App AJAX Fun… FCP TTI load & run App AJAX Fun…
32. Hydration How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM? Browser GET / Static HTML Snapsho FCP TTI load & run App
33. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML
34. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
35. JSON API Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic State Business Logic State
36. JSON API Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic State Business Logic Same functionality,
 different languages! State
37. State Business Logic JSON API Business Logic State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration high control, high observability low control, low observability
38. State Routing Rendering Logic Look & Presentation Logic Server Client JSON JSON Client (Pre-)Rendering Logic Routing HTML Hydration Business Logic JSON API State Business Logic Much, much more client side JavaScript
39. 37 Resilience customElement.define( "my-element", MyElement ); Modern API in JS Modern API in CSS .item { display: contents; } Firefox 63: It works Firefox 63: It works Chrome 69: Exception Chrome 69: Skips that line
40. “JavaScript is the most expensive part of your page” Addy Osmani, Speed team lead for Google Chrome
41. Cost of JavaScript on Reddit.com Pixel 3 Moto G4 Alcatel 2X 5059D 0 seconds 1 second 2 seconds Main thread Worker thread The cost of JavaScript in 2019
42. Test your app on real, low-cost devices and slow networks (No, an emulator is not enough)
44. RAGE CLICKS “15% of users tried to interact sometime between onload and interactive.” Akamai: Metrics That Matter RAGE CLICKS
45. Hydration is not a progressive enhancement, it‘s an uncanny valley
46. Now what?
47. • Client-side state handling • Better offline support • Closer to desktop model • Better performance • Server-side state handling • Simpler • More resilient & observable • Smaller client footprint • Better performance
48. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML
49. State Business Logic Routing Rendering Logic Look & Presentation Logic Server Client HTML Rendering Logic Look & Presentation Logic JSON/ HTML
50. 48 Let's use the technologies from SPAs, but keep the architecture of the Web.
51. Pure SPA SSR+RC Pure SSR • Large number of users • Basic UX needs • Support for past, present and future devices • Complex global client state • Offline support • Controlled device landscape • Like SSR, but with • more UX needs • Complex component state • Basic offline support
52. 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 50 Thanks! Questions? Stefan Tilkov stefan.tilkov@innoq.com +49 170 4712625 stilkov Lucas Dohmen lucas.dohmen@innoq.com +49 151 75062496 moonbeamlabs