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

    View full-size slide

  2. Annoying your app users
    in 10 easy steps

    View full-size slide

  3. 1.

    Forbid the use of the back
    and forward buttons

    View full-size slide

  4. 2.

    Send them to the home
    page when they hit
    “refresh” …

    View full-size slide

  5. 3.

    … or at least ensure the
    browser pops up a
    warning window

    View full-size slide

  6. 4.

    Make sure they can’t open
    a second browser window

    View full-size slide

  7. 5.

    Let them see UI decoration
    and ads first, content last

    View full-size slide

  8. 6.

    Make sure they can’t
    bookmark or send a link

    View full-size slide

  9. 7.

    Don’t let Google index
    anything

    View full-size slide

  10. 8.

    Show users a picture of
    your app – it’s surely
    better than nothing

    View full-size slide

  11. 9.

    Disable assistive
    technologies. Who needs a
    screen reader, anyway?

    View full-size slide

  12. 10.

    Ensure non-functioning
    JavaScript gives them a
    blank page

    View full-size slide

  13. History repeating …
    CORBA
    Web
    WS-*
    REST

    View full-size slide

  14. What’s the client side analogy?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  18. A great REST hypermedia API is very similar to
    a simple, server-sided rendered web application

    View full-size slide

  19. The role of JS in modern
    Web applications

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Searchability
    Crawler Server
    GET /
    Static HTML Snapshot
    API
    run App
    AJAX Fun…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client
    Rendering Logic
    Routing
    HTML
    Same Code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

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

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. • 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

    View full-size slide

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

    View full-size slide

  47. State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    HTML
    Rendering Logic
    Look & Presentation Logic
    JSON/
    HTML

    View full-size slide

  48. 48
    Let's use the technologies from SPAs,
    but keep the architecture of the Web.

    View full-size slide

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

    View full-size slide

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

    View full-size slide