Die sechste Auflage des JavaScript Frameworks

Angular 6: Diese Neuerungen sollten Entwickler kennen
Keine Kommentare

Wie geplant hält sich das Angular-Team an den regelmäßigen Releasezyklus von sechs Monaten. Angular 6 ist ein Major Release, damit stehen neben neuen Features auch einige Breaking Changes ins Haus. Auf welche neuen Features man sich freuen darf, und worauf Entwickler achten müssen, wird in diesem Artikel vorgestellt.

Angular 6 – Fokus auf mehr Produktivität

Wenn man Angular in Version 6 ein Release-Thema zuschreiben würde, so wäre das „mehr Produktivität für Entwickler“. Dies zeigt sich unter anderem an einer stolzen Verkündung vom Angular-Team: Angular 6 ist das erste Release, welches intern vollkommen auf das neue Buildsystem “Bazel” setzt. Dies wird zunächst keinen direkten Einfluss auf die Entwicklertätigkeit haben, ist allerdings ein Hinweis darauf, wie sich das Umfeld der Buildsysteme in Zukunft verschieben könnte. Der große Vorteil von Bazel: Es unterstützt sehr schnelle, inkrementelle Builds. Denn Bazel kann aufgrund einer Zuordnung von Quellcode zu Buildergebnis bestimmen, welche Teile der Anwendung neu gebaut werden müssen, wenn sich bestimmte Teile des Quellcodes ändern.

Bisher musste dazu stets die gesamte Anwendung neu gebaut werden, was insbesondere bei sehr großen Enterprise-Anwendungen zu erheblichen Build- und Testzeiten führt und das Feedback für Entwickler verzögert. Bis Bazel jedoch für Entwickler von Angular Anwendungen mit Angular CLI zum Einsatz kommt, wird es wohl noch dauern: Bisher ist Bazel lediglich für die Entwicklung von Angular selbst im Einsatz.

Mit Bazel wurde das Release von Angular auch auf das neue Angular Package Format (APF V6 vom März 2018, siehe auch hier) umgestellt, welches neue Möglichkeiten zur Bereitstellung von vor-optimiertem Code schafft und auch neuere Zielumgebungen – zum Beispiel Webpack 4 – berücksichtigt.

Lesen Sie auch: Angular 6 Interview: „Mit dem Ivy Renderer kann Angular weitestgehend weggesprengt werden“

Das Fundament von Angular selbst wird auch aktuell gehalten: Die benötigte RxJS-Version wurde auf Version 6 (momentan noch in der Beta) erhöht. Durch bessere Modularisierung der Bibliothek sollen bessere Performance und kleinere Build-Ergebnisse in Endanwendungen möglich sein. Außerdem soll das Debugging durch bessere Stack-Traces vereinfacht werden.

Die Angular-Animations wurden überarbeitet, sodass nun alle Klassen, Funktionen und Konstanten, die mit den Animationen zu tun haben, auch aus dem Paket @angular/animations importiert werden müssen. Es ist damit nicht mehr möglich, diese aus dem Paket @angular/core zu importieren.

Ebenso wurde die Logik der Animations-Events angepasst. Bisher haben deaktivierte Animationen ein assoziiertes AnimationEvent erzeugt, welches eine totalTime von 0 geliefert hat. Dies wurde nun geändert, sodass das Event die tatsächliche Animationszeit liefert. Um herauszubekommen, ob die Animation deaktiviert wurde, sollte das event.disabled-Property überprüft werden.

Durch eine erweiterte Syntax des @Injectable()-Decorator ist es nun möglich, jeden Service zum “Scope” eines Moduls hinzuzufügen. Dies dreht die Abhängigkeit zwischen Modul und Service so um, dass ungenutzte Services zur Build-Zeit erkannt und per Tree-Shaking entfernt werden können. Konfigurierbar ist dies über ein Metadatenobjekt, welches dem @Injectable()-Decorator mitgegeben wird:

@Injectable({ providedIn: MyModule
})
export class MyService{}

Man teilt dem Service also mit, dass er im Scope des Moduls MyModule provided werden soll. Statt der Angabe eines Moduls oder einer Komponente ist auch die Angabe 'root' möglich, dann wird der Service dem Root-Injector der Anwendung hinzugefügt.

Wie immer gehören zu neuen Major-Versionen auch Aufräumarbeiten. Etwa das <template>-Tag, welches in den letzten Versionen bereits als „deprecated“ markiert wurde, wird nun endgültig entfernt. Wer sich an diese Deprecation gehalten hat, sollte keine Probleme beim Update spüren. Alle anderen sollten ihre noch vorhandenen <template>-Tags gegen <ng-template> -Tags austauschen.

