AngularJS 2.0 als neues Framework

AngularJS, allgemein als Angular bezeichnet, ist ein Open-Source-Webanwendungs-Framework, das von Google und einer Gemeinschaft von einzelnen Entwicklern und Unternehmen gepflegt wird, um viele der Herausforderungen bei der Entwicklung von Single-Page-Anwendungen zu lösen. Das AngularJS-Team hat fleißig an AngularJS 2.0 gearbeitet. Dabei handelt es sich nicht um ein komplexes Major-Update, sondern um eine komplette Neufassung!

Was hat es mit AngularJS 2.0 auf sich?

Das Team hat sich dafür entschieden, jedes Modul in einem Architektur-Design-Dokument zu dokumentieren. Diese Dokumente waren von Anfang an für die Community verfügbar. Dies wird zu einem kriegerischen Feedback für das Team und eine seltene und ausgezeichnete Gelegenheit für die Community, sich zu beteiligen und ein Framework von seinen Wurzeln her besser zu verstehen.

Bemühungen, die das Team für AngularJS 2.0 angestellt hat:

•  Mobil zuerst: Auf der ng-conf hat das Team geäußert, dass sie auf Mobile setzen würden, aber ich schätze, wir hätten nie gedacht, dass das bedeuten würde, alle Anstrengungen darauf zu konzentrieren, Mobile richtig hinzubekommen und dann auf Desktops hinzuarbeiten. Ich denke, das ist ein mutiger und brillanter Ansatz. In den letzten 3 Jahren war dies der empfohlene Ansatz, den wir entweder erhalten oder gegeben haben, wenn wir eine Anwendung bauen, die sowohl auf mobilen als auch auf Desktop-Plattformen funktionieren soll. Wenn man es auf dem Handy richtig macht, wenn man Ladezeiten, Leistung und andere mobile Herausforderungen zuerst angeht, dann wird der Desktop eine viel einfachere Aufgabe.
•   Lose gekoppelte Module: Dieser Punkt kommt ohne Überraschungen. Das Angular-Team hat schon seit einigen Versionen Module vom Kern abgekoppelt. Gleichzeitig hat die Community begonnen, einige sehr interessante Module anzubieten, wie z.B. ui router und restangular, die als Optionen für einige Core-Angular-Module fungiert haben. Sowohl das Angular-Team als auch die Community haben erfolgreich ein Modul-Ökosystem aufgebaut, das ständig wächst. www.ngmodules.org enthält eine Liste von 529 Modulen. Ich bin mir sicher, dass dies nicht einmal die Hälfte der Module repräsentiert, die es da draußen gibt. Als Gemeinschaft müssen wir diesen Index besser bekannt machen. Außerdem bringen kleinere Bibliotheken oder Module in Kombination mit Lazy Loading einen Performance-Schub.
•   Einfachheit / MetaDaten: Eines der Ziele für Angular 2.0 ist es, dass sich Entwickler auf die Codezeilen konzentrieren können, die sich auf ihre Geschäftsdomäne beziehen. Die nächste Version wird den Angular-Frame besser verstecken. Annotations und ES6 bieten die Werkzeuge und Standards, um dies zu ermöglichen. Das Team hat auch das Feedback der Community aufgegriffen, die die Directives-Syntax als ziemlich langwierig empfand. Ein viel einfacheres dsl für Direktiven ist in Arbeit.

Auf der Suche nach einer neuen Herausforderung?

Interessante Projekte

Zuverlässige Arbeitgeber

Faire Vergütung

Kontakt aufnehmen

Was sind die Herausforderungen?

Change Detection, Dependency Injection, Templating, Persistance, Routing, Logging, Annotations, Dokumentation, Benchmarking, Touch/Animations, Package Repository, Reference App, Scaffolding und Build/Deploy. Dies sind die vielen Facetten, an denen das Team arbeitet. Fast jedes Thema verdient ein eigenes Projekt. Einige der Design-Dokumente haben bereits so viel Feedback erhalten, dass das Team einen ersten Prototyp/Arbeitsversion erstellen konnte. Dies sind alles bewegliche Ziele und jedes verdient seinen eigenen Beitrag, um zu verstehen, wie es funktionieren wird. Hier ist eine kurze Einführung zu jedem Thema.

Erkennung von Änderungen

