Neueste Verbesserungen in Angular 17: Alles, was Sie wissen müssen

Laut einer von Statista durchgeführten Studie ist Angular das am häufigsten verwendete Webentwicklungs-Framework und wird von 17,46 % der Befragten genutzt ^[i] . Um diese Position zu behaupten, die Leistung zu verbessern und die Codierung zu vereinfachen, veröffentlichte das Angular-Team am 11. September 2023 seine neue Version – Angular 17.

Das erneuerte Angular-Framework orientiert sich an der Vision von Sarah Drashner, Director of Engineering bei Google und Leiterin des Angular-Teams. Es bringt inkrementelle Verbesserungen mit sich, gewährleistet Abwärtskompatibilität und entspricht gleichzeitig den neuesten Trends bei Front-End-Frameworks.

Mit Angular 17 können sich Unternehmen und Entwickler ein verbessertes Entwicklungserlebnis vorstellen. Hier tragen die neue Kontrollflusssyntax, eine verbesserte Unterstützung für Server-Side Rendering (SSR), eine durch esbuild beschleunigte CLI und andere Updates zu einem reibungsloseren und dynamischeren Entwicklungsworkflow bei.

In diesem Blogbeitrag können Sie die neuen Verbesserungen und Updates im Angular 17-Webentwicklungsframework entschlüsseln. Sie werden auch verstehen, warum Entwickler es nutzen sollten, um die Zusammenarbeit zu erleichtern, die Wiederverwendbarkeit von Code zu fördern und die Erstellung skalierbarer und wartbarer Webanwendungen sicherzustellen.

Lass uns anfangen!

Hauptfunktionen und Verbesserungen in Angular 17

1. Auf die Zukunft ausgerichtete Dokumentation

Angular 17 führt mit der Entwicklung eines neuen Zuhauses auf angle.dev eine bedeutende Verbesserung seiner Dokumentation ein. Diese Überarbeitung umfasst eine überarbeitete Struktur, aktualisierte Leitfäden, erweiterte Inhalte und eine hochmoderne Plattform, die eine interaktive Lernreise für Angular und Angular Command Line Interface (CLI) fördert.

Die Beta-Vorschau von angle.dev markiert den Beginn einer neuen Ära, mit Plänen, sie in Version 18 zur Standardwebsite für Angular zu machen. Das Highlight umfasst WebContainer, die es Benutzern ermöglichen, die Leistungsfähigkeit der Angular-CLI direkt in einem modernen Webbrowser zu nutzen. Dies verspricht außerdem ein zukunftsweisendes und umfassendes Dokumentationserlebnis.

2. Integrierter Kontrollfluss

Eine bemerkenswerte Verbesserung in Angular 17 ist die Einführung einer neuen Steuerblocksyntax, die die traditionellen Strukturdirektiven wie *ngIf, *ngFor und *ngSwitch ersetzt. Diese Entwicklung bietet Entwicklern mehr Flexibilität und eine verbesserte Lesbarkeit des Vorlagencodes.

Beispielsweise bieten die Blöcke @if und @else eine sauberere Möglichkeit, Inhalte mithilfe logischer Ausdrücke bedingt darzustellen. Der @for-Block vereinfacht das Durchlaufen von Sammlungen und ermöglicht so aussagekräftigeren und prägnanteren Code. Darüber hinaus ermöglichen die Blöcke @switch, @case und @default einen effizienten Kontrollfluss und verbessern die Handhabung mehrerer Bedingungen.

Um diese Verbesserungen zu nutzen, können Entwickler vorhandene Vorlagen mithilfe des bereitgestellten Schemas migrieren. Dies wird zu einem moderneren und schlankeren Ansatz für die Vorlagenentwicklung in Angular 17 führen.

3. Integrierte @for-Schleife

Die integrierte @for-Schleifenfunktion in Angular 17 stellt eine deutliche Verbesserung sowohl der Entwicklererfahrung als auch der Rendering-Geschwindigkeit dar. Diese Syntax behebt einen häufigen Leistungsengpass, der bei Anwendungen auftritt, die auf *ngFor basieren, indem sie die Verwendung von „track“ für eine effiziente Änderungserkennung vorschreibt. Es sorgt auch für einen schnelleren Rendervorgang.

