Angular 17 - Die Renaissance

Einführung

Angular 17 ist eine wichtige Version des beliebten JavaScript-Frameworks und bringt eine Reihe neuer Funktionen und Verbesserungen mit sich. In diesem Artikel werfen wir einen Blick auf einige der bemerkenswertesten Änderungen, darunter die neue Control flow syntax, den Defer-Block, die Verbesserungen bei der SSR-Hydrierung, die View Transitions-API und Leistungsverbesserungen.

Control Flow Syntax

Mit Angular 17 wurde eine neue Control flow syntax eingeführt, die sich derzeit im Preview-Modus befindet. Die neue Syntax basiert auf dem Konzept der Signale, die eine Möglichkeit zur Kommunikation zwischen Komponenten und ihren Templates darstellen. Signale ähneln Ereignissen, sind aber spezifischer und können verwendet werden, um das Rendering eines Templates zu steuern.

Die neue Kontrollflusssyntax ist deklarativer und leichter zu lesen als die derzeitige Syntax. Sie hat auch eine Reihe von Leistungsvorteilen.

Die @-Syntax

Die neue Kontrollflusssyntax verwendet das Zeichen @ zur Kennzeichnung von Kontrollflussblöcken. Um zum Beispiel eine Vorlage nur dann zu rendern, wenn eine bestimmte Bedingung erfüllt ist, würden Sie die folgende Syntax verwenden:

@if (myCondition) {
  <p>{{ conditionText }}</p>
}

Sie können auch komplexere Bedingungen verwenden:

@if (product().isChargeable) {
 <product-price [product]="product()" />
} @else if (product().isGiftProduct) {
 <gift-product-price [product]="product()" />
} @else {
 <span>The product is unknown!</span>
}

Man kann auch Schleifen mit einer eingebauten trackBy Lösung machen:

@for (product of products(); track product.id) {
 <span>{{ product.name }}</span>
} @empty {
 <span>There were no products in the list.</span>
}

Zu guter Letzt noch das Äquivalent zum *ngSwitch:

@switch (product().color) {
 @case (productColor.red) {
   <span>The red one.</span>
 }
 @case (productColor.blue) {
   <span>The blue one.</span>
 }
 @default {
   <span>The let us surprise you color.</span>
 }
}

Defer Block

Der Defer-Block ist ein Template-Konstrukt, das dazu dient, Inhalte zu definieren, die verzögert geladen werden sollen. Wenn der Defer-Block angetroffen wird, kompiliert Angular den Inhalt innerhalb des Blocks in einen separaten Chunk. Dieser Chunk wird erst dann geladen, wenn der Defer-Block ausgelöst wird.

Es gibt zwei Möglichkeiten, einen defer Block auszulösen:

• When: Der defer Block wird ausgelöst, wenn eine bestimmte Bedingung erfüllt ist. Zum Beispiel können Sie einen defer Block auslösen, wenn ein Benutzer zu einer bestimmten Position auf der Seite scrollt.
• On: Der defer Block wird ausgelöst, wenn ein bestimmtes Ereignis eintritt. Sie könnten zum Beispiel einen defer Block auslösen, wenn ein Benutzer auf eine Schaltfläche klickt.

Die Verwendung des defer Blocks bietet eine Reihe von Vorteilen:

Verbesserte Leistung: Das Lazy Loading von Komponenten, Direktiven und Pipes kann die Leistung Ihrer Angular Anwendungen erheblich verbessern. Dies liegt daran, dass der Browser nur die Ressourcen laden muss, die tatsächlich verwendet werden.

• Reduzierte Bundle-Größe: Lazy Loading kann auch die Bundle-Größe Ihrer Angular Anwendungen reduzieren. Dies liegt daran, dass der Browser nur die Ressourcen herunterladen muss, die tatsächlich verwendet werden.
• Verbesserte Benutzererfahrung: Lazy Loading kann auch die Benutzerfreundlichkeit von Angular Anwendungen verbessern. Dies liegt daran, dass die Benutzer nicht warten müssen, bis alle Ressourcen geladen sind, bevor sie die Anwendung nutzen können.

Hier sind ein paar Beispiele für die Verwendung des Aufschiebeblocks:

<!-- On viewport -->
@defer (on viewport(trigger)) {
 <product/>
}

<!-- If the condition has been met -->
<button (click)="showContent.set(true)">Show product</button>
@defer (when showContent()) {
 <product/>
}

Verbesserungen bei der SSR-Hydration

Insgesamt machen die Hydration Verbesserungen in Angular 17 SSR-Anwendungen schneller, reaktionsschneller und benutzerfreundlicher.

• Non-destructive Hydration: Dies ist die grösste Verbesserung und bedeutet, dass Angular nun das DOM, das auf dem Server gerendert wurde, wiederverwenden kann, ohne es komplett zu zerstören und neu zu rendern. Dies kann die Leistung von SSR-Anwendungen erheblich verbessern.
• Improved hydration of dynamic content: Angular kann jetzt dynamische Inhalte besser hydratisieren, z.B. Inhalte, die mithilfe von Vorlagen generiert wurden. Dies kann dazu beitragen, die Benutzererfahrung von SSR-Anwendungen zu verbessern.
• Reduziertes Flackern: Angular hat auch eine Reihe von Verbesserungen vorgenommen, um das Flackern bei der Hydrierung von SSR-Anwendungen zu reduzieren.

