Neuerungen in JavaScript Frameworks (Mai 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Es kann schwierig sein, den Überblick über JavaScript-Frameworks zu behalten. Dieses Dokument enthält kurze Highlights der jüngsten Entwicklungen im Bereich der JavaScript-Frameworks im letzten Jahr. Ausführlichere Informationen zu einigen dieser Themen finden Sie im entsprechenden Vortrag Das JavaScript-Frameworks-Ökosystem auf der diesjährigen Google I/O-Veranstaltung.

Diagramm mit Vergleich der Framework-Features

Wie das Diagramm zeigt, fließen JavaScript-Frameworks in einer Reihe ähnlicher Funktionen und Architekturen zusammen. Dazu gehören komponentenbasierte Architektur, dateibasiertes Routing und moderne SSR-Unterstützung. Diese Konvergenz zeigt die Reife und die Weiterentwicklung des Ökosystems, während Frameworks voneinander lernen und Best Practices anwenden.

Gleichzeitig heben sich die einzelnen Frameworks aufgrund einer Reihe neuer Trends (z. B. Serverkomponenten und unterschiedliche Ansätze einer detailgenauen Reaktivität) weiterhin ab. Damit wir diese Trends besser verstehen, befassen wir uns mit ihnen.

Angular

Die jüngsten Releases von Angular umfassen eine Vielzahl signifikanter Änderungen, darunter Signale, zurückstellbare Ansichten, NgOptimziedImage, nicht destruktive Hydration und teilweise Hydration. Einige der Highlights:

  • Signale: Signale sind ein Ansatz, der von mehreren Frameworks (jetzt Angular) verwendet wird, um den Status in einer Anwendung zu verfolgen. Angular-Signale kann die Laufzeitleistung verbessern – einschließlich Interaction to Next Paint (INP), indem die Anzahl der Berechnungen, die während der Änderungserkennung erfolgen müssen, reduziert werden.
  • Rücksetzbare Ansichten: Mit rückwärtsfähigen Ansichten ist es möglich, das Laden bestimmter Komponenten, Anweisungen und Pipes zu verzögern. Sie können beispielsweise das Laden einer Abhängigkeit so lange zurückstellen, bis der Inhalt im Darstellungsbereich erscheint oder der Hauptthread inaktiv ist.
  • NgOptimizedImage: NgOptimizedImage ist eine Bildkomponente für Angular, mit der die Best Practices für das Laden von Bildern automatisiert werden.
  • Zerstörungsfreie Hydration: Durch die zerstörungsfreie Hydration wird das Flimmern behoben, das auftreten würde, wenn das DOM von serverseitig gerenderten Angular-Apps clientseitig neu erstellt wurde.
  • Teilweise Hydration: Das Angular-Team wird demnächst die Entwicklervorschau für die teilweise Hydration veröffentlichen. Bei der teilweisen Hydration lädt der Browser standardmäßig kein JavaScript der Seite, wenn die Seite gerendert wird. Stattdessen werden bestimmte Teile der Seite hydratisiert, wenn der Nutzer mit der Seite interagiert.

Astro

Astro, ein moderner Builder für statische Websites, der mit seinem innovativen Ansatz für die Webentwicklung große Wellen erzielt. Astro hat einige aufregende Funktionen und Updates veröffentlicht, insbesondere für Leistung und Entwicklererfahrung:

  • Astroinseln: Auf Astroinseln können Entwickler interaktive UI-Komponenten erstellen, die vom Rest der Seite isoliert sind. Dies ermöglicht effiziente Updates und optimale Leistung.
  • Hybrides Rendering: Astro unterstützt jetzt Hybrid-Rendering. Dadurch werden die Vorteile der Generierung statischer Websites und des serverseitigen Renderings für noch mehr Flexibilität kombiniert.
  • Bild- und Bildkomponenten: Astro hat neue Bild- und Bildkomponenten eingeführt, die die Verarbeitung von Bildern vereinfachen und eine automatische Optimierung ermöglichen.
  • Unterstützung für View Transitions: Astro unterstützt die View Transitions API, um reibungslose Seitenübergänge zu ermöglichen.
  • Astro Dev Toolbar: Die Astro Dev Toolbar bietet leistungsstarke Tools zur Fehlerbehebung und Optimierung in Astro-Anwendungen.

React

Letztes Jahr wurde mit der Veröffentlichung der React-Serverkomponenten ein neuer Ansatz für React-Komponenten eingeführt. Seitdem hat das React-Team an einer Vielzahl neuer Funktionen gearbeitet, darunter die Features React Compiler und Server Actions sowie:

  • Serverkomponenten: React-Serverkomponenten sind Komponenten, die Daten abrufen und auf dem Server gerendert werden, bevor sie an den Client gestreamt werden. Dadurch wird die Rendering-Arbeit auf den Server verschoben, und es muss weniger Code an den Client gesendet werden.
  • React Compiler: Ein React Compiler ist ein Compiler, der Komponenten automatisch merken kann. Dies verbessert die Leistung, da unnötige erneute Renderings reduziert werden. Das React-Team gab an, dass Entwickler den React Compiler verwenden können, ohne Änderungen am Code vorzunehmen.
  • Serveraktionen: Serveraktionen ermöglichen die Client-zu-Server-Kommunikation. Mit Server Actions kannst du serverseitige Funktionen definieren, die direkt über deine React-Komponenten aufgerufen werden können. Dadurch entfallen manuelle API-Aufrufe und eine komplexe Statusverwaltung. Dies kann besonders nützlich sein, z. B. bei Datenmutationen und Formulareinreichungen.
  • Laden von Assets: React hat an deklarativen APIs gearbeitet, mit denen Assets wie Skripts, Stile, Schriftarten und Bilder vorab geladen und geladen werden können.
  • Offscreen-Rendering: In React wurde auch das Offscreen-Rendering weiterentwickelt. Das Offline-Rendering ist eine neue Funktion in React, mit der Bildschirme im Hintergrund ohne zusätzlichen Leistungsaufwand gerendert werden können. Sie können sich das als eine Version der CSS-Eigenschaft „content-sichtbarkeit“ vorstellen, die nicht nur für DOM-Elemente, sondern auch für React-Komponenten funktioniert.“

Remix

Remix, ein Full-Stack-Web-Framework, gewinnt in der Entwickler-Community Einzug. Der Fokus auf Webgrundlagen und eine verbesserte Entwicklungsumgebung ergaben in Remix einige wichtige Aktualisierungen:

  • Veröffentlichung von Remix 2.0: Remix 2.0, das im September 2023 veröffentlicht wurde, brachte erhebliche Verbesserungen und neue Funktionen im Framework mit.
  • Stabile Unterstützung für Vite: Remix bietet jetzt stabile Unterstützung für Vite, ein schnelles und schlankes Build-Tool, das schnellere Entwicklungs-Builds und eine verbesserte Leistung ermöglicht.
  • SPA-Modus: Mit Remix wurde der SPA-Modus eingeführt, mit dem rein statische Websites erstellt werden können, ohne dass in der Produktion ein JavaScript-Server erforderlich ist. Dadurch können Entwickler die leistungsstarken Funktionen von Remix wie dateibasiertes Routing und automatische Codeaufteilung nutzen, ohne die Bereitstellung statischer Websites zu vereinfachen.

Next.js

Die Veröffentlichung von Next.js 13.4 im Mai 2023 war besonders bemerkenswert, da sie die stabile Unterstützung für React-Serverkomponenten, Streaming und Suspense einleitete. Seitdem baut Next.js den Support für neue React APIs weiter aus (z. B. Server Actions) und iteriert die Entwicklung in Initiativen wie Turbopack. Weitere Highlights:

  • App Router: App Router, der in Next.js 13.4 stabil wurde, ist eine neue Möglichkeit, das Routing in Next.js-Anwendungen zu strukturieren und zu verwalten. App Router ist eine Voraussetzung für die Verwendung neuer Next.js-Funktionen wie freigegebene Layouts und verschachteltes Routing sowie neuer React-APIs wie React Server Components, Suspense und Server Actions in Ihrer Next.js-App.

  • Turbopack: derzeit experimentell) für das Seiten-Rendering, das auf der Suspense API von React basiert. Beim teilweisen Pre-Rendering wird eine Seite mithilfe einer statischen Ladeshell gerendert. Die Shell lässt jedoch "Löcher" für den dynamischen Inhalt auf der Seite zu, und dieser Inhalt wird asynchron geladen. Dadurch ergeben sich die Leistungsvorteile einer im Cache speicherbaren, statischen Seite, während gleichzeitig dynamische Daten in die Seiteninhalte eingebunden werden können.

