Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design

Von Manuel Rauber und Manfred Steyer

Angular zählt trotz der harten Konkurrenz von React und Vue.js nach wie vor zu den beliebtesten und meistgenutzen Frameworks für die Frontend-Entwicklung. Und da es inzwischen in der Major-Version 6 vorliegt, lohnt es sich, noch einmal solche Funktionen genauer anzuschauen, die Ihre Anwendung performanter, schlanker und vielseitiger einsetzbar machen.
Zunächst wirft Manfred Steyer einen genauen Blick auf die wichtigsten Neuerungen von Angular 6 und das ebenfalls neue Angular CLI und stellt die interessantesten neuen Funktionen vor, etwa die Bereitstellung von Web Components oder die Erzeugung von npm-Paketen. Er erläutert zudem, wie Angular am besten für Microservices genutzt werden kann und stellt neben den naheliegenden auch eher überraschende (und überraschend effektive) Methoden vor. Schließlich zeigt Manfred Steyer Ihnen noch, wie Sie Ihre Angular-Anwendung mithilfe von @ngrx, dem Redux-Pendant für Angular, schlank und performant halten. Und auch für das Auge ist in diesem shortcut etwas dabei: Manuel Rauber gibt einen detaillierten Überblick über Angular Animations, erläutert die Grundlagen des Animationsframeworks und zeigt Ihnen, wie Sie mit wenig Arbeit eine wesentlich ansprechendere UX erreichen.

• Sprache: Deutsch
• Herausgeber: entwickler.press
• Erscheinungsdatum: 28. Juni 2018
• ISBN: 9783868028423

Buchvorschau

GmbH

1 Angular 6: Die Neuerungen in Framework und CLI

Es ist wieder so weit: Mit Angular 6 steht eine neue Major-Version von Angular in den Startlöchern. Gleichzeitig geht auch ein neues Angular CLI an den Start, dessen Versionsnummer ab sofort mit der von Angular synchron laufen soll und daher auch direkt auf Version 6 springt.

Angular Elements erlaubt das Bereitstellen von Web Components, und die noch experimentelle View Engine ngIvy verspricht konkurrenzlos kleine Bundles. Das CLI automatisiert lästige Aufgaben beim Einbinden und Aktualisieren von Bibliotheken und kann nun npm Packages bauen. Was gibt es sonst noch Neues in Angular 6?

Das Changelog [1] enthält einige neue und richtungsweisende Features, aber auch viele Abrundungen wie beispielsweise einen zusätzlichen Schalter hier oder einen neuen Parameter dort. In diesem Kapitel werden wir uns auf Ersteres konzentrieren und die neuen Möglichkeiten anhand von Beispielen kennen lernen, die in meinem GitHub-Account zur Verfügung stehen [2].

Web Components mit Angular Elements

Bis jetzt war Angular am besten für Gesamtlösungen geeignet. Wollte man jedoch lediglich bestehende Anwendungen um interaktive Bereiche erweitern, waren häufig andere Frameworks die erste Wahl. Ein Beispiel dafür sind statische Seiten, die von einem CMS gerendert werden und mit JavaScript-Widgets anzureichern sind.

Mit Angular Elements dringt Angular nun auch in diesen leichtgewichtigen Bereich vor, indem es Angular-Komponenten als Web Components bereitstellt. Genau genommen muss man von Custom Elements sprechen, zumal Web Components ein Sammelbegriff für verschiedene Technologien ist. Egal wie man das Kind auch nennt, unterm Strich geht es um frameworkunabhängige Komponenten, die sich wie Standard-HTML-Elemente verhalten. Hat man das dafür verantwortliche npm-Paket @angular/elements installiert, kann eine beliebige Angular-Komponente mit der Methode createCustomElement in ein Custom Element umgewandelt werden (Listing 1.1).

[...]

import { createCustomElement } from '@angular/elements';

@NgModule({

  imports: [ CommonModule ],

  declarations: [FlightCancellingComponent],

  entryComponents: [FlightCancellingComponent]

})

export class FlightCancellingModule {

  constructor(injector: Injector) {

    const ngElementConstructor = createCustomElement(FlightCancellingComponent, {

      injector

    });

    customElements.define('flight-cancelling', ngElementConstructor);

  }

}

Listing 1.1

Um das so geschaffene Element mit dem Dependency-Injection-Mechanismus von Angular zu verbinden, übergibt das gezeigte Beispiel auch den aktuellen Injector. Die Methode customElements.define, die das Element beim Browser registriert und ihm einen Tagnamen zuweist, ist bereits Bestandteil der Custom-Elements-Spezifikation.

Da die dahinterstehende Angular-Komponente bei Bedarf dynamisch erzeugt wird, ist sie unter entryComponents einzutragen. Das ist notwendig, damit sie der Angular-Compiler entdeckt, obwohl sie zum Zeitpunkt der Kompilierung nicht mit den anderen Angular-Komponenten verbunden ist.

Wo und wann man das Custom Element erzeugt und registriert, ist unerheblich. Sobald die dazu notwendigen Anweisungen gelaufen sind, kann die Anwendung unabhängig vom Framework das neue HTML-Element verwenden. Ein Einsatz innerhalb von Angular könnte so aussehen:

17 (closed)=handleClosed()>

Alternativ dazu lassen sich Custom Elements auch zur Laufzeit dynamisch zu einer Seite hinzufügen (Listing 1.2).

@Injectable()

export class SimpleFlightCancellingService  {

  show(flightId: number): void {

    const flightCancelling = document.createElement('flight-cancelling');

    flightCancelling['flightId'] = flightId;

    flightCancelling.addEventListener('closed', () => document.body.removeChild(flightCancelling));

    document.body.appendChild(flightCancelling);

  }

}

Listing 1.2

Hierzu kommen lediglich DOM-Bordmittel zum Einsatz. Sie sind im Gegensatz zur dynamischen Erzeugung von Angular-Komponenten sehr geradlinig und gestalten solche Szenarien um einiges einfacher.

Ein weiteres Einsatzgebiet für