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

Webanwendungen – Eine Frage des Stils

Webanwendungen – Eine Frage des Stils

Eine moderne Webanwendung wird, natürlich, in JavaScript geschrieben, erzeugt im Browser DOM-Knoten und tauscht mit dem Server nur Daten im JSON-Format aus. Das scheint die gängige Auffassung zu sein. Aber ist server-seitig gerendertes HTML nur ein Feature deines client-seitigen Frameworks und Progressive Enhancement ein Relikt der Vergangenheit? Welche Rolle spielen CDNs? In diesem Talk möchte ich verschiedene Stile von modernen Webanwendungen sowie ihre Vor- und Nachteile diskutieren.

Lucas Dohmen

June 30, 2021
Tweet

More Decks by Lucas Dohmen

Other Decks in Programming

Transcript

  1. 2 0 2 1 / 0 6 / 3 0
    I N N O Q T E C H N O L O G Y L U N C H
    Web
    Anwendungen
    Eine Frage des
    Stils
    LUCAS DOHMEN
    @moonbeamlabs

    View full-size slide

  2. Latency
    Browser DC
    Your own, AWS,
    GC, Azure, Digital
    Ocean, Linode…

    View full-size slide

  3. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  4. LUCAS DOHMEN
    Senior Consultant
    at INNOQ Deutschland GmbH
    Web Architecture & Development

    View full-size slide

  5. SSR
    State
    Business
    Logic
    Rendering
    Logic
    Routing

    View full-size slide

  6. State
    Business
    Logic
    Rendering
    Logic
    Routing

    View full-size slide

  7. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  8. State
    Business
    Logic
    Routing
    Rendering
    Logic
    JSON
    API
    JSON
    Client
    ?
    State
    Business
    Logic

    View full-size slide

  9. SPA
    Rendering
    Logic
    State
    Business
    Logic
    JSON
    API
    State
    Business
    Logic
    JSON
    Client
    Routing

    View full-size slide

  10. Why Routing?
    Bookmarks?
    Deep links?
    Reload?
    Solution:
    Store some app state in the URI
    10

    View full-size slide

  11. MPA
    Rendering
    Logic
    State
    Business
    Logic
    JSON
    API
    State
    Business
    Logic
    Routing
    JSON
    Client

    View full-size slide

  12. Prerendering
    12

    View full-size slide

  13. Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    JSON
    API
    State
    Business
    Logic
    Routing
    JSON
    Client

    View full-size slide

  14. Prerendering
    14

    View full-size slide

  15. Hydration
    How to simulate readiness?
    What about Events (Clicks etc)?
    How to match server-side HTML to
    client-side DOM?
    15

    View full-size slide

  16. MPA with Prerendering
    Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    JSON
    API
    State
    Business
    Logic
    Routing Hydration
    JSON
    Client

    View full-size slide

  17. Comparison
    I don’t need deep links, fast startup or SEO ⇒ SPA
    I need deep links, but startup and SEO are not my concern ⇒ MPA
    I need deep links, fast startup and SEO ⇒ MPA with Prerendering
    or SSR

    View full-size slide

  18. SSR with Rich Components
    Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    as components
    with component state
    using progressive enhancement

    View full-size slide

  19. Latency
    Browser DC
    CDN
    Cloudflare,
    Vercel, Netlify…
    Latency Latency

    View full-size slide

  20. MPA with Edge Prerendering
    JSON
    Client
    JSON
    API
    Routing
    Rendering
    Logic
    State
    Business
    Logic
    Routing
    Rendering
    Logic
    Hydration
    State
    Business
    Logic
    Business
    Logic
    and/or
    State and/or
    JSON
    Client
    Rendering
    Logic
    Routing

    View full-size slide

  21. ESR
    JSON
    Client
    JSON
    API
    Routing
    Rendering
    Logic
    State
    Business
    Logic
    Business
    Logic
    and/or
    State and/or

    View full-size slide

  22. Executing Code
    No Trust Trust Trust
    No Control Low Control High Control
    Low Observability Low Observability High Observability
    No Latency to User Low Latency to User High Latency to User

    View full-size slide

  23. It’s your choice
    Only View Logic?
    App
    with Routing?
    Only Caching (and ESI)?
    App
    only Rendering?
    State?
    Only Database?
    App
    with Rendering?

    View full-size slide

  24. …and this choice should be made based on your requirements,
    not current trends

    View full-size slide

  25. More Web Architecture?
    socreatory.com/trainings/web
    October, 6. – 8.
    Remote

    View full-size slide