Als PDF, PPTX herunterladen
Hochgeladen vonQAware GmbH
Was kommt nach den SPAs
Das Dokument beschreibt die Rolle und Vorteile von Meta-Frameworks im Bereich der Javascript-Entwicklung, insbesondere in Bezug auf serverseitiges Rendering (SSR) und statische Seiten-Generierung (SSG). Es hebt die Bedeutung von Konventionen, Best Practices und der Verbindung von Client- und Server-Technologien hervor, um die Performance und SEO zu verbessern. Außerdem werden die Herausforderungen bei der Verwendung von Meta-Frameworks, wie Lernkurven und Vendor Lock-in, diskutiert.
Was kommt nach den SPAs
- 1. Was kommt nachden SPAs?
- 2. Über mich Hallo, ichbin der Basti JavaScript Entwickler aus München https://github.com/sspringer82 @basti_springer Techstack: Node & React
- 3.
- 4. Meta Frameworks Frameworks dieauf anderen Frameworks aufbauen • Etablierte Frameworks wie React, Angular, Vue, Svelte…. nutzen • Und sie verbessern
- 5.
- 6.
- 7. Warum ist dasrelevant?
- 9. Ein Tag imLeben einer SPA Applikation anfragen Ressourcen laden Zeige eine leere Seite Bootstrappe die Applikation Zeige leere Komponenten Zeige die Applikation
- 10. Meta Frameworks Warum solltenwir sie nutzen? • Konventionen & Best practices - opinionated • Kombiniere die Stärken von Client und Server • JavaScript (oder besser: TypeScript) überall • SEO Optimierung
- 11. Client & Server •Client side Framework wird auf dem Server ausgeführt • Basiert auf einer JavaScript runtime (wie Node) • Frontend Structure wird headless auf dem Server gerendert
- 12. Die wichtigsten Features SSR& SSG • Server side rendering • Static site generation
- 13. Konventionen & BestPractices Dateisystembasiertes Routing • Seitenbasierte Applikationsstruktur • Dateien & Verzeichnisse beschreiben die Routen in der Applikation • Routing aka Navigation: • Statische Routen e.g. /legal • Dynamische Routen e.g. /product/1337
- 14. Wir machen alsowieder PHP?
- 15. Server side rendering 🦄 ClientServer HTML Request
- 16. SSR Applikationen auf demServer rendern • Das HTML einer Seite wird auf Anfrage auf dem Server generiert und zum Client gesendet • Die Seite wird sofort angezeigt (kein clientseitiges JS) • Verbessert die wahrgenommene Performance • Besser für Suchmaschinen - HTML kann indexiert werden
- 17. SSR Die Vorteile • Sicherheit:JavaScript wird serverseitig ausgeführt - Zugangsdaten können versteckt werden • Flexibilität: Server APIs in einer Frontend-Applikation nutzen • Geschwindigkeit: Mehrere Schritte in einem
- 18.
- 19. Static site generation ClientServer HTML Request 🦄 Build Process
- 20. SSG Ahead of timerendering • HTML-Strukturen zur Buildzeit erzeugen • Der HTML-Code wird im Dateisystem gespeichert und kann mit einem Webserver ausgeliefert werden • Gleiche Performance wie eine statische Seite • Lieblings SPA-Framework verwenden, um statische Seiten zu bauen
- 21. SSG Use case #1:statische Seite • Statische Seite, die immer für alle Benutzer gleich ist • Wird zur Buildzeit erzeugt • Serverseitige Ressourcen können verwendet werden
- 22. SSG Use case #2:dynamische Seite • Der Inhalt der Seite wird durch Variablen beein fl usst • /products/1337 vs /products/42 • Alle möglichen Werte müssen zur Buildzeit bekannt sein • Das Framework generiert statische Seiten für alle möglichen Werte
- 23.
- 24. Hydration Der Client übernimmtdie Kontrolle • Der Server bereitet die HTML Struktur vor • Der HTML-Code wird zum Client gesendet • Die Struktur ist (noch) nicht dynamisch • Das clientseitige Framework übernimmt die Kontrolle • Die Struktur ist dynamisch
- 25.
- 26. Meta all thethings? Meta Frameworks haben aber auch ihre Nachteile • Steile Lernkurve: Neue Konzepte und zusätzliche Abstraktionen • Opinionated Architecture: Zusätzliche Regeln, denen man folgen muss • Overhead: Je nachdem Variante braucht man entweder einen zusätzlichen Server zur build- oder runtime • Vendor lock-in: Die Verwendung von Meta Frameworks kann leicht zum vendor lock-in führen (z.B. Vercel)
- 27. Meta all thethings! Wo liegen die Stärken? • Große und komplexe Websites mit vielen Seiten • SEO • Performanceverbesserung • Verbindung von Client und Server
- 28.
- 29. Meta Frameworks alsBackends • Daten serverseitig laden • Meta Frameworks haben Zugri ff auf alle Node APIs • Auch Datenbanken und Web Services • Für ein Meta Framework Frontend braucht man keine traditionellen REST APIs
- 30. ABER Es gibtnicht nur Meta Framework Frontends
- 31.
- 32. BFF • Das MetaFramework ist eine Zwischenschicht • Es gibt ein reguläres Backend • REST API • GraphQL • Das Meta Framework fragt beim Backend an und erzeugt das Frontend • Für die Kommunikation wird Standardfunktionalität verwendet (z.B. fetch)
- 33.
- 34. Backend for Frontends Frontend BFF BE Request APIRequest Response Generate HTML Response
- 35. BFF und SSR •Das Backend kann in einer beliebigen Sprache implementiert werden • Backend und BFF können unabhängig deployed werden • Kommunikation on Demand • Requests können gechacht werden
- 36.
- 37.
- 38. BFF und SSG •Die Daten werden zur Buildzeit geladen • Das Ergebnis wird zwischengespeichert • Weniger Tra ffi c zum Backend • Daten können veraltet sein - ggf. Rebuild der statischen Artefakte
- 39. Optimierungen • Leichtgewichtige Runtimeswie Vercel Edge • Kein Node.js erforderlich • Keine zusätzlichen Bibliotheken erforderlich
- 40. Optimizations • Eigene fetchImplementierung • O ff ensives Caching • Cache Invalidierung • Manuell • Eventbasiert • Zeitbasiert
- 41.
- 42. Kein clientseitiges Ladenmehr? • Clientseitiges Datenladen nicht empfohlen • Optimierungspotenzial geht verloren • Im Client gibt es eine reguläre SPA • Clientseitiges Laden ist jederzeit möglich
- 43.
- 44.
- 45. Data Routes • DasMeta Framework spielt die Rolle einer API • Nachdem es in Node implementiert ist, kann es auf alle APIs zugreifen • Es kann entweder an ein anderes Backend weiterleiten oder die Anfragen selbst beantworten • Das Meta Framework ist als einziger Einstiegspunkt zum Backend
- 46. Fragen? …dann ist jetztgenau der richtige Zeitpunkt! Rainer Sturm / pixelio.de
- 47. Kontakt Sebastian Springer sebastian.springer@maibornwol ff .de MaibornWol ff GmbH Theresienhöhe 13 80339München @basti_springer https://github.com/sspringer82