JavaScript-Framework Angular 8 beschleunigt den Start von Applikationen

Inhaltsverzeichnis

Das Angular-Team hat planmäßig Version 8.0 des JavaScript-Frameworks veröffentlicht. Es bringt vor allem Optimierungen unter der Haube mit, die den Start von Applikationen beschleunigen sollen. So laden Browser dank Differential Loading den Build für die passende JavaScript-Edition herunter. Die Kombination aus Rendering-Pipeline und Compiler Ivy lässt sich in einer Preview-Version optional verwenden.

JavaScript à la carte

Das neuerdings standardmäßig aktivierte Differential Loading beschreibt einen Vorgang, bei dem der Browser den Code in der passenden JavaScript-Variante zugeteilt bekommt. Bisher setzte Angular aus Gründen der Kompatibilität auf ECMAScript 5. Mit dem darauf folgenden ES2015 (ES6) wurde JavaScript nicht nur effizienter, sondern erlaubt auch kleinere Bundles.

Daher erstellt Angular nun zwei unterschiedliche Builds: für ältere Browser einen zu ES5 kompatiblen und für aktuelle einen auf ES2015 ausgelegten. Der Browser bekommt das passende Bundle aufgrund des script-Tags zugeteilt:

<script type="module" src="..."> // Moderne Variante

<script nomodule src="..."> // Legacy-Variante

Ausschlaggebend für das Erstellen der beiden Varianten ist die über target festgelegte JavaScript-Version in den Compiler-Options der "tsconfig.json"-Datei.

"compilerOptions": {
  ...
  "target": "es2015", 
  ...
}

Ivy sprießt langsam hoch

Bezüglich der seit langem geplanten Integration von Ivy hält sich die offizielle Ankündigung von Angular 8 noch zurück und verweist auf kommende Blogbeiträge. Die Kombination aus Renderer und Compiler in der "tsconfig.app.json" lässt sich folgendermaßen aktivieren:

"angularCompilerOptions": {"enableIvy": true}

Ivy bringt mehrere Vorteile wie kleinere Bundles und inkrementelles Kompilieren mit sich, erfordert aber einige grundlegende Änderungen an der Basis von Angular. Bestehende Applikationen sollen auf Ivy dabei weiterhin uneingeschränkt funktionieren, was wohl auch der Hauptgrund für die Integration der Preview-Variante ist. Das Angular-Team möchte Rückmeldungen von Entwicklern sammeln, wie gut individuelle Applikationen mit Ivy arbeiten. Für neue Projekte empfiehlt es jedoch nach wie vor die klassische View Engine.

Verwaltete Nebenjobs

Das Thema Web Worker betrifft Angular zwar nur indirekt, macht aber mit dem aktuellen Release Fortschritte. Grundsätzlich sorgen sie dafür, dass JavaScript-Anwendungen einen Teil der Berechnung in separate Threads auslagern, da JavaScript von Haus aus nicht auf Multithreading ausgelegt ist. Die Kommandozeile von Angular (das Angular CLI) bietet nun einen Befehl, um neue Web Worker zu erstellen:

ng generate webWorker my-worker

Zudem verwaltet es die Zuteilung der Bundles an die Web Worker. Voraussetzung dafür ist, dass das Angular-Projekt die passende Konfiguration aufweist.

Angepasste Syntax für dynamische Importe

Zu den weiteren nennenswerten Neuerungen gehört eine Anpassung beim Lazy Loading, das zwar von der Arbeitsweise unverändert bleibt, aber eine neue Syntax bekommt, die sich an der standardmäßigen Vorgehensweise für dynamische Imports orientiert. So wird aus dem bisherigen

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

mit Angular 8 folgende Schreibweise:

{path: `/admin`,
 loadChildren: () => 
 import(`./admin/admin.module`).then(m => m.AdminModule)}

Als angenehme Nebenwirkung erkennen und prüfen Entwicklungsumgebungen beziehungsweise Sourcecode-Editoren wie Visual Studio Code und WebStorm die neue Syntax der import-Anweisungen.

Mehr Infos

Vom 25. bis 28. Juni findet in Darmstadt die enterJS 2019 statt. Das Programm der von heise Developer, iX und dpunkt.verlag veranstalteten Konferenz zu Enterprise-JavaScript bietet unter anderem einen Vortrag zu Ivy.

Weitere Neuerungen wie die Builder-APIs im Angular-Befehlsfenster lassen sich dem Angular-Blog entnehmen. (rme)