Angular CLI hat sich, aus unternehmerischer Sicht, zu einem der produktivsten Frontend-Frameworks entwickelt, was auf die umfangreiche Dokumentation und die Unterstützung der Entwickler-Gemeinschaft zurückzuführen ist.
Seit Angular 2 hat sich dieses Framework progressiv und kontinuierlich weiterentwickelt und sich in den letzten Jahren als eines der wichtigsten Frameworks positioniert. Doch, was sind die Vorteile? Doch, was sind die Vorteile?
Welche Vorteile bietet Angular?
Angular weißt viele Vorteile auf. Im folgenden Abschnitt konzentrieren wir uns auf diese, die für uns am Wichtigsten sind:
- Angular verwendet TypeScript, mit den damit verbundenen Vorteilen, als Basis. Dadurch wird die (reichhaltig vorhandene) Dokumentation leichter verständlich, Design Patterns werden klarer erkennbar und der Code ist leichter zu lesen. Diese Konsistenz (im Vergleich zu purem Javascript) führt auch dazu, dass eine Überlastung und Verwirrung, wie sie bei der Einführung eines neuen Frameworks entstehen kann, mit Angular verhindert werden kann.
- Standardisierte Webkomponenten, welche die Erstellung neuer, benutzerdefinierter, wiederverwendbarer sowie in sich geschlossener HTML-Tags ermöglichen, die später in anderen Angular Anwendungen wiederverwendet und relativ einfach in native Webkomponenten umgewandelt werden können.
Angular 8: der Übergang zu einer umfassenden Modernisierung
Angular 8 ist ein stufenweiser Aufstieg für die große Veränderung: Angular 9. In dieser Zwischenstufe können wir von Angular in seiner ganzen Pracht profitieren, da es über einen stabilen Kern und neue Funktionen verfügt, welche die Benutzerfreundlichkeit erhöhen:
- Lazy Loading, bezeichnet das Verzögern des Ladens oder der Initialisierung eines Objekts, bis zum Moment seiner Verwendung. Obwohl dieser Pattern weit verbreitet ist, erleichtert Angular die Verwendung, indem es von Anfang an im Core implementiert ist, was zu einer Einsparung beim Laden von Objekten führt und die Ladezeiten sowohl für den Benutzer als auch für den Entwickler verbessert.
- Differential loading: eine der größten Änderungen im Angular, und ein Hauptgrund, ein Projekt zu migrieren. Diese Funktion ermöglicht es Ihnen, zwei Bundles gleichzeitig zu kompilieren, so dass Sie je nach verwendetem Browser das eine oder das andere Bundle verwenden können. Diese Funktion ist ein Plus bei der Entwicklung, bei der die Kompatibilität zwischen alten (IE, ältere Versionen von Edge) und modernen Browsern (d. h. ES5 bzw. ES6) gewahrt werden muss, wobei die Größe der Bundles um 7 bis 20 % reduziert wird.
- Web Workers: Wir haben endlich Minions im Core, um uns die Arbeit zu erledigen! 😃 Ab Version 8 unterstützt Angular Web Workers, was es uns ermöglicht, Aufgaben im Hintergrund im Browser zu erstellen.
Für Entwickler finden wir auch eine Reihe von Vorteilen, die unsere Implementierungen verbessern, wie zum Beispiel:
- Neue Funktionen im Routing.
- Verbesserungen in der Verwaltung von Abhängigkeiten.
- Endlich wird die HTTP-Bibliothek erneuert, und vom HTTPClient abgelöst.
- Es ist nicht mehr notwendig, die Browserlist zu erstellen und den Pfad einzustellen, sie ist jetzt standardmäßig konfiguriert.
Aber die große Veränderung kommt mit IVY, der neuen Rendering-Engine, die in späteren Versionen des Frameworks – Angular 9 – implementiert wurde und für einige Verbesserungen in Angular 8 verantwortlich ist. Was wird in dieser Version verfügbar sein?
- Ein Incremental DOM als Hauptstruktur.. Er basiert auf der Erstellung eines Baumes mit den bereits aus jeder Komponente komiplierten Anweisungen, die ein DOM-Netzwerk und DOM-Zweige bilden Mit dieser neuen Struktur wird die DOM-Aktualisierungszeit reduziert, da es nicht notwendig ist, den kompletten Baum aufzubauen, sondern nur den betroffenen Zweig.
- „Shakable Tree„: Methode, bei der die Äste des DOM-Baums „geschüttelt“ werden, wobei die Anweisungen, die zu diesem Zeitpunkt nicht verwendet werden, ignoriert werden, das Gewicht der Pakete verringert und die Ladezeit verkürzt wird.
- Load Memory Footprint: Intelligente Lademethode, die hilft, Speicher zu sparen, wenn sich der DOM-Baum nicht oder kaum geändert hat. Das passiert, wenn man eine Komponente ohne große Änderungen in ihrem DOM-Baum aktualisiert und dabei „Schütteln“ erzeugt, die einen Großteil der Zweige des DOM-Baums ignoriert und wiederverwendet, ohne Speicher für seine Erstellung zu verbrauchen. Mit Angular 8 profitieren wir von den wichtigsten Verbesserungen, die das Framework in späteren Versionen implementiert, behalten aber die Stabilität, die Angular 7 bietet. Interesse, ein Projekt zu migrieren?
Wie migriert man ein Projekt von Angular 7 nach Angular 8?
Die Migration ist sehr einfach, und benötigt vorher diese notwendigen Schritte:
- Wir ersetzen die HTTP-Bibliothek durch die HTTP-Client-Bibliothek.
- Wir aktualisieren auf RxJS6.
- Wir aktualisieren Node auf Version 10 oder höher und TypeScript auf Version 3.4.
- Wir ersetzen /deep/ durch ::ng-deep, dies ist viel effizienter und attraktiver für unseren CSS-Code.
Sobald diese Schritte abgeschlossen sind, müssen wir nur noch den Core und die CLIunseres Angular-Projekts auf Version 8 aktualisieren:
ng update @angular/cli @angular/core
Falls Angular uns benachrichtigt, dass Änderungen nicht in das Repository hochgeladen wurden, können wir den nächsten Befehl starten, um Abhilfe zu schaffen:
ng update @angular/core --from 7 –to 8 –migrate-only –allow-dirty
Und das war’s! Schon haben wir unser Angular-Projekt auf Version 8 aktualisier🎉
