Road to AngularJS 2.0 – Mobile-First, ES6 und weitere Neuerungen

Vor wenigen Wochen wurde mit Version 1.3, die bei weitem beste Version des Frameworks AngularJS, veröffentlicht. Trotz dessen arbeiten die Entwickler bereits unter Hochdruck an Version 2.0, welche einige große Änderungen mit sich bringen wird.

Ursprünge und Motivation

Doch immer der Reihe nach. Laut aktuellen Zahlen befinden sich im Play Store von Google um die 1600 Apps welche mit AngularJS 1.2 oder 1.3 gebaut wurden. Das allein spricht schon für die Beliebtheit des Frameworks zur Entwicklung mobiler Apps. In diesem Zusammenhang ist es interessant zu erfahren, dass Angular als solches ursprünglich nicht für Entwickler gedacht war.

Die eigentliche Intention war es, Designern eine Möglichkeit zu bieten schnell HTML-Formulare bauen zu können. Erst mit der Zeit haben immer mehr Entwickler immer komplexere Anwendungen damit entwickelt. Trotz der Tatsache, dass das Team über die Jahre hart daran gearbeitet hat, ergeben sich aufgrund ursprünglicher Designentscheidungen starke Einschränkungen bezüglich der möglichen Weiterentwicklungen des Frameworks. Die Folge dessen sind schlussendlich Performance-Problemen. Dies war der größte Motivationsgedanke zur Entwicklung von AngularJS 2.0. Damit einher gehen nötige Anpassungen aufgrund der sich kontinuierlich verändernden Web-Welt, in der immer neue Features Einzug halten. So wird bspw. in Kürze der neue ES6 Standard (neueste JavaScript-Spezifikation) fertiggestellt und wiederverwendbare Web-Components können zur Lösung gängiger Probleme genutzt werden.

Das größte Problem dabei ist, dass die meisten Data-Binding-Systeme dafür nicht ausgelegt sind, was eben eine neue Implementation notwendig macht. Außerdem wurde Angular nicht mit dem Gedanken entwickelt, damit mobile Apps zu bauen, was ebenfalls zu großen Performance-Problemen führen kann. Auch sind viele aktuelle Komponenten des Frameworks erst mit der Zeit hinzu gekommen. So war das Einbinden eigener Direktiven bspw. ursprünglich nicht vorgesehen. Diese und einige weitere Gründe führen dazu, dass gravierende Änderungen dringend notwendig sind.  Unter anderem deshalb entschieden sich die Entwickler dazu, mit der Arbeit an Version 2.0 zu beginnen.

Features der Version 2.0

Geschrieben wird AngularJS 2.0 in AtScript, welches an dem bereits erwähnten ES6-Standard ansetzt. Es ist aber keine neue Sprache sondern eher ES6 mit zusätzlichen Funktionen. Dies führt dazu, dass zukünftige Standards (wie die erwähnten Web-Components) bereits unterstützt werden und somit verwendet werden können. AtScript an sich wurde erst vor wenigen Wochen von Google vorgestellt. Es ist laut der Präsentation zwar vollständig optional, jedoch der empfohlene Weg, um mit Angular 2.0 Anwendungen zu entwickeln. Die Syntax lässt sich an folgendem Codebeispiel erkennen:

import {Component} from 'angular';  
import {Server} from './server';

@Component({selector: 'foo'})
export class MyComponent {  
  constructor(server:Server) {
      this.server = server;
  }
}

Die beiden import Statements sowie die class Syntax stammen direkt aus ES6. Der server Parameter allerdings spezifiziert einen Typ. Dieser wird in AtScript dazu verwendet, während der Laufzeit eine Typzuweisung vorzunehmen. Eine weitere Eigenheit ist die @Component Syntax. Während Component als solches eine normale Klasse darstellt, wird auf diese Art ein Metadaten-Kommentar erstellt.  Der Compiler generiert damit einen Kommentar und speichert ihn in einem bekannten Ort, sodass Frameworks auf diesen zugreifen können.

Nun zu den bisher bekannten Neuerungen von Angular 2.0 im Einzelnen:

Dependency Injection

Ein großes Problem bisher war die Minifizierung, da das Verkürzen der Namen dabei unter Umständen das Data Binding zerstören konnte. Die App wäre damit im schlimmsten Fall vollständig nutzlos geworden. In Version 2.0 wird dies in Zukunft über Metadaten geregelt. Außerdem ist somit eine einfachere Methode gegeben, neue Klasseninstanzen erstellen zu können. Ein weiteres neues Feature sind die Child Injections. Hierbei ist es so, dass das Kind alle Services des Elternelements erhält, diese aber auf Kind Ebene überschrieben werden können. Somit ist es z.B. möglich, so genannte Child Routers eines bestimmten Routers zu erstellen. Mit deren Hilfe können Services für verschiedene Navigationsszenarien überschrieben werden.