View Transitions API

Angular 17 führt ein neues und spannendes Feature ein: die View Transitions API. Mit dieser API können Sie weiche und ansprechende Animationen beim Übergang zwischen verschiedenen Ansichten in Ihrer Anwendung erstellen.

Die View Transitions API funktioniert durch die Erstellung eines Pseudo-Elementbaums. Dabei handelt es sich um eine temporäre Kopie des DOM, die verwendet wird, um den Zustand des DOM vor und nach dem Übergang darzustellen. Angular animiert dann den Pseudo-Elementbaum, um den Übergangseffekt zu erzeugen.

Vorteile der Verwendung der View Transitions-API Es gibt eine Reihe von Vorteilen bei der Verwendung der View Transitions-API:

• Sie ist einfach zu verwenden.
• Sie ist sehr leistungsfähig und ermöglicht die Erstellung komplexer Animationen.
• Sie ist leistungsfähig.
• Sie ist mit Browsern kompatibel (Browser-Kompatibilität).

So aktivieren Sie sie mit der neuen Provider-Syntax:

import { provideRouter, withViewTransitions } from '@angular/router';
import { APP_ROUTES } from 'src/app/app.routes';

bootstrapApplication(AppComponent, {
 providers: [
   provideRouter(
     APP_ROUTES, // Your route configurations
     withViewTransitions() // View Transitions
   ),
 ],
})

Sie können die API für Ansichtsübergänge auch verwenden, um benutzerdefinierte Animationen zu erstellen, die dem einzigartigen Stil Ihrer Anwendung entsprechen. Sie können zum Beispiel eine Animation erstellen, die eine neue Ansicht hinter einer bestehenden Ansicht erscheinen lässt, oder eine Animation, die eine Ansicht schrumpfen und sich in Luft auflösen lässt.

Die View Transitions API ist eine leistungsstarke neue Funktion in Angular 17, die Ihnen dabei helfen kann, weiche und ansprechende Animationen beim Übergang zwischen verschiedenen Ansichten in Ihrer Anwendung zu erstellen. Wenn Sie die View Transitions API noch nicht nutzen, sollten Sie sie unbedingt ausprobieren.

Die Leistung von Angular 17

Angular 17 ist eines der schnellsten JavaScript-Frameworks auf dem Markt, und es ist deutlich schneller als Angular 16. Dies ist auf eine Reihe von Verbesserungen zurückzuführen, die am Angular-Compiler und der Ivy-Rendering-Engine vorgenommen wurden.

Hier sind einige der Leistungsverbesserungen in Angular 17:

• Schnellere Codegenerierung: Der Angular-Compiler wurde optimiert, um schnelleren Code zu generieren. Dies kann zu einer erheblichen Leistungsverbesserung bei Anwendungen führen, die eine grosse Menge an Code enthalten.
• Effizienteres Rendering: Die Ivy-Rendering-Engine wurde optimiert, um effizienter zu sein. Dies kann zu einer erheblichen Leistungssteigerung bei Anwendungen mit vielen dynamischen Inhalten führen.
• Reduzierte Bundle-Grösse: Angular 17 hat eine kleinere Bundle-Größe als Angular 16. Dies kann zu einer schnelleren Ladezeit für Ihre Anwendungen führen.

Die folgenden Benchmark-Ergebnisse zeigen, wie Angular 17 im Vergleich zu anderen gängigen JavaScript-Frameworks abschneidet:

Wie Sie sehen können, ist Angular 17 deutlich schneller als React und Vue.

Hier sind einige Tipps, wie Sie die Leistung Ihrer Angular 17-Anwendungen verbessern können:

• Verwenden Sie die View Transitions API, um weiche und ansprechende Animationen beim Übergang zwischen verschiedenen Ansichten in Ihrer Anwendung zu erstellen.
• Verwenden Sie Lazy Loading, um Module und Komponenten nur dann zu laden, wenn sie benötigt werden.
• Verwenden Sie die Angular CLI, um Ihre Anwendung für die Produktion zu bündeln.
• Verwenden Sie ein CDN, um die Assets Ihrer Anwendung bereitzustellen.

Wenn Sie diese Tipps befolgen, können Sie Angular 17-Anwendungen erstellen, die schnell und reaktionsschnell sind.

Referenz: https://krausest.github.io/js-framework-benchmark/current.html

Fazit

Angular 17 ist eine wichtige Version des beliebten JavaScript-Frameworks und bringt eine Reihe von neuen Funktionen und Verbesserungen mit sich. Die neue Kontrollflusssyntax, der Defer-Block, die Verbesserungen bei der SSR-Hydrierung, die View Transitions-API und die Leistungsverbesserungen machen Angular 17 zu einem noch leistungsfähigeren und benutzerfreundlicheren Framework.

Wenn Sie Angular Anwendungen entwickeln, empfehle ich Ihnen, noch heute auf Angular 17 zu aktualisieren. Sie werden froh sein, dass Sie es getan haben.