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.

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