Vue

Die neueste Version von Vue, Vue 3.4, enthielt eine Reihe von Leistungsverbesserungen. Vue arbeitet derzeit auch an Vue Vapor, das ebenfalls leistungsorientiert ist. Hier sind einige Highlights in diesem Bereich:

  • Vue 3.4 veröffentlicht: Zu den Funktionen gehören ein vollständig neu geschriebener Parser, der doppelt so schnell und schneller SFC-Kompilierung bietet, und ein refaktoriertes Reaktivitätssystem, das die Neuberechnungseffizienz verbessert.
  • Vue Vapor Mode: Vue arbeitet am Vapor Mode, einer leistungsorientierten Kompilierungsstrategie, die auf Vue Single File Components basiert. Der Vapor Mode erzeugt Code, der leistungsstärker ist als der derzeit vom Vue Compiler erzeugte Code. Da der Vapor-Modus für alle Komponenten verwendet wird, ist außerdem kein Vue Virtual DOM erforderlich, wodurch die Bundle-Größe reduziert wird.
  • Vue 2 erreicht EOL: Das Ende des Produktzyklus von Vue 2 wurde am 31. Dezember 2023 erreicht. Vue 2 ist jedoch immer noch weit verbreitet: Etwa 50% der Vue-npm-Paketdownloads stammen von Vue 2.

