Bausteinsicht von Angular 2

Mit der Bausteinsicht kann ein Softwaresystem mit dem Top-Down oder Bottom-Up Ansatz analysiert werden. Ausgehend vom Systemkontext kann das zu untersuchtende System in die relevanten Bausteine unterteilt werden. Die einzelnen Bausteine können wiederum unterteilt werden. So lässt sich das gesamte System beliebig granular bzw. aus den unterschiedlichsten Blickwinkeln betrachten. Dieser Artikel untersucht die Bausteinsicht von Angular 2 ausgehend vom Systemkontext. Dabei wurden die Bausteine von der ersten Ebene ab dem Systemkontext von Angular 2  untersucht.

Bausteinsicht von Angular 2

Als Bausteine wurden die einzelnen Packete im github-Repository von Angular 2 identifiziert. Die folgende Grafik zeigt die entsprechenden Bausteine.

Identifizierte Bausteine von Angular 2 anhand des github-Repositories.
Identifizierte Bausteine (rot) von Angular 2 anhand des github-Repositories.

Die Abhängigkeiten unter den Bausteinen wurden untersucht und entsprechend visualisiert. Die folgende Grafik zeigt die Zusammenhänge der einzelnen Bausteine.

Die Bausteine von Angular 2 sowie die Zusammenhänge untereinander.
Die Bausteine von Angular 2 sowie die Zusammenhänge untereinander.

Die folgenden Unterkapiteln beschreiben die einzelnen Bausteine von Angular 2. Falls der Name des entsprechenden Bausteins keinen klaren Hinweis auf die Funktionalität bzw. dessen Aufgabe gibt (wie z.B. Facade, Core oder Common), wurden die wichtigsten Funktionen analysiert und dokumentiert.

Facade

Der Baustein bietet für verschiedenste Javascript-Konzepte und externe Abhängigkeiten entsprechende Facaden an. Sämtliche Bausteine von Angular 2 sind vom Facade-Baustein abhängig. Ein Auszug aus Abstraktionen, die der Facaden-Baustein von Angular 2 bietet:

  • Wrapper-Objekte und Hilfsfunktionen für Javascript-Objekte und Sprachkonstrukte wie Math, Date, Timer, NaN und Typenprüfkonstrukte wie zB. isInteger, etc.
  • Event-Emitter, über welchen Broadcast Events von Angular Komponenten und Direktiven gefeuert und abonniert werden können.
  • Abstraktion für Window-Properties wie z.B. window.document, window.location, etc.
  • Collection-Objekte und Funktionalitäten wie z.B. das Anbieten von spezifischen Maps und Sets (wie z.B. den List-, Map- oder String-Wrapper).
  • Modellierung von Exceptions und dessen Behandlung sowie entsprechende Protokollierung.
  • Internationalisierungsaspekte, wie z.B. die Formatierung von Nummer und Datum.

Core

Der Core-Baustein enthält alle zentralen Funktionalitäten von Angular 2. Core ist abhängig vom Angular Facaden Baustein. Anbei die wichtigsten Funktionalitäten:

  • Change Detection Mechanismus
  • Erweiterte Debug-Funktionalitäten
  • Dependency Injection Mechanismus
  • Bereitstellen der sogn. Lifecycle Hooks, welche den Lebenszyklus einer Angular Komponente abbilden.
  • Pipes (früher in AngularJS waren dies Filter)
  • Anbindung ans Web Tracing Framework (WTF) von Google
  • Reflection-Funktionalitäten
  • Unterstützung für E2E-Tests um Test-Hooks auszulösen.
  • Decorator-Interface, um Klassen und Funktionen in einer Angular 2 Anwendung zu dekorieren.
  • Schnittstelle zu zone.js

Common

Der Common-Baustein verwendet, wie alle anderen weiteren Bausteine, den Facaden- und Core-Baustein. Common bietet folgende Funktionalitäten an:

Testing

Der Testing-Baustein enthält diverse unterstützende Mechnismen für das automatische Testing von Angular 2 Anwendungen sowie für das Testing des Frameworks selbst, wie z.B.:

  • Wie unterstützende Testing-Funktionaliäten für den Selenium-Webdriver
  • Fake-Implementationen, wie z.B. für eine Async-Zone oder den Injector
  • Angular spezifische Matchers für Jasmine-Tests
  • Unit-Testing Library, welche Jasmine und die angebotenen Test-Implementationen verwendet.

Router

Der Router ist bei Angular 2 noch nicht fertiggestellt. Er bietet dem Benutzer die ganzen Routing-Mechnismen, um URL-Konzepte auf entsprechende Angular-Komponenten abzubilden.

Web Workers

Angular 2 bietet den nativen Support um Anwendungsteile in Web Workers laufen zu lassen. Dieser Baustein ermöglicht die Verwendung von Web Workers in Angular 2 Anwendungen. Dieses Dokument beschreibt wie man Web Worker kompatible Angular 2 Komponenten baut.

HTTP

