Vorschau auf AngularJS 2

Inhaltsverzeichnis

Mit AngularJS 2 wird Google aufstrebende Webtechniken wie Web Components in den Fokus rücken. Außerdem verabschiedet sich das JavaScript-Framework von ein paar Eigengewächsen und versucht, sich in Sachen Performance React anzunähern.

Bei AngularJS handelt es sich wohl um eines der populärsten Frameworks zum Erstellen von Single-Page-Anwendungen. Indikatoren hierfür sind unter anderem die zahlreichen Follower und Mitarbeiter auf GitHub und via Google Trends verfügbare Aufzeichnungen. Darüber hinaus spricht die Tatsache dafür, dass es neben der Unterstützung durch den Internet-Riesen Google eine riesige Community sowie einige gut besuchte, auf AngularJS fokussierte Konferenzen gibt.

Trotzdem gibt es ein paar Aspekte an der aktuellen Implementierung zu bekritteln. Beispielsweise kann das 2009 erschienene Framework in Sachen Performance nicht mit aktuellen Projekten wie React mithalten, und an der einen oder anderen Stelle wünschen sich Entwickler weniger Komplexität. Mit AngularJS 2 (im Folgenden auch als Angular 2 bezeichnet) adressiert das Produkt-Team diese Nachteile und stützt sich dabei auf aktuelle Webtechniken.

Platz für Web Components

Das Team hinter dem Projekt bezeichnet Angular 2 als Framework "für das Web von morgen". Als solches nutzt es konsequent aufstrebende Webtechniken – allen voran Web Components. Dabei handelt es sich um einen Ansatz, der auf mehreren beim W3C eingebrachten Vorschlägen fußt, und das Schaffen wiederverwendbarer JavaScript-Komponenten erlaubt. Webanwendungen können heute schon den aktuellen Entwicklungsstand dieser Vorschläge nutzen, zumal einige Browser sie bereits nativ umsetzen. Für andere liegen entsprechende Polyfills vor.

Mit Web Components können Entwickler das Vokabular von HTML erweitern, indem sie eigene HTML-Elemente und -Attribute definieren. Im Kontext von Angular werden sie auch als Direktiven bezeichnet. Im Gegensatz zu denen in AngularJS 1.x sind die kommenden, Web Components einsetzenden Direktiven unabhängig vom Framework. Das erhöht die Reichweite der damit zur Verfügung gestellten Komponenten. Da Web Components ein primäres Konstrukt in Angular 2 darstellen, können zudem mit anderen Frameworks entwickelte Komponenten ohne Umwege zum Einsatz kommen.

Aus AtScript wird TypeScript

Bei der Entwicklung von Angular 2 setzt das Produkt-Team auf die bei Microsoft entstandene Sprache TypeScript, die eine Obermenge von ECMAScript in Version 6 darstellt und künftig auch Sprachmerkmale anbieten wird, die für das darauf folgende Release geplant sind. Daneben bietet TypeScript ein optionales statisches Typsystem. Die damit einhergehende Möglichkeit, Typen für Variablen und Argumente festzulegen, nutzt der neue Dependency-Injection-Mechanismus von Angular 2, um herauszufinden, welche Dienste es zu injizieren gilt. Dies stellt einen angenehmen Ersatz für die in Version 1 genutzte sperrige Schreibweise dar, bei der die Namen der zu injizierenden Services über ein aus Strings bestehendes Array anzugeben sind.

Die nächste Version von TypeScript wird die Möglichkeit bieten, mit Annotationen Metadaten im Quellcode zu hinterlegen. Diese Option greift Angular 2 zur Beschreibung von Komponenten auf. Da TypeScript ursprünglich das Konzept der Annotationen nicht vorsah, wollte sich Google mit einer eigenen Sprache namens AtScript selbst darum kümmern. Allerdings hat man bei Microsoft entschieden, die Ideen hinter AtScript in TypeScript zu integrieren. Deshalb hat Google die eigenen Bemühungen diesbezüglich eingestellt.

Zur Nutzung von TypeScript mit Angular 2 existieren heute zwei Ansätze: Zum einen kann der Entwickler TypeScript-Code mit einem Compiler nach ECMAScript 5 übersetzen lassen. Zum anderen kann die Umwandlung auch erst zur Laufzeit stattfinden. Während die erste Herangehensweise die bessere Performance mit sich bringt und das Debuggen erleichtert, ist die Einstiegshürde für die zweite Methode niedriger. Entwickler kommen dabei zudem ohne zusätzliche Compiler-Aufrufe oder Werkzeuge wie Gulp mit entsprechenden Plug-ins aus.

Ein Beispiel für den ersten Ansatz findet sich in einer auf der Angular-Konferenz ng-conf 2015 vorgestellten Microsoft-Demo. Wer nach einem Muster für den zweiten Ansatz sucht, wird hingegen unter anderem im einführenden Beispiel auf den Webseiten von Angular 2 fündig.

Möchte man nicht zu TypeScript greifen, kann man das kommende AngularJS auch mit ES 5 oder ES 6 (letzteres soll unter dem Namen ECMAScript 2015 laufen) nutzen. Dabei werden Konstrukte aus TypeScript durch Konstrukte dieser Sprachen ersetzt. Beispielsweise sind Entwickler angehalten, die sonst über Typangaben oder Annotationen hinterlegten Informationen über Eigenschaften von Metadaten-Objekten bereitzustellen. Performance durch Flux

Dirty Checking

Während die Datenbindung in AngularJS 1.x einfach zu verwenden ist, hat sie in bestimmten Situationen mit Performanceproblemen zu kämpfen. Sie treten vor allem dann auf, wenn mehrere tausend Bindings vorliegen. Der Grund dafür ist, dass AngularJS 1.x zum Erkennen von Änderungen an gebundenen Feldern Dirty Checking nutzt. Dabei sind nach dem Eintreten von Ereignissen die Werte sämtlicher gebundener Eigenschaften mit ihren ursprünglichen Werten zu vergleichen. Da ein Two-Way Databinding zum Einsatz kommt, können sich gebundene Werte gegenseitig beeinflussen. Aus dem Grund ist das Dirty Checking zu wiederholen, bis sich keine Änderungen mehr ausmachen lassen.

Diese Herangehensweise bringt den Vorteil, dass sie auch mit herkömmlichen Eigenschaften funktioniert, die im Gegensatz zu sogenannten Observables bei einer Änderung keine Ereignisse auslösen. Das vereinfacht die Entwicklung. Da Angular 2 auch Dirty Checking nutzen wird, bleibt dieser Vorteil weiterhin erhalten. Allerdings ist die kommende Version auch in der Lage, Observables zu nutzen, um das Erkennen von Änderungen effizienter zu gestalten. Somit können Entwickler ein wenig Programmierkomfort gegen eine bessere Performance eintauschen. Bei der Wahl der Observable-Implementierung räumt Angular 2 zudem einige Freiheiten ein. Beispielsweise werden laut Angaben des Produkt-Teams Observables aus RxJS genauso unterstützt wie Object.observe, das künftig native Unterstützung für das Überwachen von Eigenschaften bieten soll.

Eine weitere Möglichkeit, die Leistungsfähigkeit der Bindings zu erhöhen, liegt in der Nutzung von unveränderbaren Datenstrukturen. Besteht ein Array beispielsweise aus Objekten, deren Werte nicht veränderbar sind, muss Angular 2 sie nicht überwachen, sondern lediglich prüfen, ob das Array verändert wurde. Darüber hinaus orientiert sich Angular 2 zur Steigerung der Performance am durch React populär gewordenen Flux-Muster. Letzteres sieht vor, dass zunächst lediglich ein One-Way Databinding vorliegt. Dieses transportiert Werte aus den Direktiven in die DOM-Knoten der gebundenen Elemente. Zyklische Abhängigkeiten zwischen Bindings werden auf die Art ausgeschlossen und somit muss Angular das Dirty Checking nur einmal pro Ereignis ausführen.

Der Verzicht auf das von Version 1.x gewohnte Two-Way Binding zu Gunsten der Performance erschwert jedoch die Arbeit mit Formularfeldern. Um die Eingaben von Benutzern trotzdem in die gebundenen Eigenschaften zurückfließen zu lassen, plant das Produkt-Team einen eigenen Mechanismus, der sich auf ein einfaches Objektmodell stützt. Die Kombination des One-Way Binding mit dem Mechanismus soll die Arbeit mit Eingaben ähnlich komfortabel wie ein Two-Way Binding gestalten. Im Gegensatz zu diesem finden die Datenflüsse nach dem Ändern von Formularinhalten bei Angular 2 jedoch in zwei einzelnen Phasen statt: Zunächst wird die Änderung übernommen und anschließend findet ein einziges Mal eine Aktualisierung des One-Way Bindings via Dirty Checking statt. Die Notwendigkeit für ein mehrfaches Dirty Checking liegt somit auch hier nicht vor.

Ein einfacher Performancevergleich, der auf der ng-conf 2015 präsentiert wurde, lässt vermuten, dass sich der Leistung von Angular 2 im Bereich des für seine Performance bekannten Frameworks React bewegt. Der entsprechende Vortrag ist auf YouTube verfügbar.