Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
  2. Hydration How to simulate readiness? What about Events (Clicks etc)?

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

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

    Logic Routing as components with component state using progressive enhancement
  6. 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
  7. ESR JSON Client JSON API Routing Rendering Logic State Business

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

    Caching (and ESI)? App only Rendering? State? Only Database? App with Rendering?