Architectures for Modern Web Front Ends

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.

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

October 21, 2019
Tweet

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
  2. 2

  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)
  20. 20

  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