Angular 16: Das größte Release seit dem initialen Rollout von Angular

Das Angular-Team hat das mit Spannung erwartete Angular 16 veröffentlicht, das größte Release des JavaScript-Frameworks seit der Einführung von Angular 2. Im Rahmen der Initiative Angular Momentum zielt es darauf ab, die Developer Experience weiter zu verbessern und neue Funktionen auf der Überholspur zu implementieren. Ein erster Schritt ist die Reaktivität in Angular-Anwendungen zu vereinfachen, denn die Einführung von Signals als zentralem Feature revolutioniert die Change Detection in Angular.

Angular 16 signalisiert einfachere Reaktivität

Bislang musste sich Angular auf zone.js verlassen, um die Change Detection zu gewährleisten. Diese Lösung skalierte jedoch nicht sauber und benötigte viele kleine Performance-Hacks, um in großen Anwendungen effizient zu funktionieren. Mit Angular 16 wird zone.js zu einer optionalen Abhängigkeit, während Signals die sogenannten Reactive Primitives (Grundbausteine der Reaktivität) einführen: signal, computed und effect:

• signal ist das Äquivalent zu einer Variable und definiert einen veränderlichen Wert, vergleichbar mit einer Klassen-Eigenschaft oder einem Observable of('value').
• computed ist ein zusammengesetzter oder berechneter Wert, der seinen Wert aus anderen Signals ableitet. Mit computed lässt sich klar definieren, wann ein Wert neu berechnet werden muss, was einen entscheidenden Performance-Vorteil gegenüber klassischen interpolierten Werten in Angular bietet.
• effect bezeichnet eine Funktion, die ausgeführt wird, wenn sich Abhängigkeiten verändern. Damit gemeint sind Signal-Werte, die innerhalb des Effekts zum Einsatz kommen. Sie ermöglichen es Entwicklerinnen und Entwicklern, einfach und komfortabel auf Wertänderungen von Signals zu reagieren. Hierbei werden sowohl Primitive Signals als auch Computed Signals beachtet. Entwicklerinnen müssen sich nicht um die Handhabung dieser Werte kümmern, denn das Erkennen transitiver Abhängigkeiten erfolgt automatisch.

Durch diesen Aufbau lässt sich die Reaktivität der Komponenten deutlich feingranularer steuern. Das einfachere mentale Modell räumt mit schwammigen Abhängigkeiten der jeweiligen View und unklarem Datenfluss auf. Außerdem sinkt die Anzahl der Rechenoperationen zur Laufzeit, was letztlich zu einer höheren Performance führt.

Abwärtskompatibilität und Zusammenspiel mit RxJS

Obwohl die vollständige Implementierung von Signals erst im Laufe des Jahres erwartet wird, können Entwicklerinnen das Feature ab sofort über @angular/core oder @angular/core/rxjs-interop nutzen. Zukünftige Pläne beinhalten auch die Vereinfachung der Lifecycle Hooks, die auf der Basis von Signals arbeiten.

Der verbesserten Interoperabilität zwischen RxJS und Angular 16 dienen vordefinierte Funktionen wie toSignal und toObservable, die die Umwandlung von und zu Observables ermöglichen. Zudem erleichtert der neue takeUntilDestroyed-Operator das Aufräumen von Observables in Komponenten, was die Verwaltung von Ressourcen in Angular-Anwendungen vereinfacht.

Im weiteren Verlauf plant das Angular-Team außerdem weitere Schnittstellen auf die neue Signals-API umzustellen. So sollen beispielsweise Component Inputs und die Component Lifecycle Hooks umgestellt werden.

Heise-Konferenz: enterJS 2023

Am 21. und 22. Juni 2023 richten die Veranstalter dpunkt.verlag, heise Developer und iX die Enterprise-JavaScript-Konferenz enterJS in Darmstadt aus. In über 35 Vorträgen kommen JavaScript- und TypeScript-Sprachneuerungen, neue und etablierte Tools und Frameworks – darunter React, SvelteKit und Astro – sowie Barrierefreiheit und Softwarearchitektur zur Sprache.

Ganztägige Workshops stehen sowohl vor Ort als auch online bereit.

Auszug aus dem Programm:

• Speeding Up Your Angular App: Techniques for Optimizing Rendering Performance
• A11y für alle – Wie mache ich meine Angular-Anwendung barrierearmer?
• Reactive Angular (Workshop, 20. Juni, Darmstadt)
• Web Component Design Patterns mit Lit (Workshop, 29. Juni, online)

Serverseitiges Rendering mit Angular Universal

Angular Universal bietet nun eine Developer Preview für ein überarbeitetes serverseitiges Rendering. Eine bedeutende Neuerung ist die Einführung der "Full App Non-Destructive Hydration". Im Gegensatz zu früheren Ansätzen, bei denen das DOM neu gerendert wurde, sobald die Hydration stattfand, überprüft das Framework nun beim Aufbau interner Datenstrukturen, ob die DOM-Knoten bereits vorhanden sind. Anschließend verknüpft es diese Knoten mit den entsprechenden Event-Listenern. Um dieses Feature zu nutzen, ist es notwendig, die Funktion provideClientHydration() im Providers-Array einzubinden.