Nuxt

Nuxt bevorzugt die Veröffentlichung von Nuxt 4. Zusätzlich zu den im letzten Jahr häufigen Framework-Releases von Nuxt ist das Ökosystem der Nuxt-Module auf fast 220 Module angewachsen. Hier einige der jüngsten Entwicklungen in diesem Bereich:

Durchgängig

Solid hat auf die stabile Version 1.0 seines Meta-Frameworks SolidStart hingearbeitet. SolidStart bietet eine fein abgestimmte Reaktivität, isomorphes Routing und unterstützt eine Vielzahl von Renderingmodi. Zu den Highlights gehören:

  • Detaillierte Reaktivität: Das Reaktivitätssystem von Solid ermöglicht präzise Updates und optimale Leistung, was eine effiziente Rendering- und Statusverwaltung ermöglicht.
  • Isomorphes Routing: SolidStart bietet einen einheitlichen Ansatz für das Routing, mit dem Entwickler Routen definieren können, die sowohl auf dem Client als auch auf dem Server reibungslos funktionieren.
  • Flexible Rendering-Modi: SolidStart unterstützt verschiedene Renderingmodi, darunter serverseitiges Rendering, statische Websites und clientseitiges Rendering. So haben Entwickler die Flexibilität, den besten Ansatz für ihre Anwendung auszuwählen.

Schleier

Im vergangenen Jahr hat sich das Svelte-Team auf die kommende Version von Svelte 5 konzentriert, die eine große Rolle spielen wird. Weitere Highlights:

  • Svelte 5 ist bald verfügbar: Mit Svelte 5 wird nicht nur eine Umschreibung des Svelte-Compilers und der Svelte-Laufzeit eingeführt, sondern auch das Konzept der Runen eingeführt.
  • Angekündigte Runen: Runes sind eine neue Funktion in Svelte 5. „Runes ermöglichen eine universelle, fein abgestimmte Reaktivität... Mit Runen geht die Reaktivität über die Grenzen eurer Svelte-Dateien hinaus... Die Reaktivität von Svelte 5 basiert auf Signalen. Im Gegensatz zu anderen Frameworks sind Signale bei Svelte 5 jedoch ein reines Implementierungsdetail und nicht etwas, mit dem Sie direkt interagieren.“
  • SvelteKit 2 veröffentlicht: SvelteKit ist das Meta-Framework für Svelte. Zu den Features in diesem Release gehören oberflächliches Routing und die Unterstützung für Vite 5.

Chrome-Aurora

Chrome Aurora ist ein Team bei Google, das mit verschiedenen Open-Source-Web-Frameworks zusammenarbeitet, um die Nutzererfahrung – insbesondere die Leistung – im gesamten Web zu verbessern. Hier sind einige der Initiativen, zu denen wir im letzten Jahr beigetragen haben:

Fazit

Das JavaScript-Framework entwickelt sich ständig weiter und jedes Framework bringt seine eigenen Innovationen und Verbesserungen mit sich. Ganz gleich, ob Sie an den neuesten Funktionen etablierter Frameworks wie Angular, React und Vue oder an neueren Optionen wie Astro, Remix und Solid interessiert sind – es gibt jede Menge spannende Entwicklungen, mit denen Sie Schritt halten können.

Wenn wir als Entwickler über diese Fortschritte informiert sind, können wir fundierte Entscheidungen bei der Auswahl eines Frameworks für unsere Projekte treffen. Wenn wir die Stärken und einzigartigen Merkmale jedes Frameworks kennen, können wir das Framework auswählen, das am besten zu unseren Projektanforderungen und Entwicklungspräferenzen passt.

Wir hoffen, dass Sie durch diese Übersicht einen Einblick in den aktuellen Stand der JavaScript-Frameworks erhalten haben. Weitere Informationen zu den Themen in diesem Blogpost finden Sie im zugehörigen Vortrag von der Google I/O. Viel Spaß beim Programmieren!