Build- und Deployment mit Bitbucket Pipelines

Wie man in drei Schritte kostenloses CI/CD in der Cloud aufsetzt

Es gibt aktuell nicht viele kostenlose Angebote um seine eigene closed-source Anwendung kontinuierlich zu bauen bzw. zu verteilen. Atlassian Bitbucket unterstützt kostenlose closed-source git-Repositories und bietet seit kurzem einen freien CI/CD Service mit Bitbucket Pipelines an. Dieser Blog-Post zeigt auf, wie Bitbucket Pipelines funktioniert und wie man in drei Schritten ein CI/CD Build für seine eigene closed-source Anwendung aufbaut.


Bitbucket.org bietet einen kostenlosen CI/CD Service in der Cloud an.

Wie funktioniert Bitbucket Pipelines?


Bitbucket Pipelines baut auf Docker auf. Bitbucket bezieht die Docker Images über den öffentlichen Docker Hub oder über private Repositories.
Die Funktionsweise ist einfach: Gibt es im entsprechenden Branch ein Commit, wird ein Pipelines Build angestossen. Der Build bezieht das angegebene Docker Image aus dem entsprechenden Repository und startet die spezifizierte Build- und Deploy-Logik aus dem bitbucket-pipelines.yml.

Wichtig: Bitbucket stellt bereits ein eigenes Default Docker-Image bereit:
https://hub.docker.com/r/atlassian/default-image/
Dies enthält bereits einige Werkzeuge, wie wget, xvfb, curl, git, java, maven, node, npm, nvm, python, gcc

Benötigt man etwas Zusätzliches (z.B. in adhook.io Fall Bower, bower-npm-resolver, Typescript Transpiler, Typings) kann man einfach ein weiteres (u.U. davon abgeleitetes) Image erstellen.

In drei Schritten zum eigenen CI/CD Build

1. Aktivere Bitbucket Pipelines

Aktiviere Bitbucket Pipelines in den Settings (Settings -> Pipelines -> Settings -> Enable Pipelines)
So überprüft Bitbucket bei einem git-Commit in einem spezifischen Branch, ob ein bitbucket-pipelines.yml (Spezifikation der Build- und Deployment Logik) enthalten ist. Wenn ja, wird ein entsprechender Build ausgelöst.

2. Erstelle die Build & Deployment-Spezifikation

Die Build- und & Deployment-Spezifikation wird in einem sogn. bitbucket-pipelines.yml festgehalten. Beispiele dazu findet man hier.

Tipp: Du kannst unterschiedliche Build-Steps hinterlegen, abhängig vom Branch. Z.B. andere bzw. zusätzliche Build-Steps bei einem Release-Branch gegenüber einem Feature-Branch.

3. Füge die Build-Spezifikation dem Repository hinzu.

Füge das bitbucket-pipelines.yml dem entsprechenden Branch hinzu — fertig!

Anschliessend wird bei jedem Commit im entsprechenden Branch die spezifizierte Build-Logik ausgeführt. Unter Pipelines findest Du die ausgeführten bzw. bereits durchgeführten Builds. Der folgende Screenshot findest Du ein Auszug aus unserem adhook.io Repository:

Alternative zu Bitbucket Pipelines

Kostenlose Alternativen im Bereich CI/CD für closed-source Repositories kenne ich aktuell lediglich Wercker (http://www.wercker.com/, Team wercker).

Feedback & Ergänzungen

Hast Du Feedback, Ergänzungen oder Fragen zu diesem Blog-Post? Ich würde mich freuen!

Erste Vorkehrungen für Angular 2

Post von Patrick Roos auf Medium.com

Qualitätsziele von Angular 2

In unserer Plattform adhook.io haben wir in Zukunft die gleiche Herausforderung wie viele andere Web-Plattformen: Die Migration nach Angular 2. Dieser Blog-Post beschreibt die ersten Vorkehrungen, die eine Migration nach Angular 2 unterstützen.

Technische Schulden

Man kann den Einsatz von AngularJS (1.x) als technische Schuld führen. Im iSAQB Advanced Modul ‘AGILA’ mit Stefan Toth lernt man folgendes im Umgang mit technischen Schulden. Bei technischen Schulden hat man grundsätzlich folgende Handlungsoptionen (aus Buch ‘Vorgehensmuster für Software-Architektur’):

  • Schuldenfortzahlung: Man behandelt das Problem nicht weiter, sondern akzeptiert es.
    Angular Beispiel: Man setzt weiterhin AngularJS (1.x) ein, kann das eingegangene Risiko gut abschätzen und geht diese weiterhin ein.
  • Schuldenrückzahlung: Man beseitigt die Schuld durch Umstrukturierungen, Migration, Portierung, etc.
    Angular Beispiel: Man migriert von AngularJS (1.x) nach Angular (2.x).
  • Umschuldung: Man ersetzt die aktuelle Lösung durch eine gute, aber nicht perfekte Lösung, die eine geringere Schuldenlast verursacht.
    Angular Beispiel: Man migriert z.B. einzelne fachliche oder technische Aspekte nach Angular 2 (‘hybrid Szenario’).

Technische Schulden sind unumgänglich. Wichtig ist, dass man sie aktiv listet, diese kontinuierlich bewertet und falls notwendig, entsprechende Massnahmen trifft. Für adhook.io haben wir uns in einem ersten Schritt für die Handlungsoption Umschuldung entschieden, wie die folgenden Kapiteln zeigen.

Erste Schritte Richtung Angular (2.x)

Dieses Kapitel beschreibt die ersten Vorkehrungen sowie die Erfahrungen Richtung Angular 2 anhand eines Praxisbeispiels von adhook.io.

Vorbereitungen

angular.io setzt die folgenden Vorbereitungen für eine Migration nach Angular 2 voraus:

  1. Folge der AngularJS Style Guide von John Papa
    Naja, machen wir +/- 😉
  2. Benutze einen Module Loader wie z.B. SystemJS oder WebPack
    Kommt zum aktuellen Zeitpunkt nicht in Frage, da wir keinen unmittelbaren Mehrwert daraus erhalten.
  3. Migriere dein Projekt nach Typescript
    Ja — macht aktuell für uns Sinn! Typensicheres Javascript reduziert mögliche Fehlerquellen in unserer zukünftigen Frontend-Entwicklung.
  4. Benutze das ‘Component Directive’ Konstrukt von >= AngularJS 1.5.x
    Ja — macht aktuell für uns Sinn! Wir können so den Komponenten-Ansatz von Angular 2 besser kennen lernen und der Migrationsaufwand nach Angular 2 minimieren.

Wie aus den Kommentaren zu den einzelnen Punkten ersichtlich ist, haben wir uns aktuell für die Punkte 3 und 4 entschieden, welche wir punktuell an neuen Features umsetzen möchten. Die Umsetzung zeigen die folgenden Kapiteln.

Typescript Unterstützung

Typescript ist ein typisiertes Superset von Javascript, mit welchem man nach plain Javascript transpilieren kann. Dank diesem Superset-Ansatz lässt sich eine Javascript-Datei *.js einfach nach *.ts umbenennen — fertig.

Umgebungssetup
Damit man im eigenen AngularJS (1.x) Projekt nach Typescript transpilieren kann, muss man folgende Schritte ausführen:

  1. Installation von Typescript
    npm install -g typescript
  2. Installation des Typings Definition Loader
    npm install -g typings
  3. Benötigte Typings, wie z.B. die von AngularJS, etc. installieren
    typings install dt~jquery dt~angular dt~angular-route \
    dt~angular-resource dt~angular-mocks dt~angular-animate \
    dt~jasmine -- --save --global
  4. Hinzufügen der Typescript-Konfiguration (tsconfig.json)
    Das tsconfig.json im Projekt-Verzeichnis analog package.json ablegen.
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

5. Typescript-Watcher laufen lassen

tsc -w

Fertig, ab sofort kann im ganzen Projekt mit Typescript gearbeitet werden!

Komponentenbasiert in AngularJS 1.x

Da laufend Anpassungen an Funktionalitäten oder gar neue Features in adhook.io hinzukommen, haben wir uns entschlossen, direkt ein neues Feature mit dem neuen Komponentenansatz von Angular umzusetzen. Dank dem Komponent-Aspekt in Angular 1.5 ist dies bereits jetzt möglich, um so einen sanfteren Übergang von Angular 1.x nach Angular 2 zu erhalten. Angular 2 propagiert nicht mehr das klassische MVC-Pattern, sondern schlägt den eben diesen Komponentenansatz vor.

Komponentendefinition in Angular 2
Laut angular.io ist eine Komponente in Angular folgendes:

A component controls a patch of screen called a view
For example, the following views are controlled by components:

Das folgende Bild zeigt diesen Komponentenansatz relativ schön:

https://angular.io/docs/ts/latest/guide/architecture.html

Die Umsetzung am Praxisbeispiel
In adhook.io haben wir nun eine View erstellt, welche aus zwei Child-Views besteht. Fachlich ist es eine Ansicht, welche die Resultate aus dem A/B-Testing von digitalen Werbeanzeigen enthalten wird. Die Ansicht besteht aus zwei Teilansichten — eine Übersicht und eine Detailansicht.

Diese lassen sich nun schön mit dem Komponentenansatz umsetzen:

  • Parent-Komponente (A/B Testing View)
    abTestingComponent
  • Child-Komponente 1 (A/B Testing Übersicht)
    abTestingOverviewComponent
  • Child-Komponente 2 (A/B Testing Details)
    abTestingDetailsComponent

Eine Komponente besteht in Angular 1.x aus den folgenden Elementen:

  • Metadaten für die Registrierung einer Komponente in Angular 1.5.x:
/**
 * Created by patrick on 05.10.16.
 */
angular.module('adhook.client').component("abTestingComponent", {
  templateUrl: 'components/promotion/abTesting/abTesting.html',
  controller: AbTestingController
});
  • Controller
class AbTestingController {
  tabData:any;
  logger : angular.ILogService;

  static $inject = ['$log'];

  constructor($log: angular.ILogService) {
    $log.info('logger called.');
    //...
  }

  onClick(points, evt) {
    //..
  }

  initOverview = function() {
    //..
  }

  initAds = function() {
   //..
  };

};
  • Template (Markup)
<div>
  <div>
    <div ng-show="$ctrl.tabData.selectedTab === 'OVERVIEW'">
      <ab-testing-overview-component></ab-testing-overview-component>
    </div>
    <div ng-show="$ctrl.tabData.selectedTab === 'ADS'">
      <ab-testing-details-component></ab-testing-details-component>
    </div>
  </div>
</div>

Im obigen Template sieht man gut, wie auf die einzelnen Child-Komponenten verwiesen wird, welche wiederum aus den entsprechenden Elementen (Metadaten, Controller und Template) bestehen.

Der fehlende Component-Router
Im obigen Code erkennt man wie die einzelnen Komponenten ein- und ausgeblendet werden — mittels ng-show. Dies ist definitiv nicht der perfekte Ansatz. Da wir in unserer Anwendung nicht den UI-Router einsetzen, ist es aktuell nicht möglich die Komponenten ins Routing miteinzubeziehen. Es gab in Angular 1.x das Vorhaben ‘Component Router’ , welches aber deprecated ist und AngularJS auf den ui-router verweist.

Retrospektive

Besonders bei der Frontend-Entwicklung muss man aufpassen, dass die eingesetzten Frameworks sowie die unterstützenden Tools nicht plötzlich als ‘deprecated ‘ markiert sind und anschliessend nicht mehr von der Community unterstützt werden. Deshalb ist eine wichtige gemeinsame (!) Team-Aufgabe, das Auflisten, Beobachten und Bewerten von technischen Schulden. Angular 1.5.x kann ebenfalls bereits in diese Liste aufgenommen werden; muss aber für den eigenen Case detailliert analysiert und bewertet werden. Entsprechende Massnahmen können eine sogn. ‘Big Bang’ Migration oder eine sanfte Migration sein. So oder so müssen Vorarbeiten geleistet werden, wie z.B. der Einsatz von Typescript, die Evaluierung und der Einsatz eines Module-Loaders sowie u.U. die erste Umsetzung von sogn. ‘Components’ in Angular 1.5.x.

Hast Du bereits Erfahrungen mit der Migration gemacht? Hast Du eine Lösung für das oben genannte Problem (Component Router)? Diskutiere mit! Ich würde mich freuen.

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.

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.

Virtueller Produktkarton von Angular 2

Wer kennt ihn von früher nicht – den klassischen Produktkarton einer Software. Mit dem Kauf eines sogn. ‚Softwarekarton‘ erhielt man früher die ganze Anwendung, d.h. Datenträger (Diskette, CD, DVD, etc.) und eine passende Benutzeranleitung.

Beispielhafte Softwarekartons, wie z.B. Windows XP oder die Office Suite
Beispielhafte Softwarekartons, wie z.B. Windows XP oder die Office Suite – Bild gefunden via Flickr von Hobvias Sudoneighm

Auf der Rückseite des Kartons fand man einen Überblick, was die Anwendung konnte bzw. welche Funktionalitäten (Überblick) man mit dem Produkt kaufte. Natürlich enthielt der Karton u.A. viele Marketingsprüche, damit man das Produkt im Laden dann auch tatsächlich kauft.

Dieser Blog-Artikel stellt ein virtueller Produktkarton von Angular 2, der nächsten Version von AngularJS, dar. Der Artikel besteht aus einem Mission-Statement, dessen Präzisierung sowie die Auflistung der wesentlichen Features von Angular. Der virtuelle Produktkarton von Angular 2 gibt einen leichten Einstieg ins Thema.

Mission Statement

Angular ist eine Entwicklungsplattform, um Mobile- und Desktop Anwendungen zu bauen ¹.

  • Mit Angular lassen sich unter der Berücksichtigung von modernen Web-Standards, wie z.B. die Ausrichtung nach ECMAScript 6 (ES6) oder die Unterstützung von Web Components, zukunftsgerichtete und nachhaltige Anwendungen bauen.
  • Durch den verfolgten Mobile-First Ansatz von Angular erhalten Benutzer auch mit geringerer Bandbreite das beste Nutzererlebnis.
  • Angular ist dank dem modularen Aufbau sehr einfach und schnell zu lernen – ganz nach dem Motto „Start quick, build fast„.

Wesentliche Features

  • Durch den modularen Aufbau von Angular sowie einem mobile ausgerichtetem Routing ist es möglich, den Code strukturiert und so performant zu halten, dass auch Mobile-Benutzer der Anwendung nicht warten müssen.
  • Um für die zukünftige Ausrichtung (ES6, ES7, …) von Javascript gerüstet zu sein, ist Angular komplett in Typescript geschrieben.
  • Der Entwickler ist völlig frei, mit welcher Sprache er Angular verwendet (d.h. ES5, Typescript, Dart, CoffeeScript oder eine andere Sprache die nach Javascript kompiliert wird).
  • Die Änderungserkennung ist gegenüber der Vorgängerversion 5x schneller. Der Einsatz von Angular 2 wird die Anwendung erheblich beschleunigen.
  • Mit dem Einsatz von Angular wird der Code einfach und ausdruckstark, mit dem man zukünftige Komplexität während der Entwicklung erschlagen kann.
  • Mit Angular können komplexe Ansichten abgebildet werden. Das übergreifende Routing-Konzept ermöglicht verschachtelte und verknüpfte Views. Angular unterstützt mit dem neuartigen Routing Card-Stack Navigation, animierte Übergänge sowie Lazy-Loading von abhängigen Sichten.
  • Animationen für eine Mobile-Anwendung als auch Animationen für Desktop-Anwendungen können mittels einfacher Angular Event API oder direkt via CSS, Javascript oder der Web Animation API umgesetzt werden.
  • Angular kommt mit einem leistungsstarken hierarchischen Dependency Injection (DI) Mechanismus, der feingranular geschnittene Anwendungen unterstützt, ohne dass der Entwickler mühsamen Glue-Code schreiben muss.
  • Angular unterstützt Web Components, welche u.A. auch mit Bibliotheken wie Polymer oder X-Tag gebaut wurden. Zusätzlich verwendet Angular Komponenten Web Standards wie z.B. das Konzept des Shadow DOM .
  • Mit dem Einsatz von Angular kann die Internationalisierung (i18n) sowie die Barrierefreiheit einer Anwendung (z.B. Unterstützung ARIA-Attribute) vollumfänglich unterstützt werden.

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 modelliert den System-Kontext von Angular 2.


¹ Übersetzt von Angular.io: „Angular is a development platform for building mobile and desktop applications.“

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.

Interessantes aus der iSAQB Grundausbildung

Die letzten paar Tage besuchte ich die Grundausbildung (‚Foundation‘) zum iSAQB Certified Professional for Software Architecture. Der Kurs wurde von Stefan Zörner (embarc GmbH) geleitet. Der Kurs ging insgesamt drei Tage. Man beschäftigte sich während diesen drei Tagen intensiv mit Software-Architektur und den Aufgaben der Rolle ‚Software Architekt‘. In diesem Blog-Eintrag möchte ich nicht auf die iSAQB Foundation Zertifizierung eingehen – sondern bestimmte inhaltliche Elemente und auch persönliche ‚Eye-Opener‘ aus dem Kurs festhalten.

Was ist Software-Architektur?
Software-Architektur ist nicht ganz so einfach zu definieren. Am Kurs wurden verschiedene Definitionen diskutiert – am besten hat mir dabei die Definition von Eoin Woods gefallen: „Software architecture is the set of design decisions which, if made incorrectly, may cause your project to be cancelled.“ Das SEI – Software Engineering Institute hat verschiedene Definitionen zum Begriff ‚Software Architecture‘ gesammelt und bietet die Möglichkeit auch eigene Definitionen zu publizieren.

Start eines Vorhabens
Beim Start eines Vorhabens sollte vorgängig das WAS und anschliessend Teile des WIE erarbeitet werden. Folgende Punkte können das WAS beschreiben:

  • Systemkontext (*)
  • Rahmenbedingungen (*)
  • Qualitätsanforderungen und Qualitätsziele (*)
  • Szenarien
  • Risiken

Wenn die grundlegenden Informationen zum WAS erarbeitet wurden können die WIE-Grundlagen geschaffen werden:

  • Einzusetzende Technologien (*)
  • Architekturstil (-muster) (*)
  • Architekturprinzipien (*)
  • Grobe Gliederung
  • Domänenmodell (Begrifflichkeiten)

Mit einem (*) deklarierten Punkte sind besonders wichtig!

Systemkontext – nicht verhandelbar!
Aus dem Kurs ging hervor, dass das System eingehend mit einem Systemkontext beschrieben werden muss. Der Systemkontext beschreibt das System als Blackbox und zeigt die interagierenden Benutzer in unterschiedlichen Rollen sowie Beziehungen und Schnittstellen zu Umsystemen an. Wichtig ist, dass der Systemkontext anhand des Zielpublikum, das heisst fachlich und/oder technisch, modelliert werden muss.

Qualitätsziele aus Qualitätsanforderungen festlegen
Um Architekturstile, Entwurfsmuster und Strukturen für ein Software-System bzw. dessen Bausteine festlegen und diese implementieren zu können, sind  Qualitätsziele für das Entwicklungsteam essentiell. Ohne ein gemeinsames Verständnis (inkl. wichtige Stakeholder) über Qualitätsziele, läuft man (= der Projektleiter bzw. der Product Owner) in die Gefahr ein Software-System realisieren zu lassen, welches nicht den Erwartungen der Stakeholder bzw. des Auftraggebers entspricht. Daher ist es essentiell, dass man implizite Annahmen zu expliziten (Qualitäts-) Anforderungen macht.
Vor dem Kurs war mir die genaue Abgrenzung zwischen Qualitätsziel und Qualitätsmerkmal nicht klar. Während dem Kurs haben wir intensiv diskutiert – dazu meine Notizen:

  • Qualitätsmerkmale
    • „Mögliche Eigenschaften einer Anwendung“
  • Qualitätsziele
    • „Vorhaben spezifische Ziele, welche sich aus den Qualitätsmerkmalen zusammensetzen.“

Qualitätsziele kann man mittels Qualitätsanforderungen, beschrieben als Szenarien, gemeinsam mit den Stakeholder ermitteln. Dabei priorisiert man ermittelten Qualitätsziele und selektiert die höchst priorsierten 3 – 5 Ziele für das eigene Vorhaben. Die Herausforderung ist dabei, die Qualitätsmerkmale auszubalancieren, z.B. ‚Wartbarkeit‘ vs. ‚Effizienz‘ (Beispiel Modellierung eines Schachfeldes mittels mehrdimensionalen Arrays [8][8] vs. Bitfelder). Die Ermittlung der Qualitätsziele aus den Qualitätsmerkmalen ist dabei immer eine Wechselwirkung: Effizienz vs. Wartbarkeit, Sicherheit vs. Benutzbarkeit (z.B. Two-Factor Authentifizierung, Einsatz von Captchas, etc.), Portierbarkeit vs. Effizienz (Standard SQL vs. T-SQL), Zuverlässigkeit vs. Kosten. Das ganze Entwicklungsteam kennt und verfolgt während der Implementierung die Erreichung der definierten Qualitätsziele. Die definierten Qualitätsziele ermöglichen zu einem späteren Zeitpunkt dem Entwickler-Team Entscheidungen anhand der Ziele zu argumentieren (z.B. wieso eine ‚Schichten-Architektur‘) – siehe auch späteres Kapitel ‚Lösungsstrategie finden‘.

Qualitätsmerkmale konkretisieren
Qualitätsmerkmale sind meistens nicht konkret genug, um entsprechende Qualitätsanforderungen zu evaluieren, Lösungsstrategien abzuwägen und/oder Entscheidungen zu bewerten. Vielfach sind diese auch schwer messbar.
Mit Szenarien können Qualitätsmerkmale konkretisiert werden. Ein Szenario besteht aus einem kurzen Text, welcher beispielhaft die Verwendung des Systems beschreibt. Das Qualitätsmerkmal spielt dabei die Hauptrolle. Das Ziel soll sein, mittels Szenarion über die entsprechenden Qualitätsmerkmale diskutieren zu können. Zusätzlich sollte man sie dadurch auch überprüfen können. Man unterscheidet zwischen den folgenden drei Kategorien von Szenarien. Die Kategorien zielen dabei auf unterschiedliche Qualitätsmerkmale.

  • Verwendungsszenarien: Verwendung des Systems durch einen entsprechenden Akteur.
    • z.B. Qualitätsmerkmal Benutzbarkeit
  • Änderungszenarien: Es wird etwas am System verändert.
    • z.B. Skalierbarkeit oder Wartbarkeit
  • Fehlerszenarien: Es kommt zu unerwarteten Ereignissen.
    • z.B. Robustheit

Szenarien bestehen typischerweise immer aus einer Quelle, einem Auslöser, einem Artefakt / Umgebung, einer Antwort sowie ein entsprechendem Antwort-Mass. Logischerweise kann man nicht erwarten, dass die entsprechenden Attribute immer in dieser Form kommen. Jedoch ist es möglich die Szenarien immer anhand dieser Form herzuleiten. Wichtig ist, dass es kein Szenario gibt ohne Quelle und Auslöser – darauf sollte man achten.

Im Kurs wurde ein weiteres Mittel für die Konkretisierung von Qualitätsmerkmale vorgestellt.  Dabei geht es darum verschiedene Werte für die Erfüllung bzw. nicht-Erfüllung einer Qualitätsanforderung zu definieren. Das Modell stammt ursprünglich von einem Herr Gilb. Um eine Qualitätsanforderung zu konkretisieren werden Werte zu folgenden Eigenschaften definiert. Die folgende Grafik zeigt die Einordnungsmöglichkeiten von entsprechenden Qualitätswerten.

Qualitätsanforderungen konkretisieren

Es geht dabei mit den Stakeholder (Qualitäts-) Werte einordnen zu können, um ein Gefühl zu bekommen, was der erwartete Wert ‚Zielwert‘ ist. So werden die Erwartungen bereits zu Beginn des Vorhabens geglättet.

Mit Prinzipien das Team befähigen.
Das vorherige Kapitel beschreibt ‚Architekturprinzipien‘ als besonders wichtig für den Start eines Vorhabens. Prinzipien befähigen das Entwicklungsteam Entscheide zu treffen. Dabei schaffen Architekturprinzipien ein gemeinsames Verständnis wie wiederkehrende Probleme gelöst werden können (!) oder ermöglichen die Förderung eines ganz bestimmten Architekturstils. Prinzipien sind langlebiger als konkrete Lösungen.  Aus meiner Sicht können Prinzipien ein wertvolles Mittel sein, wenn es nicht DEN Software-Architekt im Team gibt. Wichtig ist, dass diese Prinzipien projektspezifisch formuliert werden.

Architektur Vision als Team-Gedanke
Wie oben beschrieben sind Prinzipien ein Mittel um das Entwicklungsteam zu befähigen Architektur-Entscheidungen herleiten zu können. Neben den Prinzipien gibt es auch noch Elemente wie Randbedingungen, Einflussfaktoren sowie ein zu verfolgendes Architekturmuster, welche Entscheidungen massgäblich beeinflussen. Die Informationen zu diesen Elementen sollte in einer Architektur-Vision (teilweise) gemeinsam mit dem Entwickler-Team erarbeitet und entsprechend dokumentiert werden. So haben auch neue Entwickler die Chance schnell vergangene Entscheidungen zu verstehen, aber auch zukünftige Konzepte danach ausrichten zu können. Persönlich finde ich die Bezeichnung ‚Architektur Vision‘ sehr passend.

Lösungsstrategie finden
Während dem Kurs wurde ein einfaches Instrument für die Erarbeitung einer Lösungsstrategie präsentiert. Die Lösungsstrategie ermöglicht die Evaluierung, Entscheidung und Kommunikation bestimmter Architekturansätze. Das Instrument ist eine einfache Tabelle mit zwei Spalten – Qualitätsziele und die dafür definierten Architekturansätze. Die folgende Tabelle zeigt den möglichen Aufbau einer solchen Tabelle.

Lösungsstrategie erarbeiten

In der linken Spalte führt man die bereits vorgängig definierten Qualitätsziele und rechts die dafür gedachten Architekturansätze. Die Architekturansätze können unterschiedlicher Art sein:

  • Architekturstile – und Muster, wie z.B. Schichten-Architektur, MVC, CQRS, REST, Microservices, etc.
  • Technologieentscheidungen, wie z.B. Programmiersprachen (z.B. Java oder .NET), Einsatz von Frameworks, etc.
  • Prinzipien, wie z.B. ‚Wenn möglich Open-Source einsetzen‘
  • Spezifisch zu verfolgende Konzepte

Durch diese Tabelle können verfolgte Lösungsstrategien argumentiert und verfolgt werden. Zusätzlich dient es einem Software-Architekt als gutes Kommunikationsmittel gegenüber unterschiedlichen Stakeholdern (und auch Kritikern ;-)) – sämtliche Entscheide können über die vorgängig definierten bzw. übergeordneten Qualitätsziele argumentiert werden.