Die größte Änderung ist das Entfernen von $scope. Einige der Features wurden allerdings beibehalten und sind über die neuen Dependency Injection-Funktionen zugänglich. Außerdem wird Angular 2.0 den ES6 Standard für Module benutzen. Dies kann unter Umständen beim Schreiben von Klassen zu Problemen  führen, sofern ES5 genutzt wird. Der Grund hierfür ist die fehlende Syntax für Module im ES5 Standard.

Templating

Auch bezüglich des Templating wird es in der neuen Version einige Änderungen geben. So wird hier vor dem Erstellen der eigentlichen View aus dem Template erst einmal eine so genannte ProtoView erstellt. Hierbei werden bereits alle benötigten Direktiven eingebunden sowie parsing und compiling durchgeführt. Aus dieser ProtoView kann anschließend die eigentliche View erzeugt werden.

Der Vorteil dabei ist, dass die genannten Schritte nicht noch einmal ausgeführt werden müssen, da diese innerhalb der ProtoView gecached werden. Somit ist es also prinzipiell möglich, mehrere Views zu erstellen ohne jedes Mal aufs neue alle Erstellungsschritte durchlaufen zu müssen. Im Anschluss können die erstellten Views zu einem Viewport hinzugefügt werden. Eine weitere Neuerung ist die Einführung des dynamischen Ladens von Code, was das compiling eines Templates asynchron macht.

Direktiven

In Angular 2.0 findet außerdem eine Neuinterpretation der Direktiven statt. So wird es zukünftig 3 Typen von Direktiven geben:

• Component-Direktive:
  • erstellt eine benutzerdefinierte Komponente, welche aus eigener View und eigenem Controller besteht
  • Router können Routen zu diesen Komponenten mappen
• Decorator-Direktive:
  • fügt einem bestehenden HTML-Element zusätzliche Eigenschaften hinzu (wie z.B. ng-show)
• Template-Direktive:
  • formt bestehenden HTML-Code zu einem Template um
  • der Entwickler kann hier bestimmen wann und wo das Template im DOM eingebunden werden soll (z.B. ng-if, ng-repeat)

Eine weitere Neuerung ist die Tatsache, dass Controller als solche nicht mehr existieren. Soll wie bisher eine Route erstellt werden, die eine View und den jeweiligen Controller lädt, wird hierzu eine Component-Direktive benötigt.

Der Router

Auch der Router wurde für Angular 2.0 einer Überarbeitung unterzogen, um den neuen Anforderungen zu entsprechen. Zusätzlich zu den Basis-Szenarios die von einem Router erwartet werden existieren als Neuerung die so genannten Child Routers. Mit Hilfe dieser könnte theoretisch für jede Komponente, zu der navigiert werden soll, ein eigener Router geschrieben werden. Daraus ergibt sich die Möglichkeit, einzelne Komponenten einer App mit eigenen Routern umzusetzen. Diese könnten somit durch einfaches Einbinden auch in anderen Projekten wiederverwendet werden.

Durch die vorgenommenen Änderungen ergeben sich allerdings nicht nur Vorteile. Ein Problem ergibt sich im Zusammenhang mit den neu unterstützten Web-Components. So dürfen diese einen Ausdruck innerhalb eines Templates nicht sehen, da dieser falsch interpretiert werden würde. Bisher wurde dies über ng-source gelöst (und somit eine Custom Direktive) gelöst. Eine Möglichkeit dieses Problem zu umgehen ist es den Attribut-Name zu encoden. Angular könnte den Ausdruck somit sehen, die Web-Komponente aber nicht. Über eine finale Lösung des Problems sind sich die Entwickler allerdings noch nicht einig.

Ein weiteres Problem ist die Tatsache, dass im Router verschiedenen Views nicht mehr ein und der selbe Controller zugeordnet werden kann. Dies resultiert ebenfalls aus der Einführung der Component-Direktiven.

Trotz dieser Probleme bleibt zu sagen, dass sich der Prozess nach wie vor in Entwicklung befindet. Somit ist es durchaus möglich ist, dass diese noch beseitig werden. Dies lässt sich auch daran erkennen, dass die Entwickler bisher noch keine Entscheidung über das Zwei-Wege-Data-Binding getroffen haben. Sie befinden sich nach wie vor in regen Diskussionen darüber, ob dieses weiterhin Bestandteil von Angular sein soll, oder ob es überflüssig und somit unnötig ist.

Fazit

Noch ist nicht abzusehen, wie stark sich die Änderungen in AngularJS 2.0 auf die Verbreitung und Nutzung an sich auswirken. Allerdings lässt sich an den bereits bekannten Verbesserungen schon erkennen, dass die Entwickler ihr Möglichstes tun, um AngularJS zu einem noch besseren Framework zur Entwicklung mobiler Apps zu machen.

Eine ausführlichere Erklärung der genannten Punkte lässt sich auf der Homepage des AngularJS-Entwicklers Rob Eisenberg finden.