Im Gegensatz zum Vorgänger wird die „Track“-Funktionalität nahtlos als Ausdruck in die Vorlage integriert, sodass keine zusätzliche Methode in der Klasse der Komponente erforderlich ist. Insbesondere bietet die integrierte @for-Schleife auch eine praktische Abkürzung für die Verarbeitung von Sammlungen mit null Elementen über einen optionalen @empty-Block. Diese Funktion rationalisiert nicht nur die Entwicklung, sondern steigert auch die Leistung von Angular-Anwendungen erheblich und markiert einen bemerkenswerten Meilenstein in der Entwicklung des Frameworks.

4. Aufschiebbare Ansichten

In Angular 17 wurde eine bedeutende Verbesserung namens „Deferrable Views“ eingeführt, als Reaktion auf den Wunsch der Angular-Community nach einem intuitiven Mechanismus zum verzögerten Laden von Komponenten, Anweisungen und Pipes.

Ziel dieser neuen Funktion ist es, den Prozess des verzögerten Ladens von Abhängigkeiten intuitiver und komfortabler zu gestalten. Mit aufschiebbaren Ansichten können Entwickler Teile ihrer Vorlagen deklarativ verzögert laden, bis sie benötigt werden. Dadurch wird die anfängliche Bundle-Größe optimiert und die anfängliche Ladezeit der Anwendung verkürzt. Dies wird durch die Verwendung der neuen Kontrollflusssyntax „@-Syntax“ in Vorlagen erreicht.

Da Deferrable Views integrierte und verwaltete Lösungen für verzögertes Laden bereitstellen, können Entwickler ihre Absicht zum Ausdruck bringen, ohne ausführliche dynamische Importe, Schnittmengenbeobachter oder Ereignishandler verwalten zu müssen. Diese Funktion unterstützt auch das Vorabrufen für eine schnellere Ressourcenverfügbarkeit.

Darüber hinaus können Entwickler integrierte Trigger und benutzerdefinierte Bedingungen verwenden, um festzulegen, wann und wie das verzögerte Laden erfolgen soll. Darüber hinaus reduzieren aufschiebbare Ansichten den Boilerplate-Code und übernehmen automatisch die Abhängigkeitsverwaltung hinter den Kulissen.

5. Erweitertes serverseitiges Rendering (SSR)

Die serverseitigen Rendering-Funktionen von Angular 17 ermöglichen es Entwicklern, die Anwendungsleistung und das Benutzererlebnis zu steigern. Die Hydration Boost-Funktion optimiert den clientseitigen JavaScript-Hydratisierungsprozess, minimiert Flimmern und sorgt für einen reibungsloseren Übergang zu interaktiven Webseiten.

Angular 17 übernimmt außerdem das standardisierte EcmaScript Modules (ESM)-Format für SSR, was Builds vereinfacht und die Kompatibilität mit gängigen Tools verbessert. Darüber hinaus liegt der Schwerpunkt auf der Reduzierung der SSR-Bundle-Größen durch Code-Splitting-Techniken, was zu schnelleren Serverreaktionen und einer verbesserten Suchmaschinenoptimierung führt. Diese Fortschritte machen Angular 17 zu einer überzeugenden Wahl für die Erstellung leistungsstarker und SEO-freundlicher Webanwendungen.

6. Stabiles Signal

Angular 17 stellt eine bahnbrechende Entwicklung mit der Stabilisierung von Signalen vor, einem zentralen Werkzeug für Reaktivitätsbegeisterte. Signals hat sein Label „Entwicklervorschau“ aufgegeben und ist nun eine robuste Lösung für die Statusverwaltung und die Erleichterung von Komponentenaktualisierungen.

Die Integration von Signalen mit Change Detection.OnPush bringt ein Maß an Präzision. Dadurch wird sichergestellt, dass Komponenten nur dann aktualisiert werden, wenn sich ihr spezifisches Signal ändert, wodurch die Leistung optimiert wird, indem unnötige erneute Renderings vermieden werden. Die Abschaffung der Mutate-Methode zugunsten unveränderlicher Aktualisierungen verbessert die Vorhersehbarkeit und Sauberkeit bei der Pflege des Zustandsverlaufs weiter. Während Signale im Rampenlicht stehen, bietet Effects, das sich noch in der Entwicklervorschau befindet, einen Einblick in die Zukunft der Zustandsverwaltung von Angular und präsentiert leistungsstarke Funktionen für asynchrone Vorgänge.

Im Wesentlichen stattet Angular 17 Entwickler mit einem verfeinerten Toolset aus, einschließlich stabiler Signale, OnPush-Integration, unveränderlicher Updates und dem sich entwickelnden Potenzial von Effekten. Dies fördert letztendlich die Erstellung gut strukturierter Anwendungen.

7. Leistungsaufbau mit esbuild

Die Einführung von esbuild in Angular 17 stellt einen bedeutenden Schritt bei der Verbesserung der Build-Leistung für Angular-Projekte dar. Ursprünglich auf Webpack basierend, ist die Angular-CLI auf die Nutzung von esbuild umgestiegen, einem neueren Tool, das für seine Benutzerfreundlichkeit und bemerkenswerte Geschwindigkeit bekannt ist und über 20.000 wöchentliche Downloads vorzuweisen hat.

Die Integration von esbuild wurde in Angular 16 als Entwicklervorschau implementiert und ist nun zu einer stabilen Implementierung in Angular 17 ausgereift. Diese Integration ist über den Application Builder zum Standard-Builder für neue Projekte geworden. Bei bestehenden Projekten wird Entwicklern empfohlen, den Wechsel zu esbuild in Betracht zu ziehen, indem sie den Builder-Eintrag in angle.json aktualisieren.

Durch diese Integration verzeichnen sowohl ng-Serve- als auch ng-Build-Vorgänge eine erhebliche Geschwindigkeitssteigerung, da der Vite-Dev-Server nur bei Bedarf für die effiziente Erstellung von npm-Paketen genutzt wird. Die Integration verschiedener Leistungsoptimierungen durch das CLI-Team trägt zusätzlich zu einem beschleunigten Build-Prozess bei, wobei ng Build häufig eine Geschwindigkeitsverbesserung um den Faktor 2 bis 4 erzielt. Dieser Übergang unterstreicht Angulars Engagement, Entwicklern Tools zur Verfügung zu stellen, die nicht nur Arbeitsabläufe vereinfachen, sondern auch die Effizienz der Projekterstellung erheblich steigern.

8. Eigenständige Komponenten

„Standalone Components“ ist eine bahnbrechende Funktion in Angular 17, die die Erstellung und Nutzung von Komponenten ermöglicht, ohne dass ein übergeordnetes Modul erforderlich ist. Bei diesem Paradigmenwechsel wird die Stammkomponente, beispielhaft dargestellt durch „AppComponent“, mithilfe der Eigenschaft „standalone: ​​true“ im Komponentendekorator als eigenständig markiert. Dieses Attribut bedeutet, dass die Komponente unabhängig von einem übergeordneten Modul arbeitet. Darüber hinaus verlässt sich die Komponente nicht auf ein Modul, sondern nutzt das „Imports“-Array, um die erforderlichen Abhängigkeiten einzubringen, beispielsweise das Router-Modul.

Anschließend wird die Funktion „bootstrapApplication“ verwendet, um die Anwendung zu initiieren, was eine Abkehr vom traditionellen NgModule-zentrierten Ansatz darstellt. Die neu entdeckte Flexibilität eigenständiger Komponenten ermöglicht einen modularen und gekapselten Entwicklungsstil und zeigt Angulars Engagement für die Weiterentwicklung und Verbesserung der Komponentenarchitektur.

Wie migriere ich zu Angular 17?

Um Ihre bestehende Angular-Anwendung auf Version 17 zu aktualisieren, führen Sie die folgenden Schritte aus:

• Aktualisieren Sie zunächst Ihre Angular-CLI global auf Version 17, indem Sie den Befehl „npm install -g @angular/cli@17“ verwenden.

• Aktualisieren Sie als Nächstes Ihre Angular-Kernpakete, indem Sie „ng update @angular/core“ ausführen.

• Wenn Sie zusätzliche Angular-Pakete verwenden, aktualisieren Sie diese einzeln, indem Sie Code verwenden, z. B. „ng update @angular/material“ für Angular Material.

• Testen Sie Ihre Anwendung anschließend gründlich, um sicherzustellen, dass sie nach den Updates wie erwartet funktioniert.

Einige Tipps, die Sie hier befolgen können, umfassen das Upgrade auf Nebenversionen zwischen größeren Updates, das Sichern Ihres Codes und Ihrer Datenbank vor dem Upgrade sowie die Überprüfung der Kompatibilität von Bibliotheken von Drittanbietern. Sie sollten auch die Angular-Dokumentation und Community-Foren konsultieren, um Hilfe zu erhalten, wenn während des Upgrade-Prozesses Probleme auftreten. Diese optimierten Schritte gewährleisten einen reibungslosen Übergang zur neuesten Angular-Version und minimieren gleichzeitig potenzielle Herausforderungen.

Sind Sie bereit, mit Angular robuste, funktionsreiche und moderne Anwendungen zu erstellen? Sprechen Sie mit unseren Experten!

Verweise:

^[i] Statista