Angular 18 steht kurz vor dem Release und wird von vielen Entwickler:innen mit Spannung erwartet. Wir haben uns bereits einige der Features und Neuerungen, die bekannt geworden sind, für dich angesehen. Angular 18 wird laut der offiziellen Webseite am 20. Mai 2024 veröffentlicht werden.
Rückblick der Neuerungen bei Angular 16 & Angular 17
Wir beginnen mit einem kurzen Rückblick. Das waren einige der wesentlichsten Neuerungen, die bei Angular 16 und Angular 17 umgesetzt wurden:
Angular 16
- zone.js wurde zu einer optionalen Abhängigkeit bei Angular 16
- Standalone APIs wurden erweitert
- experimentelle Unterstützung für Jest
- selbstschließende Tags bei Angular 16
- serverseitiges Rendering durch Angular Universal
- Injectable DestroyRef wurde eingeführt
- Verbesserung der Interoperabilität mit RxJS
Angular 17
- Signals haben nun einen stabilen Status
- Standalone Components werden bei Angular 17 eingeführt
- verbesserte Lern- & Dokumentationswebsite
- neue Syntax für Control Flow bei Angular 17
Voraussichtliche Angular 18 Neuerungen & Features
Es ist bisher nicht genau bekannt, welche Verbesserungen bei Angular 18 geplant sind, aber das Team von Angular hat bereits einige Punkte angesprochen und es gibt Vermutungen. Diese sehen wir uns im Folgenden an.
Unterstützung von TypeScript 4.7 in Angular 18
Mit der Einführung von Angular 18 wird die vollständige Unterstützung von TypeScript 4.7 zur Verfügung stehen. Diese Version von TypeScript bringt eine Reihe bedeutender Neuerungen und Verbesserungen mit sich, die es Entwickler:innen ermöglichen, Anwendungen effektiver und robuster zu gestalten.
Die Integration von Template Literal Types ist dabei ein besonders spannender Fortschritt. Diese Funktion ermöglicht es, die Typisierung von Template-Strings präziser zu definieren. Durch die Verwendung dieser Typen können Fehler bereits in einem frühen Stadium der Entwicklung erkannt und behoben werden, was die Qualität des Codes erheblich steigert.
Eine weitere wichtige Neuerung sind die Import-Arten, die TypeScript 4.7 einführt. Diese erlauben eine noch modularere und organisierte Struktur. Entwickler:innen können dadurch ihre Projekte besser strukturieren und Abhängigkeiten klarer definieren, was die Wartbarkeit und Skalierbarkeit von Anwendungen fördert.
Mit der neuesten Version von TypeScript können Entwickler:innen auch von einer sichereren und konsistenteren Verwendung von readonly profitieren, um die Unveränderbarkeit innerhalb einer Anwendung umzusetzen.
Neue API für ng-template
Mit Angular 18 wird es auch eine neue, innovative API für ng-template geben. Diese vereinfacht und verbessert die Erstellung und Verwendung von Templates. Sie wurde entwickelt, um die Leistungsfähigkeit und Flexibilität zu steigern.
Ohne Abstriche bei der Performance machen zu müssen, können Entwickler:innen mir der verbesserten API komplexere Logik und Bedingungen in Templates integrieren. Die Erfüllung spezifischer Anforderungen und Erwartungen von Nutzer:innen wird dadurch erleichtert.
Auch die Unterstützung bei der Erstellung wiederverwendbarer und leicht wartbarer Templates ist ein zentraler Vorteil der neuen ng-template API. Diese können als eigenständige Komponente innerhalb einer Anwendung oder projektübergreifend zum Einsatz kommen. Entwickler:innen können Code-Duplizierung reduzieren und die Konsistenz erhöhen, indem sie diese modularen Templates verwenden.
Verbesserte Change Detection bei Angular 18
Bei größeren Anwendungen hat Angular 17 Schwierigkeiten bei der Erkennung von Änderungen. Voraussichtlich wird Angular 18 bei größeren Komponenten effizienter sein als seine Vorgängerversion. Denkbar ist auch, dass OnPush zur Standardeinstellung wird. Das verbessert die Reaktionsfähigkeit für User:innen.
Bei früheren Versionen von Angular nutzte das Framework Zone.js, um Zustandsänderungen zu verfolgen. Seit dem Release von Angular 17 hat das Team Angular Signals in die Developer Preview implementiert. Das ermöglicht Entwickler:innen Zustände von Anwendungen mit Signals statt mit Zone.js zu überwachen.
Barrierefreiheit für Angular Components
Das Angular-Team evaluiert derzeit Angular Material anhand einiger gängiger Barrierefreiheitsstandards, wie WCAG. Wenn dieser Prozess abgeschlossen ist sollen deutliche Verbesserungen in der Barrierefreiheit des Frameworks erreicht werden. Ein richtiger und wichtiger Schritt, auch mit Hinblick auf das Barrierefreiheitsstärkungsgesetz 2025 (BFSG).
Optimierte Tools für Debugging
Angular 18 wird auch eine Reihe von Verbesserungen bei Tools zum Debugging herausbringen. Diese vereinfachen das Debuggen von Angular-Anwendungen.
Eine der wichtigsten Neuerungen ist die verbesserte Möglichkeit, Source Maps zu integrieren. Mithilfe von Source Maps können Entwickler:innen den Code direkt in den Entwicklungswerkzeugen des Browsers anzeigen und debuggen.
Entwickler:innen können ihre Anwendungen in Angular 18 mit Performance Profilen genau analysieren. Diese bieten Einblick in die Ausführungszeit von Skripten, Rendering Prozesse und andere Werte. Durch die Analyse können die Prozesse gezielt optimiert werden.
Auch die verbesserte Visualisierung des Komponentenbaums und der Datenbindung sind hilfreiche Features. Mit diesen Werkzeugen können Entwickler:innen die Struktur der Anwendungen visuell darstellen und den Fluss der Daten besser nachvollziehen. Gerade bei großen Anwendungen in Angular ist das eine Herausforderungen, weswegen diese Art der Visualisierung wertvoll ist.
Standard Hybrid Rendering
Das Team von Angular arbeitet daran, hybrides Rendering als Standard für neue Projekte zur Verfügung zu stellen. Das Ziel des hybriden Renderings ist es, die Geschwindigkeit zu erhöhen. Hybrides Rendering kombiniert das Beste aus zwei Welten.
Zum einen betrifft das die Geschwindigkeit bei der Website-Bereitstellung durch den Server und zum anderen bei der clientseitigen Aktualisierung. Dadurch können Websites und Anwendungen sowohl reibungslos von Suchmaschinen indexiert als auch von User:innen genutzt werden.
Verbesserte Leistung mit Ivy bei Angular 18
Auch mit Verbesserungen am Ivy-Compiler ist bei Angular 18 zu rechnen. Dies soll die Effizienz steigern und bietet einige Vorteile in wichtigen Schlüsselbereichen. Die Startzeit von Angular-Anwendungen verkürzt sich durch die Optimierung von Ivy erheblich. Das ist besonders hilfreich bei Anwendungen, die auf Geräten mit begrenzen Ressourcen ausgeführt werden. Ebenso spielt es eine entscheidende Rolle bei Umgebungen, bei denen rasche Ladezeiten entscheidend sind, unter anderem mobile Plattformen mit hohem Benutzeraufkommen.
Die Reduzierung der Bundlegrößen ist ein weiterer wichtiger Bestandteil der Optimierung. Kleinere Bundles bedeuten schnellere Downloadzeiten und damit ein verbessertes Nutzererlebnis. Da viele Suchmaschinen die Ladezeit in ihre Algorithmen einbeziehen, trägt dies auch zur Verbesserung der Suchmaschinenoptimierung von Webanwendungen bei.
Die Überarbeitung des Ivy-Compilers wirken sich aber nicht nur auf die Startzeit und Paketgrößen aus, sondern verbessern auch die Gesamtleistung der Anwendungen. Die Codeausführung ist effizienter und das Benutzererlebnis flüssiger.
Modernisierte Tools für Unit Testing
Mit dem Ersetzen von Protractor durch bessere Varianten wie NightWatch und Cypress hat das Team von Angular, bereits in früheren Versionen, das Unit Testing optimiert. Auch die Umstellung von Karma zu Web Test Runner optimierte das Unit Testing bei Angular. Deswegen ist auch bei neueren Versionen von Angular mit Modernisierungen des Unit Testings zu rechnen.
Fazit
Angular wird auch mit dem neuesten Release wieder eine Reihe von hilfreichen Verbesserungen implementieren. Sobald Angular 18 veröffentlicht wurde und die final umgesetzten Neuerungen bekannt sind, werden wir dich darüber informieren. Speichere unseren Artikel am besten in deinen Lesezeichen, damit du es nicht verpasst.