Suche
Kein Ivy Renderer, aber... Angular 7 ist trotzdem spannend!

Angular 7 ist da: Alle neuen Features im Überblick

Karsten Sitterberg

© Shutterstock / Ron Dale

Die siebte Major-Version des JavaScript Frameworks Angular hat wieder einiges zu bieten. Karsten Sitterberg stellt die neuen Features im Detail vor.

Angular 7 ist wie geplant im Oktober veröffentlicht worden. Neuerungen im Framework sind die Updates auf Node 10, TypeScript 3.1 und RxJS 6.3. Der neue Ivy-Renderer hingegen ist leider nicht Teil dieses Releases geworden, da noch nicht alle Features zur Zufriedenheit der Angular-Devs umgesetzt sind. Stattdessen soll in den nächsten paar Monaten eine erste Version herauskommen, welche dann spätestens mit dem nächsten großen Release für alle ausgerollt wird. Dafür wurde die „Plattform“ Angular, bestehend aus dem CLI und Angular Material/CDK, weiterentwickelt. Und auch bei den Angular-Partnern hat sich einiges getan.

Angular 7 – Überblick

Ein Blick auf die Details in Angular 7 ist auf jeden Fall angebracht. Denn Angular 7 bringt durch die Aktualisierung der Library-Versionen einige Neuerungen: So wird von nun an zum Beispiel Node 10 unterstützt und gleichzeitig der Support auch für Node 8 beibehalten. Zudem wird das TypeScript Release 3.1 verwendet und unterstützt, sodass mit Angular dessen wichtigsten neuen Sprachfeatures verwendbar sein sollten. Zu diesen Features zählt beispielsweise das Mapping von Typen auf Tupel und Arrays, die Deklaration von Eigenschaften auf Funktionen und vor allen der neue Typ „unknown“. Im Folgenden wollen wir uns diese Neuerungen kurz anschauen.

Die neuen Features in Angular 7

Die Deklaration von Eigenschaften auf Funktionen in TypeScript 3.1 ermöglicht die Verwendung von Funktionen, die etwas näher an JavaScript angelehnt ist. Man kann nun – wie schon in JavaScript – Eigenschaften einer Funktion deklarieren. Hier ein Beispiel aus der offiziellen Dokumentation:

 

function readImage(path: string,
                   callback: (err: any, image: Image) => void) {
    // ...
}

readImage.sync = (path: string) => {
    const contents = fs.readFileSync(path);
    return decodeImageSync(contents);
}

Die Funktion readImage, welche ein Bild asynchron einliest, bekommt eine Property sync, hinter der sich ebenfalls eine Funktion verbirgt. Diese liest ein Bild ein, in diesem Beispiel allerdings synchron.

Ein weiteres interessantes Feature ist der sogenannte unknown-Typ. Diesen gibt es zwar nicht erst seit TypeScript 3.1, sondern schon seit TypeScript 3.0, ist jedoch erst seit dieser Angular-Version offiziell nutzbar. Der unknown-Typ ist im Prinzip das typsichere Pendant des Datentyps any. Beim any-Datentyp kann TypeScript keine weiteren Annahmen über den verwendeten Datentyp treffen und erlaubt schlicht alle denkbaren Zugriffe auf eine so deklarierte Variable. Bei einer mit unknown deklarierten Variable ist zunächst keine Abfrage möglich, stattdessen müssen alle Abfragen erst durch Type-Guards abgesichert werden.

let x: unknown;
// ...
if (typeof x === "string" || typeof x === "number") {
    x;  // string | number
}

Jeder andere Datentyp kann an eine Variable vom Typ unknown zugewiesen werden. Hingegen kann unkown nur sich selbst oder an any-Variablen zugewiesen:

let x: unknown;
x = 123;
x = 'fooBar';
x = [1, 2, 3];

let y1: any = x;
let y2: unknown = x;
let y3: object = x;  // Error
let y4: string = x;  // Error

