Warum bauen wir Single-Page Applications und was kommt als Nächstes?

Angular, React oder vielleicht doch Vue.js? Die erste Frage in vielen Projekten ist nicht, ob eine Single-Page Application (SPA) der richtige Architekturansatz ist, sondern nur noch, mit welchem Framework man sie umsetzt. Mit der blinden Entscheidung für eine SPA gehen wir unbewusst eine ganze Reihe von Kompromissen ein, die nicht immer im Sinne des Projekts oder der Endanwender sind. Wie sind wir an den Punkt gelangt, an dem wir andere Optionen gar nicht mehr in Betracht ziehen? Um diese Frage zu beantworten, werfen wir einen Blick zurück auf die Evolutionsschritte vom klassischen Server-Side Rendering (SSR) hin zum reinen Client-Side Rendering (CSR) einer Single-Page Application. Dabei betrachten wir die Vor- und Nachteile anderer Ansätze, die wir auf dieser Reise zurückgelassen haben, und wagen einen Blick in die Zukunft, in der die Grenzen zwischen SSR und CSR zunehmend verschwimmen.

Transcript

1. WARUM BAUEN WIR SINGLE-PAGE APPLICATIONS UND WAS KOMMT ALS NÄCHSTES? MARVIN LUCHS
4. https://www.spacejam.com/1996
7. https://www.fogcam.org/ http://edition.cnn.com/US/OJ/ https://www.arngren.net/
8. https://www.w3.org/DesignIssues/Evolution.html INTEROPERABILITÄT Icons made by Freepik from www.flaticon.com EVOLVIERBARKEIT
9. TYPESCRIPT SVELTE GRAPHQL FASTIFY PLAYWRIGHT STORYBOOK SNOWPACK CAPACITOR https://2020.stateofjs.com/en-US/technologies/ MODERNE FRONTEND ARCHITEKTUR RANDOM STUFF FROM STATE OF JS 2020
10. https://www.sonyclassics.com/insidejob/site/ https://www.sonyclassics.com/itmightgetloud/main.html https://www.sonyclassics.com/badeducation/intro.html https://www.sonyclassics.com/whateverworks/site.html
11. Icon made by Freepik from www.flaticon.com THERE IS NO SILVER BULLET
12. Icon made by Freepik from www.flaticon.com REACT ANGULAR ODER
13. Icon made by Freepik from www.flaticon.com BEI UNS IST ANGULAR GESETZT. (BEI UNS IST ALLES EINE SINGLE-PAGE APP)
14. JAVA HTML ▪ Funktional vollständig ▪ Schnell und simpel ▪ Page-Reload für Änderungen des Inhalts ▪ Voreilige Formularvalidierung SERVER-SIDE RENDERING https://todo-app-1.holisticon.de/ Ausschließlich serverseitig gerendertes HTML
15. ▪ Automatisches Abschicken der Aufgabenliste ▪ Validierung erst bei Formulareingabe ▪ Minimal komplexer JAVA HTML ▪ Page Reload JS SSR WITH PROGRESSIVE ENHANCEMENT https://todo-app-2.holisticon.de/ Serverseitig gerendertes HTML, progressiv verbessert durch clientseitiges JavaScript
16. ▪ Kein Page Reload ▪ Progressive Enhancement (JS optional) ▪ Keine Änderungen am Server notwendig JAVA HTML ▪ HTML als API-Datenformat nicht effizient JS SSR WITH PARTIAL DOM UPDATES https://todo-app-3.holisticon.de/ Serverseitig gerendertes HTML, clientseitig dynamisch verändert mit asynchron geladenem HTML
17. Icons made by Freepik from www.flaticon.com JSON API HTML API application/json {"description":"In die Sonne legen", "dueDate":"2021-04-19"} application/json [{"id":"a97a7193-3a98-411f-aa2d- 892b6dfc2f38", "description":"In die Sonne legen", "dueDate":"2021-04- 19", "completed":false, "completedDate":null}]
18. ▪ Keine HTML-API JAVA HTML ▪ Mehr Code in Client und Server ▪ Doppelte Implementierung ▪ Template-Rendering ▪ Error-Binding ▪ Datumsformatierung ▪ Arbeiten in „zwei Welten“ JS SSR WITH PARTIAL CLIENT-SIDE RENDERING https://todo-app-4.holisticon.de/ Serverseitig gerendertes HTML, dynamisch verändert mit clientseitig gerendertem HTML
19. Icon made by Freepik from www.flaticon.com
20. JAVA ▪ Einfachere Server- Implementierung ▪ Weniger doppelte Implementierung ▪ Out-of-Box Dev Experience ▪ Mehr Verantwortung im Client ▪ Zwei separate, lose gekoppelte Applikationen TS ▪ Höhere Client-Komplexität ▪ Höherer Ressourcenbedarf SINGLE-PAGE APPLICATION https://todo-app-5.holisticon.de/ Ausschließlich clientseitig gerendertes HTML
21. 0 100 200 300 400 500 600 700 800 1 SERVER SIDE RENDERING 2 SSR W/ PROGRESSIVE ENHANCEMENT 3 SSR W/ PARTIAL DOM UPDATES 4 SSR W/ PARTIAL CLIENT-SIDE RENDERING 5 CSR W/ SINGLE PAGE APPLICATION Java HTML JavaScript/TypeScript Sonstige LINES OF CODE TECHNOLOGIEVERTEILUNG Icons made by Freepik from www.flaticon.com
22. WARUM BAUEN WIR SINGLE-PAGE APPLICATIONS?
23. Icons made by Freepik from www.flaticon.com DAS NÄCHSTE YOUTUBE GENEHMIGUNGS- SOFTWARE VS. „MODERNES“ UI UNTERNEHMENS- VORGABE KNOWHOW ORGANISATION TEAM- AUFTEILUNG ENTWICKLER- INTERESSE
24. Icon made by Freepik from www.flaticon.com Funktionale Anforderungen Aufgaben anlegen und erledigen, Inline-Validierung, Liste mit erledigten Aufgaben, … Qualitäts- anforderungen Performant (FCP <1.5 sec), barrierearm, SEO-freundlich, regional skalierbar… Budget (Zeit, Geld, Personal) Keine Zeit für Experimente, fehlende Skills können zugekauft werden Organisatorische Randbedingungen Frontend-Entwicklung durch Nearshoring-Partner, Betrieb nur über eigenes Rechenzentrum Use Cases und User Journeys Für den Außendienst geeignet
25. UND WAS KOMMT ALS NÄCHSTES?
26. https://developers.google.com/web/updates/2019/02/rendering-on-the-web Icons made by Freepik from www.flaticon.com Single-Page App, die zur Erzeugung statischer HTML- Seiten zur Build-Zeit ausgeführt wird. Server liefert statisches HTML für jeden Seitenaufruf aus. Statisches HTML STATIC SSR Single-Page App, die für initiales Rendering serverseitig ausgeführt wird. Anschließend übernimmt der Client. Server rendert HTML für den ersten Seitenaufruf. Dynamisches HTML und JS/DOM SSR WITH (RE)HYDRATION Single-Page App, bei der die App<<< Shell zur Build-Zeit statisch erzeugt wird. Server liefert statisches HTML für ersten Seitenaufruf aus. Statisches HTML und JS/DOM CSR WITH PRERENDERING Single-Page App, die ausschließlich clientseitig ausgeführt wird. Server liefert leeres HTML zum Laden von JS/CSS für ersten Seitenaufruf aus. Nur JS/DOM FULL CLIENT-SIDE RENDERING Server App, die Navigationsanfragen mit HTML-Seiten beantwortet. Server rendert HTML für jeden Seitenaufruf. Dynamisches HTML SERVER-SIDE RENDERING RENDERING SERVERROLLE
27. JAVA TS SSR WITH REHYDRATION https://todo-app-6.holisticon.de/ Initiales serverseitiges Rendering, anschließend clientseitiges Rendering
28. REACT SERVER COMPONENTS https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
29. MARVIN LUCHS @luchsamapparat github.com/luchsamapparat marvin.luchs@holisticon.de