Dokumentation unterstützt Kommunikation
Die Dokumentation ist essentiell – wichtig ist nicht, dass sie vollständig ist, sondern aktuell und angemessen. „Zu viel“ Dokumentation wie auch „Der Source-Code dokumentiert die Architektur.“ passt nicht. Die Schwierigkeit liegt grundsätzlich darin, genau so viel wie nötig zu dokumentieren. Eine Möglichkeit für die Strukturierung von Dokumentation von Architektur-Konzepten bietet die arc42 Vorlage. Im Kurs wurden die sieben Regeln für Dokumentation vorgestellt:

  1. Schreibe aus Sicht des Lesers
  2. Vermeide unnötige Wiederholungen
  3. Vermeide Mehrdeutigkeit und erkläre deine Notation
  4. Verwende eine Standardstrukturierung
  5. Halte Begründungen für Entscheidungen fest
  6. Halte Dokumentation aktuell (aber auch nicht zu aktuell)
  7. Überprüfe Dokumentation auf Gebrauchstauglichkeit

Software-Architektur bewerten
Neben dem Entwurf von Architekturen ist eine Disziplin des Software-Architekten auch das Bewerten von Software-Architekturen. Hier wurde während dem Kurs auf die verbreitete Bewertungsmethodik ‚ATAM‘ – Architecture Tradeoff analysis method eingegangen. ATAM kann früh angewendet werden und ist szenarienbasiert. ATAM ermöglicht, dass Entscheidungen transparent aufgedeckt werden, Feedback gegeben werden kann und Klarheit herrscht.

Wichtig: Es ist nie zu spät eine Architektur zu bewerten. Bewertungen können jederzeit durchgeführt werden und sollten auch vorgesehen und eingeplant werden.

Aufgabe und Rolle des Software-Architekten
Die Rolle des Software-Architekt ist anspruchsvoll. Zu seinen Aufgaben zählen (aus dem Buch ‚Effektive Software-Architekturen von Gernot Starke‘):

  • Anforderungen und Randbedingungen klären
  • Strukturen entwerfen
  • Technische Konzepte entwerfen
    • Architektur kommunizieren
    • Umsetzung begleiten
    • Architektur bewerten

Die Rolle des Software-Architekten ist aktiv, d.h. er geht Aufgaben pro-aktiv an, holt alle notwendigen Stakeholder zusammen, hält Randbedingungen ein, hat immer das sogn. ‚ Big-Picture‘ im Hinterkopf und strebt zugleich nach Einfachheit. Software-Architektur berührt alle Disziplinen der IT: Anforderungsmgmt, Betrieb, Projektmanagement, Implementierung und Design sowie die Berücksichtigung von technischen und organisatorischen Einflussfaktoren.

Ein wichtiger Aspekt in Projekten ist zugleich: Projektziele sind kurzfristig, Architekturziele aber langfristig!

Dies und das.
Folgende interessante Dinge wurden während dem Kurs genannt:

Discovery-Review„: Möglichst früh Architektur-Vision in den Review geben.
Architecture-Speeddating„: Unter Zeitdruck unterschiedliche Sichten der Software-Architektur des eigenen Systems zeichnen und einem Kollegen präsentieren.
Starschnitt“ – siehe http://update.hanser-fachbuch.de/tag/arc42-starschnitt/

Buch
Folgendes Buch dient als Vorbereitung für den Kurs:
Effektive Software-Architekturen von Gernot Starke