Einige Änderungen im Angular Framework an sich sind das neue DoBootstrap-Interface, welches den Lifecycle-Hook ngDoBootstrap() enthält und diesen somit nun auf etwas stärker typisierte Beine stellt. Relevant ist diese Erweiterung vor allem, wenn man den Bootstrap der Anwendung beeinflussen möchte, wie z.B. im Bereich von Angular-Elements.

Innerhalb eines CanLoad-Guards kann nun das momentane UrlSegment[] ausgelesen werden, und der Angular-Router gibt nun eine Warnung aus, wenn ein Navigations-Vorgang nicht aus einem von Angular kontrollierten Bereich des DOM heraus angestoßen wird.

Schließlich benötigt das Platform-Server Paket von Angular (@angular/platform-server) in Version 7 eine neue Abhängigkeit, nämlich Domino 2.1, eine serverseitige DOM-Implementierung.

Update mit Angular CLI auf Angular 7

Um das Update auf Angular 7 durchzuführen, sollte am besten ebenfalls die Angular-Platform, in diesem Fall Angular CLI, genutzt werden. Zunächst wird dazu Angular CLI selbst aktualisiert:

npm i -g @angular/cli

Danach ist pro Anwendung das Update auf einfache Weise möglich:

ng update @angular/cli @angular/core

Weiterhin bietet das CLI auch eigene Neuerungen und Verbesserungen. So ist zum Beispiel aufgefallen, dass bei vielen Anwendungen auch in Produktion das Polyfill reflect-metadata ausgeliefert wird, obwohl es eigentlich nur für die Dev-Version der Anwendung (genauer gesagt für alle Versionen der Anwendung, welche sich im JIT-Modus befinden) gebraucht wird. In der 7er Version des CLI wird dieses Polyfill nur noch während eines DEV-Builds in einem eigenen Build-Schritt zur Anwendung hinzugefügt.

Durch diese Verbesserung wird der Build-Umfang und damit die zu deployende Anwendung schon einmal kleiner. Um zusätzlich ein Auge darauf haben zu können, wie groß der Produktions-Build der Anwendung ist, wird in der neuen Version das Feature „Bundle Budgets“ verwendet. Bundle Budgets gibt im Default eine Warnung aus, wenn das initiale Bundle über 2MB groß ist, ab 5MB wird ein Fehler geworfen.

Eine hilfreiche Neuerung im CLI stellen die nun eingeführten „Prompts“ dar. Diese aus @angular/schematics stammende Erweiterung soll dem User helfen, neue Features zu entdecken. In Zukunft kann der User etwa bei Kommandos wie ng new my-app oder ng add @foo/bar darauf hingewiesen werden, dass Eingaben fehlen oder ob bestimmte Features eingeschaltet werden sollen. In den Schematics können solche Prompts über das Property x-prompt eingestellt werden. Im folgenden ein Beispiel aus der Angular Schematic für ng new:

...
"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},
...

Angular Elements

Für Angular Elements wurde vor allem der Support der offiziellen Shadow-DOM-Spezifikation verbessert. So kann von nun an auch per “Content-Projection” Inhalt von außen in ein Angular Element hineingereicht werden. Dies geschieht dann über das Native API mittels <slot>-Elementen.

For free: The iJS React Cheat Sheet

For free: The iJS React Cheat Sheet

You want to get started with React? Our Cheat Sheet includes all the most important snippets. Get the sheet for free!

 

API Summit 2018
Christian Schwendtner

GraphQL – A query language for your API

mit Christian Schwendtner (PROGRAMMIERFABRIK)

Dokumentation (angular.io)

Die Angular-Dokumentation, welche man unter https://angular.io/docs findet, beinhaltet nun auch einen kompletten Abschnitt zur Angular CLI (https://angular.io/cli). Der Abschnitt zum Angular CLI, welchen man zuvor hauptsächlich unter https://cli.angular.io/ und dem Angular CLI GitHub Repository gefunden hat, ist nun vollständig unter angular.io zu finden.

Angular Material/CDK

