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.

B049f961d55097ef9104ff4b275a517b?s=128

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
  2. Latency Browser DC Your own, AWS, GC, Azure, Digital Ocean,

    Linode…
  3. State Business Logic Routing Rendering Logic

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

    & Development
  5. SSR State Business Logic Rendering Logic Routing

  6. State Business Logic Rendering Logic Routing

  7. State Business Logic Routing Rendering Logic

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

    ? State Business Logic
  9. SPA Rendering Logic State Business Logic JSON API State Business

    Logic JSON Client Routing
  10. Why Routing? Bookmarks? Deep links? Reload? Solution: Store some app

    state in the URI 10
  11. MPA Rendering Logic State Business Logic JSON API State Business

    Logic Routing JSON Client
  12. Prerendering 12

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

    State Business Logic Routing JSON Client
  14. Prerendering 14

  15. Hydration How to simulate readiness? What about Events (Clicks etc)?

    How to match server-side HTML to client-side DOM? 15
  16. MPA with Prerendering Rendering Logic State Business Logic Rendering Logic

    Routing JSON API State Business Logic Routing Hydration JSON Client
  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
  18. SSR with Rich Components Rendering Logic State Business Logic Rendering

    Logic Routing as components with component state using progressive enhancement
  19. Latency Browser DC CDN Cloudflare, Vercel, Netlify… Latency Latency

  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
  21. ESR JSON Client JSON API Routing Rendering Logic State Business

    Logic Business Logic and/or State and/or
  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
  23. It’s your choice Only View Logic? App with Routing? Only

    Caching (and ESI)? App only Rendering? State? Only Database? App with Rendering?
  24. …and this choice should be made based on your requirements,

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