Dieser Baustein ermöglicht die Kommuinikation von Angular Komponenten zu Backend-Systemen. Wichtig ist hier, dass mit Observables von RxJS gearbeitet wird und nicht direkt mit Promises. Zusätzlich bietet der Baustein auch fürs Testing diverse Mocks für Backends an.

Platform

Der Platform-Baustein bietet unterschiedliche Funktionalitäten, Workarounds und Abstraktionen im Umgang mit dem Browser (= Platform).

Animate

Der Animation-Teil ist bei Angular 2 noch in Bearbeitung. Das Ziel dieses Bausteins ist es, Animationen für Desktop- und Mobile Anwendungen in einer einfachen Art- und Weise abzubilden und in der Anwendung entsprechend zu verwenden.

Compiler

Der Compiler-Baustein kümmert sich um die Konvertierung der spezifizierten Templates in Angular-Komponenten.

Upgrade

Mit dem Upgrade-Baustein will Angular 2 die Möglichkeit bieten, AngularJS und Angular 2 nebeneinander laufen zu lassen und so einen weichen Übergang von AngularJS nach Angular 2 zu ermöglichen. Die Verwendung dieses Upgrade-Adapters hier hier beschrieben.

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 wird die grundlegenden Architekturentscheide von Angular 2 beschreiben.

Qualitätsziele von Angular 2

Qualitätsziele bestimmen die Software-Architektur einer Software-Komponente. Daher dient die Erarbeitung der Qualitätsziele bzw. die nichtfunktionalen Anforderungen (i.d.R. drei bis fünf Qualitätsziele, geordnet nach einer vorgegebenen Priorität) als Voraussetzung für den Start der Realisierung einer Komponente. Die Blog-Post beschreibt die hergeleiteten Qualitätsziele von Angular 2. Einen guten Einstieg zum Thema Qualitätsziele gibt der Blog-Eintrag der Apptiva AG zum Thema Qualität.

Die Eruierung der Qualitätsziele von Angular 2 ist schwierig. Sämtliche Design-Dokumente von Angular 2 findet man im entsprechenden Ordner vom Google Drive des Teams (hier). Klare Qualitätsziele findet man in keinem der Dokumente bzw. auch nicht auf der Webseite von Angular 2. Jedoch können aus den einzelnen Aussagen bzw. Informationen entsprechende Qualitätsziele für Angular 2 abgeleitet werden.

Qualitätsziele von Angular 2

Folgende Qualitätsziele haben wir versucht herzuleiten und entsprechend zu priorisieren.

1. Effizienz

Effizienz umfasst das Zeitverhalten sowie das Verbrauchsverhalten einer Software. Das Zeitverhalten definiert Antwort- und Verarbeitungszeiten sowie Durchsatz bei der Funktionsausführung einer Software und das Verbrauchsverhalten umfasst die Anzahl und die Dauer der benötigten Betriebsmittel für die Erfüllung der Funktionen.
Auf Angular 2 basierende Anwendungen bzw. dessen Inhalte sollen für den Benutzer schnell geladen werden können. D.h. das Framework selbst darf nicht der Verursacher von Performance-Problemen sein.

Performance-Probleme bei AngularJS

Bei AngularJS kam es bei grösseren (Enterprise-) Anwendungen immer wieder zu solchen Herausforderungen, wo man sehr genau prüfen musste, welche Konstrukte man wie und in welchem Kontext einsetzte (siehe Lösungen z.B. hier). Symptome für die Performance-Probleme von AngularJS entdeckt man auch bei einem Konstrukt vom Mobile-Framework Ionic. Sie implementierten ein performanteres ng-repeat, das sogn. collection-repeat. Dies aus der Not heraus, dass auch Listen mit vielen Einträgen auf einem Mobile-Gerät performant angezeigt werden sollen. Das collection-repeat rendert nur die aktuell auf dem Gerät sichtbaren Items in den DOM. Das Konstrukt überwacht dann die Stelle in der Liste, auf welcher Benutzer steht. Ändert diese, werden die neuen Elemente der Liste in den DOM gerendert.

Angular 2 mit effizienz-steigernden Massnahmen

Angular 2 adressiert diese Thematik mit unterschiedlichen Konzeptanpassungen.
So ändert Angular 2 z.B. den gesamten Change-Detection- bzw. Databinding- Mechanismus. Angular 2 fungiert beim Change-Detection Mechanismus als reaktives System, in dem der Komponenten-Baum bei jedem Browser-Event traversiert wird und somit keine periodischen „Überprüfungszykeln“ mehr gibt. Ein anderer Schritt Richtung Performance kommt mit dem sogn. ‚Angular Universal‚, dem sogn. Angular 2 Server Rendering (die Design-Dokumentation findet man hier). Angular-Universal will dabei folgende Ziele erreichen:

Durch das neuartige Konzept verspricht man sich verbesserte initiale Ladezeit sowie eine verbesserte clientseitige Performance (z.B. Rendern einer Seite, welche einen nicht oft ändernden Inhalt enthält oder Seiten mit Visualisierungen).