Das Angular-Material und das CDK-Paket erhalten im Rahmen dieses Updates einige neue Funktionalität. Benutzer, die auf Version 7 updaten, erwartet unter anderen das Virtual Scrolling und die Drag-and-Drop-Funktionalität. Um sowohl das Virtual Scrolling als auch die Drag-and-Drop-Funktionalität nutzen zu können, müssen die Module ScrollingModule und das DragDropModule eingebunden werden.

Virtual Scrolling bedeutet, dass Elemente einer langen Liste nur dann dynamisch gerendert werden, wenn sie sich im sichtbaren Bereich des DOM befinden. Dies soll dem Nutzer lange Ladezeiten ersparen. Das folgende Codebeispiel zeigt, wie Virtual Scrolling in einem Projekt eingesetzt werden kann, welches bereits Angular Material nutzt.

import { ScrollingModule } from ‘@angular/cdk/scrolling’;
import { ScrollDispatchModule } from ‘@angular/cdk/scrolling’;

@NgModule({
  imports: [
    ScrollingModule,
    ScrollDispatchModule
    // ...
  ]
})
export class AppModule {}

Im Template einer entsprechenden Komponente kann dann der VirtualScrollViewport verwendet werden:

<cdk-virtual-scroll-viewport itemSize="50">
</cdk-virtual-scroll-viewport>

Die itemSize ist technisch gesehen eine eigene Direktive und gibt die Höhe eines Listeneintrags in Pixel an. Als Alternative zu diesem Parameter kann auch eine eigene VirtualScrollStrategy definiert und dann per Dependency Injection über das Token VIRTUAL_SCROLL_STRATEGY zur Verfügung gestellt werden.

Innerhalb dieses ScrollViewport kann nun über eine Liste iteriert werden:

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor=”let entry of list”>Entry: {{entry}}</div>
</cdk-virtual-scroll-viewport>

Die Direktive *cdkVirtualFor hat dabei die gleiche Syntax wie die *ngFor-Direktive.

Weiterhin beinhaltet Angular CDK nun mit dem DragDropModule auch eine eigene Möglichkeit, Drag-and-Drop in einer Anwendung zu realisieren. Der Inhalt innerhalb des Drag-and-Drop-Bereichs wird automatisch neu gerendert, sobald der Benutzer einzelne Einträge verschiebt.

Angular Partner

Im Umfeld von Angular haben sich viele neue Projekte entwickelt, die man sich einmal anschauen sollte, etwa die Angular Console von den Machern der Nx-Tools (@nrwl). Mit der Angular Console können Angular-Projekte aufgesetzt und entwickelt werden, es ist somit eine grafische Verwaltungsoberfläche für Angular-CLI-Projekte inkl. Plug-ins (etwa eigene oder 3rd-Party Schematics).

Weiterhin erfreut sich NativeScript immer wachsender Beliebtheit. Mit NativeScript ist es möglich, native Apps für mobile Devices mit Angular zu bauen, ohne dabei deren native Sprachen beherrschen zu müssen.

Fazit

Mit Angular 7 ist ein neues Angular Major-Release herausgekommen, welches viele kleine Verbesserungen mit sich bringt und durch Pflege der Abhängigkeiten und weitere Performance-Verbesserungen vor allem darauf ausgelegt ist, weiterhin für die Zukunft gut aufgestellt zu sein. Um nicht vorschnell eine unkomplette Version des Ivy-Renderers freizugeben, sondern eine problemlose Migration zu ermöglichen, unterzieht das Angular-Team den neuen Renderer einer internen Testphase, bis er in wenigen Monaten released werden kann. Mit Angular CLI und Material/CDK wird die „Plattform“ Angular kontinuierlich auf breitere Füße gestellt, und viele Partnerprojekte tragen kontinuierlich dazu bei, das Angular-Umfeld zu erweitern.

Geschrieben von
Karsten Sitterberg
Karsten Sitterberg
Karsten Sitterberg ist als freiberuflicher Entwickler, Trainer und Berater für Java und Webtechnologien tätig. Karsten ist Physiker (MSc) und Oracle-zertifizierter Java Developer. Seit 2012 arbeitet er mit trion zusammen.
Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: