Neuerungen in JavaScript Frameworks (Mai 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani

Es kann schwierig sein, mit allen Neuerungen bei JavaScript-Frameworks Schritt zu halten. In diesem Dokument finden Sie eine kurze Zusammenfassung der wichtigsten Ereignisse im JavaScript-Frameworks-Ökosystem im letzten Jahr. Eine ausführlichere Diskussion einiger dieser Themen finden Sie im entsprechenden Vortrag Navigating the JavaScript Frameworks Ecosystem (Das JavaScript-Frameworks-Ökosystem) von der diesjährigen Google I/O.

Diagramm mit Framework-Funktionen im Vergleich

Wie im Diagramm dargestellt, nähern sich JavaScript-Frameworks einer Reihe ähnlicher Funktionen und Architekturen. Dazu gehören die komponentenbasierte Architektur, das dateibasierte Routing und die moderne SSR-Unterstützung. Diese Konvergenz zeigt die Reife und Weiterentwicklung des Ökosystems, da die Frameworks voneinander lernen und Best Practices übernehmen.

Gleichzeitig heben sich einzelne Frameworks durch eine Reihe aktueller Trends (z. B. Serverkomponenten und unterschiedliche Ansätze für die detaillierte Reaktionsfähigkeit) von anderen ab. Um diese Trends besser zu verstehen, gehen wir sie nach und nach durch.

Angular

Die letzten Angular-Releases enthielten eine Reihe wichtiger Änderungen, darunter Signale, verschiebbare Ansichten, NgOptimziedImage, nicht destruktive Hydratisierung und teilweise Hydratisierung. Zu den Highlights gehören:

  • Signale: Signale sind ein Ansatz, der von mehreren Frameworks (einschließlich Angular) zum Überwachen des Status in einer Anwendung verwendet wird. Angular-Signale können die Laufzeitleistung verbessern, einschließlich des Interaktionszeitraums bis zur nächsten Paint-Aktualisierung (Interaction to Next Paint, INP), indem die Anzahl der Berechnungen reduziert wird, die bei der Änderungserkennung erforderlich sind.
  • Verschiebbare Ansichten: Mit verschiebbaren Ansichten lässt sich das Laden bestimmter Komponenten, Anweisungen und Pipelines verschieben. Sie können beispielsweise das Laden einer Abhängigkeit verschieben, bis der Inhalt den Darstellungsbereich betritt oder der Hauptthread inaktiv ist.
  • NgOptimizedImage: NgOptimizedImage ist eine Bildkomponente für Angular, die die Anwendung der Best Practices für das Laden von Bildern automatisiert.
  • Nicht zerstörerische Hydratation: Mit der nicht zerstörerischen Hydratation wird das Flimmern behoben, das auftritt, wenn das DOM von serverseitig gerenderten Angular-Apps clientseitig neu erstellt wird.
  • Teilweise Hydration: Das Angular-Team wird bald die Entwicklervorschau für die teilweise Hydration veröffentlichen. Bei der teilweisen Hydratisierung lädt der Browser beim Rendern der Seite standardmäßig kein JavaScript der Seite. Stattdessen werden bestimmte Teile der Seite aktualisiert, wenn der Nutzer mit der Seite interagiert.

Astro

Astro, ein moderner Tool zum Erstellen statischer Websites, sorgt mit seinem innovativen Ansatz für Webentwicklung für Aufsehen. Mit dem Schwerpunkt auf Leistung und Entwicklerfreundlichkeit hat Astro einige spannende Funktionen und Updates veröffentlicht:

  • Astro Islands: Mit Astro Islands können Entwickler interaktive UI-Komponenten erstellen, die vom Rest der Seite getrennt sind. So sind effiziente Aktualisierungen und eine optimale Leistung möglich.
  • Hybrides Rendering: Astro unterstützt jetzt hybrides Rendering, das die Vorteile der statischen Websitegenerierung und des serverseitigen Renderings kombiniert, um die Flexibilität zu erhöhen.
  • Komponenten Image und Picture: Astro hat neue Image- und Picture-Komponenten eingeführt, die die Bildverwaltung vereinfachen und eine automatische Optimierung ermöglichen.
  • Unterstützung für View Transitions: Astro bietet eine integrierte Unterstützung für die View Transitions API, die flüssige und nahtlose Seitenübergänge ermöglicht.
  • Astro Dev-Symbolleiste: Die Astro Dev-Symbolleiste bietet eine leistungsstarke Auswahl an Tools zum Debuggen und Optimieren von Astro-Anwendungen.

React

Letztes Jahr wurde mit der Veröffentlichung von React-Serverkomponenten ein neuer Ansatz für React-Komponenten eingeführt. Seitdem arbeitet das React-Team an einer Vielzahl neuer Funktionen, darunter der React-Compiler und Serveraktionen 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 verlagert und die Menge an Code reduziert, die an den Client gesendet werden muss.
  • React Compiler: Der React Compiler ist ein compiler, mit dem Komponenten automatisch im Cache gespeichert werden können. Dadurch wird die Leistung verbessert, da unnötige Neu-Renderings reduziert werden. Das React-Team hat erklärt, dass Entwickler den React-Compiler ohne Codeänderungen verwenden können.
  • Serveraktionen: Mit Serveraktionen ist die Client-zu-Server-Kommunikation möglich. Mit Serveraktionen können Sie serverseitige Funktionen definieren, die direkt von Ihren React-Komponenten aufgerufen werden können. Manuelle API-Aufrufe und komplexe Statusverwaltung sind dann nicht mehr erforderlich. Das kann besonders bei Datenmutationen und Formulareinreichungen nützlich sein.
  • Asset-Laden: Im Rahmen von React werden deklarative APIs für das Vorladen und Laden von Assets wie Scripts, Stilen, Schriftarten und Bildern entwickelt.
  • Offscreen-Rendering: Beim React-Rendering wird auch an Offscreen-Rendering gearbeitet. Das Offscreen-Rendering ist eine kommende 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-Property „content-visibility“ 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 Entwicklergemeinde an Beliebtheit. Remix legt den Schwerpunkt auf Webgrundlagen und eine verbesserte Entwicklererfahrung. Es wurden daher mehrere wichtige Updates eingeführt:

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

Next.js

Die Veröffentlichung von Next.js 13.4 im Mai 2023 war besonders bemerkenswert, da damit eine stabile Unterstützung für React-Serverkomponenten, Streaming und Suspense eingeführt wurde. Seitdem wird die Unterstützung für neue React-APIs (z. B. Serveraktionen) kontinuierlich ausgebaut und die Entwicklungsumgebung durch Initiativen wie Turbopack optimiert. Weitere Highlights:

  • App-Router: Der 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. Der App-Router ist eine Voraussetzung für die Verwendung neuer Next.js-Funktionen wie freigegebene Layouts und verschachtelte Routings sowie neuer React-APIs wie React-Serverkomponenten, Suspense und Serveraktionen in Ihrer Next.js-Anwendung.

  • Turbopack: Ein derzeit experimenteller Ansatz für das Seitenrendering, der auf der Suspense API von React basiert. Beim teilweisen Prerendering wird eine Seite mit einer statischen Lade-Shell gerendert. Die Shell lässt jedoch „Löcher“ für die dynamischen Inhalte auf der Seite, die asynchron geladen werden. So können Sie die Vorteile einer cachebaren, statischen Seite nutzen und gleichzeitig dynamische Daten in den Seiteninhalt einbinden.

Vue

Die neueste Version von Vue, Vue 3.4, enthält eine Vielzahl von Leistungsverbesserungen. Außerdem arbeitet Vue derzeit an Vue Vapor, das ebenfalls auf Leistung ausgerichtet ist. Hier sind einige Highlights:

  • Vue 3.4 veröffentlicht: Zu den Funktionen gehören „ein vollständig neu geschriebener Parser, der doppelt so schnell ist, eine schnellere SFC-Kompilierung und ein refaktoriertes Reaktivitätssystem, das die Effizienz der Neuberechnung verbessert“.
  • Vue Vapor-Modus: Das Vue-Team arbeitet an einem optionalen, leistungsorientierten Kompilierungsmodus, der mit Vue Single File Components funktioniert. Im Vapor-Modus wird Code generiert, der leistungsfähiger ist als der Code, der derzeit vom Vue-Compiler erstellt wird. Außerdem ist das Vue Virtual DOM nicht mehr erforderlich, wenn der Vapor-Modus für alle Komponenten verwendet wird, was die Größe des Bundles reduziert.
  • EOL für Vue 2: Das Ende des Produktzyklus (End of Life, EOL) von Vue 2 war der 31. Dezember 2023. Vue 2 wird jedoch immer noch recht häufig verwendet: Etwa 50% der Vue-NPM-Paketdownloads sind für Vue 2.

Nuxt

Nuxt 4 ist in der Pipeline. Neben den häufigen Framework-Releases von Nuxt im letzten Jahr ist das Nuxt-Modulsystem auf fast 220 Module angewachsen. Zu den jüngsten Entwicklungen in diesem Bereich gehören:

Durchgängig

Solid arbeitet an der stabilen Version 1.0 seines Meta-Frameworks SolidStart. SolidStart bietet eine detaillierte Reaktionsfähigkeit, isomorphes Routing und Unterstützung für eine Vielzahl von Renderingmodi. Zu den Highlights gehören:

  • Detaillierte Reaktivität: Das Reaktivitätssystem von Solid ermöglicht präzise Aktualisierungen und eine optimale Leistung, was ein effizientes Rendering und eine effiziente Zustandsverwaltung 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 nahtlos funktionieren.
  • Flexible Rendering-Modi: SolidStart unterstützt verschiedene Rendering-Modi, darunter serverseitiges Rendering, die Erstellung statischer Websites und clientseitiges Rendering. So können Entwickler den für ihre Anwendung am besten geeigneten Ansatz auswählen.

Svelte

Im letzten Jahr hat sich das Svelte-Team auf die bevorstehende Veröffentlichung von Svelte 5 konzentriert, die eine große Bedeutung haben wird. Weitere Highlights:

  • Svelte 5 kommt: Neben einer Neufassung des Svelte-Compilers und der Svelte-Laufzeitumgebung führt Svelte 5 auch das Konzept der Runen ein.
  • Runen angekündigt: Runen sind eine neue Funktion in Svelte 5. „Runen ermöglichen eine universelle, detaillierte Reaktion… Mit Runen geht die Reaktivität über die Grenzen Ihrer .svelte-Dateien hinaus… Die Reaktivität von Svelte 5 basiert auf Signalen. [Im Gegensatz zu anderen Frameworks] sind Signale in Svelte 5 jedoch eher eine Implementierungsdetaillierung im Hintergrund, mit der Sie nicht direkt interagieren.“
  • Veröffentlichung von SvelteKit 2: SvelteKit ist das Meta-Framework für Svelte. Zu den Funktionen dieser Version gehören Shallow 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 Nutzerfreundlichkeit und insbesondere die Leistung im Web zu verbessern. Hier sind einige der Initiativen, an denen wir im letzten Jahr mitgewirkt haben:

Fazit

Das JavaScript-Framework-Ökosystem entwickelt sich weiterhin rasant weiter. Jedes Framework bietet eigene Innovationen und Verbesserungen. Ganz gleich, ob Sie sich für die neuesten Funktionen etablierter Frameworks wie Angular, React und Vue interessieren oder neuere Optionen wie Astro, Remix und Solid ausprobieren möchten, es gibt immer wieder spannende Entwicklungen, die Sie im Blick behalten sollten.

Als Entwickler können wir fundierte Entscheidungen bei der Auswahl eines Frameworks für unsere Projekte treffen, wenn wir über diese Entwicklungen auf dem Laufenden bleiben. Wenn wir die Stärken und einzigartigen Funktionen der einzelnen Frameworks kennen, können wir das Framework auswählen, das am besten zu unseren Projektanforderungen und Entwicklungspräferenzen passt.

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