2. Übertragbarkeit

Für das Qualitätsziel Übertragbarkeit wird vorallem die Konformität untersucht.

Konformität dank Orientierung an Web Standards

Definiert den Grad, in dem die Software Normen oder Vereinbarungen zur Übertragbarkeit erfüllt.
Angular 2 versucht an Web Standards zu orientieren bzw. sich entsprechend diesen Konzepten auszurichten. So z.B. wird die Spezifikation der Web Components unterstützt. Die Spezifikation der Web Componens besteht aus den Teilen Custom Elements (Implementieren von eigenen HTML-Elementen), Shadow DOM (Auslagern des DOMs eines Custom Elements), Templates (Unterstützung eines <template> Elemente ohne dies zu rendern) und HTML Imports (Laden von HTML-Dokumenten in ein entsprechendes Ziel-Dokument). Diese standardisierten Konzepte findet man in Angular 2 wieder.

Konformität durch nachhaltige Unterstützung von Javascript

Nebst der Unterstützung von Web Standards orientiert sich das Framework durch den Einsatz von Typescript auch an den modernen Javascript Spezifikationen (ES6 / ES7 / …) aus. So richtet sich das Framework einerseits nachhaltig gegenüber Javascript aus und andererseits ist das Framework konform gegenüber Brower- und Umgebungsspezifikationen. Aus Sicht Framework-Anwender ist dank dem Einsatz von Typescript auch möglich, Software-Komponenten auf Basis von Angular 2 mit ES5, ES6, Dart und / oder Typescript zu verwenden.
Ein weiteres Ziel von Angular 2 ist es, konform zu unterschiedlichen Sprachen zu sein – d.h. es ist möglich Angular 2 in einem ES5, ES6, Dart und / oder Typescript-Kontext zu verwenden.

3. Benutzbarkeit

Die Benutzbarkeit besteht aus den Merkmalen Verständlichkeit und Erlernbarkeit.

Verbesserte Verständlichkeit dank Typescript

Verständlichkeit definiert sich über den Aufwand der den Benutzer (in unserem Kontext der Entwickler) zum Lernen des Konzeptes bzw. Schaffung über dessen Verständnis. Angular 2 setzt sehr stark auf ein einfaches Verständnis bzw. ein minimaler Aufwand die entsprechenden Kernkonzepte kennenzulernen. Die Ausrichtung nach Typescript fördert das Verständnis bzw. minimiert den Aufwand um den Umgang mit Angular 2 kennenzulernen.

Bessere Verständlichkeit durch überarbeitete Konzepte

Das total überarbeitete Modul- und Komponentenkonstrukt mit dem neuen Dependency Injection Mechanismus ermöglicht es die Anwendung, nach dem Single Responsibility Principle zu strukturieren und so ein einfaches Verständnis in der Software-Architektur der Anwendung zu erreichen. Jedoch sind Module im Angular-Kontext nicht zwingend. Dies gilt auch für andere Konzepte. Mit Angular 2 entsteht eine losere Kopplung an das Framework selbst – man kann sich die Konzepte verwenden die man auch wirklich benötigt. Die Anzahl Angular 2 spezifischen Elemente sind merklich weniger geworden als in AngularJS, was wiederum die Verständlichkeit aber auch die Erlernbarkeit effizienter gestaltet. 

Schnellere Erlernbarkeit dank zielgerichteter Dokumentation

Erlernbarkeit definiert den Aufwand, welcher der Benutzer hat um die Anwendung (bzw. in unserem Kontext das Framework) anwenden zu können. Hier setzt Angular 2 auch sehr stark auf eine einfach verständliche Dokumentation, um das Framework effizient kennenzulernen. Beispielsweise einen guten Einblick in das Metamodell von Angular 2 gibt der Architekturüberblick

Links

Angular 2 Architecture Overview:
https://angular.io/docs/ts/latest/guide/architecture.html

Angular 2 Design Docs:
https://drive.google.com/drive/u/1/folders/0B7Ovm8bUYiUDR29iSkEyMk5pVUk

Ionic Angular 2 Blog-Post Serie:
http://blog.ionic.io/angular-2-series-introduction/

Blog-Post Change-Detection in Angular 2:
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2

Angular Universal Design Doc: https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit

Telerik Angular 2 Überblick:
http://developer.telerik.com/featured/will-angular-2-be-a-success-you-bet/

Angular 2 Presentation:
http://tryangular2.github.io/

Web-Components:
http://www.2ality.com/2015/08/web-component-status.html

Blog-Post „What happended to Web Components?“  von Dr. Alex Rauschmayer
http://www.2ality.com/2015/08/web-component-status.html

ISO/IEC 9126 (Qualitätsmerkmale) auf Wikipedia
https://de.wikipedia.org/wiki/ISO/IEC_9126

Blog-Post „Qualitätsziele“
http://apptiva.ch/qualitaetsziele/

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 wird die Bausteinsicht von Angular 2 beschreiben.