Der langfristige Ansatz besteht darin, die Vorteile der Object.observe()-Implementierung zu nutzen, die in Browsern wie Chrome 35M zur Verfügung steht. Object.observe() ist eine Low-Level-API, mit der Sie einen Listener hinzufügen können, um benachrichtigt zu werden, wenn ein JavaScript-Objekt seinen Zustand ändert. Während wir auf die browser-native Änderungserkennung warten, hat das Team eine Lösung gefunden, die schnell und effizienter ist als die aktuelle in AngularJS 1.2. Watchtower.js ist eine superschnelle Bibliothek zur Änderungserkennung. Dabei handelt es sich um eine Javascript-Portierung eines bereits implementierten Algorithmus in AngularDart. „Intern hält der Änderungserkennungsalgorithmus die zu prüfenden Felder als Record-Datenstruktur fest. Wenn er Änderungen meldet, gibt er eine Liste von Records zurück, die Änderungen aufweisen.“

Injektion von Abhängigkeiten

Das Design-Doc ist bereits veraltet, aber es dient als Hintergrundgeschichte für die aktuelle Version. Der Prototyp ist zu einer Bibliothek herangewachsen und steht zum Testen bereit. Sie basiert auf ES6 und versucht, eine weniger komplexe Syntax, deklarative Annotationen und Lazy Loading zu bieten. Werfen Sie einen Blick auf den nächsten Codeblock. Dies ist das Dependency Injection Entwurfsmuster. Alle Abhängigkeiten werden einfach als Konstruktorargumente übergeben. Heater hat keine Ahnung, woher diese Abhängigkeiten (Strom) kommen. Heater ist nicht an eine bestimmte Umgebung gekoppelt. Sie können ihn in einer anderen Umgebung wiederverwenden, das kann eine andere Konfiguration des gleichen Projekts sein, oder ein komplett anderes Projekt.

Und hier erstellen wir eine Fake/Mock-Implementierung des Heaters.

Schablonieren

Die Ziele dieser Arbeit sind die Vereinfachung der Richtlinien-API, die Verwendung von Web-Standards, die Verbesserung der Leistung und die Möglichkeit, bessere Werkzeuge zu entwickeln. Das Team hat andere verfügbare Frameworks analysiert und versucht, Stärken und Schwächen zu identifizieren. Dieser romanische Ansatz wird im Design-Doc dargelegt und ist für jeden Webentwickler von Wert. Das Team hat ein erstes Beispiel mit ShadowDom und arbeitet derzeit an Bindungen. Hier ist ein Hinweis darauf, wie eine sehr einfache Direktive aussehen könnte:

Und hier ist ein Kandidat für die Verwendung einer Einwegbindung.

Was ist ShadowDOM?

Shadow DOM wurde entwickelt, um eine Kapselung zu ermöglichen, indem DOM-Teilbäume unter Shadow Roots versteckt werden. Es bietet eine Methode zur Festlegung und Aufrechterhaltung funktionaler Grenzen zwischen DOM-Bäumen und der Art und Weise, wie diese Bäume innerhalb eines Dokuments miteinander interagieren, und ermöglicht so eine bessere funktionale Kapselung innerhalb des DOM. Wenn Sie shadowDom verstehen möchten, folgen Sie bitte diesem Link:
Html5rocks – ShadowDOM
Html5rocks – ShadowDOM

Ausdauer

Dies wird noch dokumentiert, kommentiert und überprüft. Es wird viel über Speicherquoten auf verschiedenen Browsern (Desktop und Mobile), Versprechen, Leistung usw. nachgedacht und überlegt. Wir werden anfangen, von umgeschriebenen und neuen Modulen wie ngHTTP, ngWebSocket, ngStore, ngOffline und ngData zu hören. Ich glaube, dass dieses Thema ein großes Abenteuer für dieses Team werden wird. Es gibt so viel Boden zu bedecken und so viele Leistungsgrenzen

Routenplanung

Diese wird noch dokumentiert, kommentiert und überprüft. Ziel ist es, bewährte Anforderungen wie mehrfache, verschachtelte, zweiseitige, zustandsbasierte Ansichten abzudecken. Das neue Design beinhaltet die folgenden Teile: Url Resolver: url-resolver.js Location Service: sehr ähnlich zu $location, aber unabhängig verpackt. Url Matcher, Route Resolver, Route Configuration: dies ist die API, mit der sich die Entwickler beschäftigen werden. Das Team beschäftigt sich auch mit Hooks zur Kontrolle der Benutzerrechte.

Loggen

Dieses Thema kam auch auf der ng-conf zur Sprache. Der Bedarf an einer Bibliothek, die steckbare Module ermöglicht, die bei der Arbeit mit einer asynchronen, ereignisorientierten Sprache wie Javascript helfen, einen viel aussagekräftigeren Stacktrace zu protokollieren

Anmerkungen

Wie bereits erwähnt, sind Metadaten der Ansatz, den das Team gewählt hat, um Boilerplate zu reduzieren und das Wireframe von Angularjs zu verbergen. Deklarative Annotationen sorgen für die Verdrahtung, während die Lesbarkeit für Entwickler erhalten bleibt, um zu verstehen, was vor sich geht. Beispiel: