Systemkontext von Angular 2

Dieser Blog-Artikel beschreibt den Systemkontext von Angular 2. Mit dem Systemkontext lässt sich genau abgrenzen, wo sich das zu beschreibende System gegenüber Umsystemen und Aktoren abgrenzt. Zusätzlich werden die identifizierten Umsysteme grob beschrieben.

Systemkontext von Angular 2

Das folgende Diagramm beschreibt der Kontext von Angular 2 aus Sicht des Entwickler, d.h. des Anwendungsentwicklers. Der Anwendungsentwickler realisiert auf Basis von Angular Webanwendungen.

Systemkontext von Angular 2
Systemkontext von Angular 2

Im Folgenden werden die einzelnen Aktoren und Umsysteme kurz beschrieben:

  • Entwickler: Der Entwickler setzt das Framework Angular 2 ein, um Komponenten für seine Webanwendung zu schreiben.
  • Transpiler: Angular 2 lässt es dem Entwickler offen, mit welcher Sprache (ES5, ES6, Typescript, Dart, ..) er Angular 2 verwendet. U.A. ist auch Angular 2 selbst in Typescript geschrieben. Mittels Transpiler wird dann der Quellcode in der entsprechenden Sprache nach ES6 umgewandelt.
  • Entwicklungswerkzeuge: Auf der Basis von NodeJS werden für die Entwicklung eine Reihe nützlicher unterstützende Entwicklungswerkzeuge, wie z.B. der Live-Server angeboten. NodeJS selbst dient als Laufzeitumgebung für die ganzen unterstützenden Tools. Die Tools werden typischerweise über den eigenen Node Package Manager bezogen.
  • Webanwendung: Hiermit ist die Webanwendung, welche der Entwickler auf Basis von Angular 2 erstellt, gemeint. Die Webanwendungen selbst kann wiederum aus 1..n Komponenten bestehen. Die Komponenten werden von Angular 2 angezogen und entsprechend dem Browser zur Verfügung gestellt.
  • Browser: Der Browser rendert die komplette Webanwendung auf Basis von Angular 2. Wichtig ist hierbei, dass der Quellcode in ES6 ist. Falls der Browser die entsprechenden ES6 Konstrukte nicht versteht, kann mittels sogn. ES6-Shim die Kompatibilität auch zu älteren Javascript Engines gewährleistet werden.
  • Module Loader: Angular 2 benutzt für das Laden von Modulen bzw. Komponenten SystemJS. Mittels SystemJS lassen sich ES6 Module oder Module gemäss AMD– und CommonJS Spezifikation laden. So ist es möglich die Webanwendung feingranular zu schneiden und entsprechende Komponenten einfach zur Laufzeit nachzuladen.
  • Package Management: Die Abhängigkeiten rund um das Ökosystem Angular 2 können mit dem Package Manager JSPM (Javascript Package Manager) oder mit NPM (Node Package Manager) bezogen werden. JSPM – wieder ein weiterer Package-Manager? 🙂 Jein – der Vorteil von JSPM ist, dass der Package Manager Abhängigkeiten über mehrere verschiedene bzw. unterschiedliche Quellen beziehen kann (bower, npm, github, etc.) und so nur die Metadaten der Abhängigkeiten in seiner Registry hält. Zusätzlich interagiert JSPM perfekt mit dem Module Loader SystemJS.
  • IDE / Editor:  Bereits jetzt bieten einige IDE’s oder Editoren kontextspezifische Unterstützung (im Microsoft Jargon ‚Intellisense‘) im Umgang mit Angular 2. Beispiele sind hier IntelliJ bzw. Webstorm von Jetbrains.
  • Polyfills & Shims: Angular 2 benötigt verschiedene Polyfills und Shims. Polyfills sind Bibliotheken welche Funktionalitäten anbieten, die aktuell (noch) nicht im entsprechenden Browser verfügbar sind.
    Angular 2 benötigt zwei Pollyfill-Bibliothken wie das „hauseigene“ zone.js, welches dem Framework ermöglicht sogn. Execution-Kontext-Objekte über asynchrone Methodenaufrufe hinweg zu transportieren. Eine zusätzliche Polyfill-Bibliothek ist reflect-metadata um Methoden-Annotationen mit Metadaten versehen zu können (analog C# / Java).
    Shims überbrücken API-Kompatibilitätsbrüche indem sie als Facaden für API-Aufrufe dienen. Diese benötigen im Angular 2-Kontext die Benutzer, welche Browser einsetzen wollen, die ES6 noch nicht komplett unterstützen. Diese Angular 2 basierenden Anwendungen müssen den entsprechenden ES6-Shim einbinden.
  • Reaktive Programmierung: Angular 2 unterstützt mit ReactiveX bzw. dessen Javascript Implementation RxJS die asynchrone und event-basierte Programmierung in dem sogn. Observable-Collections und -Arrays angeboten werden (z.B. im Angular 2 HTTP-Kontext). Daher ist RxJS eine zwingende externe Abhängigkeit.

Feedback

Falls Du Fragen, Unklarheiten oder Ergänzungen zu diesem Blog-Post hast, nutze dazu einfach die Feedback-Funktion. Vielen Dank!

Nächster Artikel

Der nächste Blog-Post beschreibt die Qualitätsziele (oder auch ‚Architekturziele‘) von Angular 2.