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.

Blog-Post-Serie: Architekturüberblick von Angular 2

Inspiriert vom arc42 Gradle Starschnitt möchten wir hier eine Blog-Post Serie starten.  Die Serie soll einen Architekturüberblick von Angular 2 geben. Die Zielgruppe sind Entwickler, die Angular 2 besser kennenlernen möchten und überlegen, die neue Version des Frameworks auch in eigenen Projekten einzusetzen.

Inhalt Architekturüberblick von Angular 2

Die folgende Grafik zeigt den Aufbau bzw. den Inhalt der angedachten Blog-Post Serie:

Architekturüberblick Angular 2
Inhalt Architekturüberblick von Angular 2

Wie die Grafik zeigt, haben wir die einzelnen Elemente aus dem Gradle-Starschnitt als Referenz genommen. In den einzelnen Kapitel gehen wir nicht auf jedes Konzept von Angular 2 ein, sondern beschreiben die Konzepte lediglich exemplarisch.

Ziele

Folgende Ziele haben wir uns für diese Blog-Post Serie gesetzt (gemäss Priorisierung geordnet):

  • Wir möchten das Dokumentieren von Software-Architekturen trainieren sowie das Template von arc42 besser kennenlernen.
  • Wir möchten den grundlegenden Aufbau sowie dessen Elemente von Angular 2 kennenlernen und verstehen.
  • Nach der Serie möchten wir fähig sein, Empfehlungen für den (u.A. auch partiellen) Einsatz von Angular 2, anhand von konkreten Qualitätsanforderungen, machen zu können.

Warum Angular 2?

Da wir in sämtlichen Projekte (inkl. Mobile-Apps) AngularJS 1.x einsetzen, haben wir so potentiell bereits technische Schulden aufgebaut. Daher interessiert uns Angular 2 sehr stark. Bei der Auswahl der Tools für die Architekturübersicht standen folgende Anwendungen zur Auswahl:

  • Node Package Manager: Package Manager für NodeJS Module sowie neu auch Frontend-Bibliotheken
    • Interessant, weil nun auch Frontend-Abhängigkeiten über NPM aufgelöst werden sollen.
  • Gulp: Build-Engine für das Bauen von Web- und Mobile Anwendungen
    • Interessant, da sehr verbreitet.
  • React: Javascript Framework für Web-Anwendungen
    • Ist direkter Konkurrent von Angular 2

Ein weiterer Faktor, welcher den Entscheid für Angular 2 begünstigte, ist die aktuell nicht oder nur sehr spärlich vorhandene (deutschsprachige) Dokumentation rund um Angular 2. Uns ist bewusst, dass wir hier für den ersten Architekturüberblick eine echte Herausforderung genommen haben – jedoch nehme wir diese Anforderung gerne an :-).

Feedback

Da wir sämtliche Informationen selbst recherchieren und entsprechend aufbereiten, kann es natürlich vorkommen, dass einzelne Blog-Artikel zu dieser Serie inhaltliche Fehler aufweisen. Falls man entsprechende Fehler oder unvollständige Informationen findet, wären wir um ein entsprechendes Feedback dankbar. Am besten dazu einfach die Kommentar-Funktion nutzen. Vielen Dank bereits im Voraus!

Nun viel Spass mit dieser Blog-Post Serie über den Aufbau von Angular 2. Wir werden im zwei/drei Wochenrythmus mit einem neuen Blog-Artikel online gehen. Wir starten mit dem sogn. Produktkarton, welcher beschreibt was Angular überhaupt ist und kann.