Dieser Ansatz bringt mehrere Vorteile für die Nutzerinnen und Nutzer von Angular-Apps:

• Kein Flackern mehr während des Ladevorgangs der Anwendung
• Verbesserte Performance bei Web Core Vitals
• Einfache Integration in bestehende Apps, was zu höheren Adaptionsraten führt
• Die Umstellung ist inkrementell umsetzbar. Mit dem ngSkipHydration-Attribut können weiterhin Komponenten manuell das DOM manipulieren, falls erforderlich.

In ersten Tests ergibt sich laut eigener Aussage des Angular-Teams bei der Metrik Largest Contentful dadurch eine Verbesserung um 45 Prozent – eine deutliche Steigerung der User Experience.

Diese ersten Schritte sollen den Anfang für die weitere Zukunft des serverseitigen Renderings darstellen, weitere Features wie partielle Hydration und Resumability sollen schon bald folgen.

Angular ist damit Marktmitbewerbern wie Next.js nun wieder deutlich auf den Fersen und wandelt damit ein bisher eher stiefmütterlich behandeltes Thema zu einem echten Feature.

Erweiterung der Standalone APIs

Angular 16 erweitert die Standalone APIs, um die Migration von Modulen und Komponenten zu vereinfachen. Neue Schematics konvertieren bestehenden Code, entfernen überflüssige NgModules und ändern das Bootstrapping der Anwendung, sodass es auf Standalone APIs basiert.

Dafür braucht es nur ein einziges Kommando im Projekt:

ng generate @angular/core:standalone

Für neue Projekte bietet Angular 16 die Möglichkeit, direkt eine vereinfachte Struktur mit Standalone-Komponenten zu erstellen. Mit dem Befehl ng new --standalone können Entwicklerinnen und Entwickler ein neues Projekt aufsetzen, das bereits auf Standalone APIs basiert. Das erleichtert den Einstieg in Angular-Projekte und ermöglicht eine effizientere Projektstruktur.

Verbessertes Tooling in Angular 16

Im Bereich Tooling gibt es in Angular 16 einige interessante Neuerungen und Verbesserungen:

Dazu zählt eine Vorschau auf das neue Build-Tooling, das Vite und esbuild kombiniert. Als Ersatz für Webpack testet das Angular-Team nun den Einsatz dieser beiden Tools. esbuild hat in ersten Tests eine Verbesserung der Build-Performance um 72 Prozent bei Produktions-Builds gezeigt. Vite, als Aufsatz auf esbuild, bereichert auch ng serve mit diesem Performancegewinn. Dabei kommt Vite im Angular CLI nur als Entwicklungsserver zum Einsatz, anstatt die gesamte Kompilierung darin abzubilden.

Angular 16 bietet daneben experimentelle Unterstützung für Jest und Web Test Runner. Nach Angaben des Angular-Teams zählt Jest in Umfragen in der Angular- und der breiteren JavaScript-Community zu den beliebtesten Unit-Testing-Tools. Den Angular Language Service hat das Entwicklungsteam erweitert: Er bietet nun die Möglichkeit, Autocomplete-Imports in Templates zu verwenden. Pipes und Komponenten lassen sich jetzt direkt aus dem Template importieren.

Zudem kann Angular 16 mit TypeScript 5.0 umgehen, einschließlich der Unterstützung für ECMAScript Decorators, dem Verzicht auf ngcc und der Unterstützung für Service Worker in Standalone-Applikationen.

Insgesamt tragen diese Verbesserungen im Tooling von Angular 16 zu einer verbesserten Entwicklererfahrung und effizienteren Arbeitsabläufen bei.

Neuerungen für die Developer Experience

Außerdem bringt Angular 16 eine Reihe von Neuerungen und Verbesserungen, die die Developer Experience weiter optimieren:

Router

Erstmalig besteht nun die Möglichkeit, direkt in der Routen-Konfiguration die Inputs einer Komponente anzusprechen. Damit ist es möglich, Werte in der resolve-Eigenschaft einer Route einzuspeisen, die dann direkt nach dem Aufruf der Route zur Verfügung stehen.

Required Inputs

Entwicklerinnen haben nun die Möglichkeit, einen Input als required zu markieren. Dadurch ist eine Komponente erst dann verwendbar, wenn sie die erforderlichen Inputs erfüllt. Dieser Schritt ist besonders hilfreich für Komponentenbibliotheken und große Entwicklungsteams, um die Codequalität und Wartbarkeit zu verbessern.

Flexibleres Handling von Cleanup-Logik bei OnDestroy

Mit der Einführung des Injectable DestroyRef können Entwicklerinnen und Entwickler die Registrierung von Cleanup-Logik in Komponenten flexibler gestalten, was das Ressourcenmanagement in Angular-Anwendungen verbessert.

Self-closing Tags

Eine weitere Neuerung ist die Einführung von selbstschließenden Tags für Komponenten-Selektoren. Dadurch ist es nicht mehr nötig, Tags doppelt auszuschreiben, sondern diese lassen sich selbstschließend gestalten.

In einem Blogeintrag stellt das Entwicklungsteam die neuen Features in Angular 16 vor. Weitere Details sind im GitHub-Repository zu finden.

(mai)