Weitere Neuerungen sind im Bereich der Forms zu verzeichnen. Eine dieser Neuerungen stellt auch einen Breaking Change dar. Dies betrifft vor allem das Verhalten der Formulare und Formularelemente bei Wertänderungen, da neuerdings das ngModelChange-Event erst dann erzeugt wird, wenn auch der interne Wert und die interne Validität des Formulars aktualisiert wurde. In einer weiteren Neuerung wird ein neues Status-Event für alle FormularElemente eingeführt, die von AbstractControl abgeleitet sind. Das neue Event ist das PENDING-Event und wird vom statusChanges()-Observable genau dann emittiert, wenn die Methode markAsPending() auf der AbstractControl aufgerufen wird. Bestehende Anwendungen, die das statusChanges()-Observable nutzen, müssen ggf. aktualisiert werden, um angemessen auf die neuen Events zu reagieren.

Angular-CLI

Bei einem Blick ins Angular-Umfeld fällt auf, dass die Versionsnummern einheitlicher werden: Auch das Angular-CLI wird passend zum Framework auf Version 6 gehoben. Das macht es für Entwickler einfacher, die jeweiligen Versionen konsistent zu halten. In einer der letzten Versionen ist zudem das Kommando ng update wieder zum CLI hinzugefügt worden. Durch dieses Kommando kann das CLI unter anderem neue Package-Versionen installieren und das Projekt allgemein an eventuell geänderte Projektstrukturen anpassen. So wird der Updateprozess auf neue Angular und Angular-CLI Versionen erleichtert.

Mit Angular-CLI 6 wird auch die verwendete Webpack-Version aktualisiert, sodass man durch Webpack 4 nun von verbesserter Code-Analyse und verbessertem Tree-Shaking profitieren kann. Dafür nötig ist allerdings ein Update der Node-Umgebung: Ab sofort werden von Angular-CLI nur noch Node-Umgebungen mit einer Version größer 8.9 unterstützt.

Neben Verbesserungen etwa bei den Fehlermeldungen halten mit Angular 6 zwei brandneue Technologien Einzug: zum einen die Angular Elements, zum anderen der Ivy Renderer.

Kostenlos: Das iJS React Cheat Sheet

Sie wollen mit React durchstarten?
Unser Cheatsheet zeigt Ihnen alle wichtigen Snippets auf einen Blick.
Jetzt kostenlos herunterladen!

Download for free

 

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Ivy Renderer in Angular

Bei der Entwicklung von Ivy stand vor allem ein Ziel fest: Angular sollte automatische Optimierungen besser unterstützen. Der typische Buildprozess wird aktuell mit Webpack implementiert, wovon Angular CLI abstrahiert und eine einfache Fassade anbietet. Unter der Haube wurden immer weiter Verbesserungen vorgenommen: Tree-Shaking und der Build-Optimizer erzeugten noch kleinere und schnellerer Anwendungen. Bei diesen Buildschritten werden nicht benötigte Bestandteile von Libraries entfernt.

Google hat schon vor geraumer Zeit mit dem für JavaScript gedachten Closure-Compiler gezeigt, dass erhebliche Optimierungen bei Ausführungsgeschwindigkeit und resultierender Anwendungsgröße möglich sind. Dem Angular Team ist das Potential natürlich nicht verborgen geblieben: Mit TypeScript als Sprache sind zur Build-Zeit Typinformationen vorhanden und damit auch Analysen möglich, um nicht verwendeten Code zu eliminieren (Dead Code Elimination, DCE). Doch bisher war die View-Engine an genau dieser Stelle ein Problem, sodass ein Programm damit sich nur mäßig gut analysieren ließ. Der Ivy Renderer soll genau dies beheben: Das Ziel ist eine Engine, die Anwendungen besonders gut durch Build-Tools analysierbar und optimierbar macht. Man kann sagen, dass das Ziel erreicht wurde: Ein früher Prototyp von Ivy erlaubt es, eine “Hello World”-Angular-Anwendung zu erzeugen, welche unter 4Kb zu übertragenden Daten besitzt (gemessen mit gzip als Kompression bei der Übertragung eine durchaus realistische Rahmenbedingung).

Eine Hello-World-Anwendung lässt natürlich als synthetischer Benchmark nur bedingt Rückschlüsse darauf zu, wie viel bei realistischen Anwendungen an Ersparnissen zu erwarten sind. Sicherlich hängt die schlussendliche Größe nicht zuletzt davon ab, wie viele Features genutzt werden, welche Dritt-Libraries eingebunden werden und wie groß der Umfang an CSS und weiteren Assets ausfällt.

