Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architectures for Modern Web Front Ends

Lucas Dohmen
February 06, 2020

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.

Lucas Dohmen

February 06, 2020
Tweet

More Decks by Lucas Dohmen

Other Decks in Programming

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. 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
  3. 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
  4. 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
  5. A great REST hypermedia API is very similar to a

    simple, server-sided rendered web application
  6. 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…
  7. State Business Logic Routing Rendering Logic Look & Presentation Logic

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

    Server Client JSON JSON API JSON Client Rendering Logic Routing HTML Same Code
  9. “All your users are non-JS users while they‘re downloading your

    JS” Jake Archibald, developer advocate for Google Chrome
  10. Prerendering Browser Server GET / Static HTML Snapshot API run

    App AJAX Fun… FCP TTI load & run App AJAX Fun…
  11. 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
  12. State Business Logic Routing Rendering Logic Look & Presentation Logic

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

    Server Client JSON JSON API JSON Client (Pre-)Rendering Logic Routing HTML Hydration
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. “JavaScript is the most expensive part of your page” Addy

    Osmani, Speed team lead for Google Chrome
  20. 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
  21. RAGE CLICKS “15% of users tried to interact sometime between

    onload and interactive.” Akamai: Metrics That Matter RAGE CLICKS
  22. • 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
  23. State Business Logic Routing Rendering Logic Look & Presentation Logic

    Server Client HTML Rendering Logic Look & Presentation Logic JSON/ HTML
  24. 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
  25. 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 [email protected] +49 170 4712625 stilkov Lucas Dohmen [email protected] +49 151 75062496 moonbeamlabs