Mit dem Release von Angular 18 bringt Google’s populäres Framework viele kleinere Verbesserungen mit, die die Developer Experience optimieren. Der wahre Star des Updates ist jedoch das experimentelle Zoneless-Feature, das den Abschied von der bisher essenziellen Bibliothek zone.js einleitet. Dieser Wandel könnte die Zukunft von Angular erheblich beeinflussen.
Zoneless-Feature
Seit jeher nutzt Angular zone.js für die Change Detection – den Mechanismus, der das DOM (Document Object Model) aktualisiert, sobald sich Daten ändern. zone.js überwacht DOM-Ereignisse und asynchrone Aufgaben und löst entsprechend die Change Detection aus. Dabei muss die Bibliothek große Teile des Browsers patchen. Mit Angular 18 wird nun ein neuer Mechanismus vorgestellt, der ohne zone.js auskommt. Dieser experimentelle Ansatz, aktiviert durch provideExperimentalZonelessChangeDetection, signalisiert einen bedeutenden internen Wandel. Entwickler müssen nicht länger auf zone.js angewiesen sein, um Änderungen im DOM zu erkennen und zu verarbeiten.
Change Detection und die OnPush-Methode
Eine wichtige Frage dabei ist, wie die Change Detection künftig ohne zone.js ausgelöst wird. Hier kommt die OnPush-Methode ins Spiel. Diese ist in Angular nicht neu und wurde bislang genutzt, um die Leistung zu steigern, indem unnötige Change Detection-Zyklen vermieden wurden. Bei der OnPush-Methode wird eine Komponente nur dann überprüft, wenn sie als „dirty“ markiert ist, also wenn tatsächlich eine Änderung vorliegt. Das Zoneless-Feature baut auf diesem Prinzip auf und erfordert, dass Entwickler Änderungen explizit markieren, etwa durch markForCheck. Dies eliminiert den Bedarf an automatischen Überwachungen durch zone.js.
Verbesserungen in den Formularmodulen
Angular 18 bringt auch Neuerungen für Formulare. Die FormControl, FormGroup und FormArray Typen erhalten eine neue Property namens events, die Änderungen als Observables bereitstellt. Im Gegensatz zur bisherigen valueChanges-Property können Entwickler nun auf eine breitere Palette von Zustandsänderungen reagieren, was die Flexibilität und Kontrolle bei der Formularverarbeitung erhöht.
Server-Side Rendering und Event Replay
Ein weiteres spannendes Feature ist das Event Replay. Dieses verbessert das Server-Side Rendering (SSR), indem es Benutzerereignisse vor der vollständigen Initialisierung der Anwendung im Browser aufzeichnet und abspielt, sobald Angular bereit ist. Dies bedeutet, dass Benutzeraktionen auch bei langsamer Verbindung nicht verloren gehen, was die Benutzererfahrung erheblich verbessert.
Content Projection mit ng-content
Auch die Content Projection erfährt ein Update. Bislang war die Kindkomponente vollständig abhängig von der Elternkomponente, um HTML-Code zu erhalten. Mit Angular 18 kann die Kindkomponente nun eigenes HTML innerhalb von <ng-content> bereitstellen, falls die Elternkomponente kein HTML übergibt. Dies erhöht die Flexibilität und Unabhängigkeit der Komponenten.
Die Routing-Logik wird ebenfalls erweitert. Bisher war die Property redirectTo statisch. Nun kann sie auch eine Funktion sein, die dynamisch entscheidet, wohin umgeleitet werden soll. Diese Funktion kann Routenparameter und Query-Strings nutzen, was die Routing-Logik deutlich mächtiger und flexibler macht. Zu guter Letzt hat das Angular-Team einige neue Features aus der Developer Preview in den stabilen Status erhoben, darunter die Template-Blöcke @if, @for und @switch. Die offizielle Dokumentationsseite ist jetzt unter angular.dev zu finden, was die alte angular.io ablöst.
Fazit
Angular 18 markiert einen wichtigen Schritt in der Evolution des Frameworks. Besonders das experimentelle Zoneless-Feature könnte die Art und Weise, wie Entwickler mit Change Detection umgehen, revolutionieren. Mit weiteren Verbesserungen in den Bereichen Server-Side Rendering, Formularverwaltung und Routing zeigt Angular 18 einmal mehr, dass das Framework ständig weiterentwickelt wird, um den Bedürfnissen der Entwickler gerecht zu werden. Es bleibt spannend, wie sich diese Änderungen in zukünftigen Versionen weiterentwickeln werden.
© stock.adobe.com, monsitj