Wichtig ist die minimal erzielbare Größe auch für ein weiteres Projekt: Angular Elements. Möchte Angular eine ernsthafte Alternative auch bei reinen Komponenten, wie einem Like-Button, darstellen, müssen auch einzelne Komponenten in vertretbarer Bundle-Größe realisierbar sein.

Lesen Sie auch: Angular 6 – die Neuerungen in Framework und CLI

Komponenten-Templates werden bei Ivy direkt in JavaScript-Anweisungen umgesetzt, was die Templates direkt analysierbar macht und damit wiederum die Dead Code Elimination auch auf der Template-Seite unterstützt: Verwendet eine Anwendung eine bestimmte Kontrollstruktur nicht, zum Beispiel *ngFor, so wird die dazugehörige Funktion niemals aufgerufen und kann per Dead-Code-Elimination entfernt werden.

Ein weiterer Aspekt dieses Resultats ist, dass Komponenten so theoretisch auch von Hand, in purem JavaScript und ohne die Nutzung eines Kompilers, geschrieben werden könnten: Wenn Ivy ausgereift ist, werden alle vorher zu NgFactories verarbeiteten Dekoratoren in statische Variablen übersetzt. Genauso wird das Template statt in HTML in einer JavaScript-Funktion ausgedrückt – auch hier entsteht keine hohe Hürde und eine manuelle Implementierung ist möglich. Diese interessante Möglichkeit wird jedoch in den meisten größeren Anwendungen nicht unbedingt sinnvoll einsetzbar sein, sondern sich auf kleine Projekte oder einzelne Komponenten beschränken.

Aktuell ist der Angular Ivy Renderer noch nicht vollständig – das ist jedoch nur eine Frage der Zeit. Da Angular 6 im Default noch den herkömmlichen Renderer nutzt, besteht kein Risiko für bestehende Projekte, gezieltes Testen ist jedoch bereits möglich.

Details zu Ivy finden sich in dem Artikel: https://jaxenter.de/ivy-renderer-angular-68103

Angular Elements

Angular Elements ist ein Projekt, welches darauf abzielt, einzelne Komponenten “losgelöst” zu betreiben und einbinden zu können, ohne dafür gleich eine komplette Angular-Anwendung starten zu müssen. Das Ziel ist es hier, analog zu anderen Komponenten-Frameworks sich auf die Entwicklung einzelner Komponenten zu beschränken. Diese sollen dann in eine ansonsten komplett anders aufgebaute Webseite – oder auch Webanwendung – eingebracht werden können.

Momentan erreichen Angular Elements noch nicht 100% wettbewerbsfähige Dateigrößen für die Auslieferung, verglichen mit anderen Komponenten-Frameworks. Dies liegt vor allem daran, dass die Angular-Core-Bibliothek immer mitgeliefert werden muss. Abhilfe wird hier der Ivy-Renderer schaffen, der mit Hilfe von Dead-Code-Elimination die generierten Dateigrößen deutlich nach unten schrauben dürfte.

Angular 6 ist LTS Release

Mit Angular 6 geht das zweite LTS-Release von Angular an den Start. Die bisherige LTS-Version 4 wird noch bis zum Erscheinen von Angular 7 unterstützt, also etwa bis Oktober 2018. Die neue Version 6 wird nach dem offiziellen Plan bis Oktober 2019 unterstützt werden. Der Support von LTS-Versionen beschränkt sich dabei offiziell maximal auf Security-Fixes.

Dies lässt sich auch an der Anzahl der Updates von Angular 4 innerhalb der LTS-Phase ablesen: Es gab nur einen weiteren Fix für Angular 4. (Ein gutes Zeichen also: Es gab demnach lediglich ein Sicherheitsproblem in Angular!)

Und so geht es weiter

Nach Version 6 steht für Oktober Angular in Version 7 an. Wenn alles wie geplant läuft, steht im 7er Update vor allem der Ivy-Renderer im Fokus, welcher kleinere Paketgrößen verspricht und somit einen deutlichen positiven Effekt auf die Dateigröße einer Anwendung haben dürfte. Außerdem wird durch den Ivy-Renderer der sinnvolle Einsatz von Angular-Elements ermöglicht werden.

Allgemein ist zu empfehlen, die Angular-Version (auch die Version des CLI) seiner Projekte aktuell zu halten. Zum einen stehen so immer die neuesten Features zur Verfügung. Zum anderen ist so nur ein verhältnismäßig geringer Aufwand pro Update nötig, im Vergleich zu einem Update, bei dem die Code-Basis über mehrere Version aktualisiert werden muss.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -