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

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.

Lucas Dohmen

October 21, 2019
Tweet

More Decks by Lucas Dohmen

Other Decks in Programming

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 7
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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?

    View full-size slide

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

    View full-size slide

  14. 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!

    View full-size slide

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

    View full-size slide

  16. 17
    Addy Osmani, Speed team lead for Google Chrome
    “JavaScript is the
    most expensive
    part of your
    page”

    View full-size slide

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

    View full-size slide

  18. 19
    Test your app on
    real, low-cost devices
    and slow networks
    (No, an emulator is not enough)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 24
    My suggestion for 99% of Web apps:
    Use Server-Side Rendering and
    Progressive Enhancement

    View full-size slide

  23. Thanks! Questions?
    25
    Lucas Dohmen
    [email protected]
    +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

    View full-size slide