Nachdem mein Kollege Oliver Ochs schon über Historie und Grundlagen von JavaScript und den Buildprozess mit Grunt gebloggt hat, stellt dieser Beitrag KISS-Architekturen und ihre Umsetzung mit AngularJS vor.

KISS-Architekturen

KISS steht für „Keep it Simple and Stupid“ und auch, wenn wir alle super Enterprise-Architekten sind, freuen wir uns, wenn es einfach einfach ist. Genau diesen Ansatz fahren KISS-Architekturen.

Warum?

Oft werden Probleme auf Basis von Architektur-Blueprints angegangen, die Lösungen für generische Probleme darstellen sollen. Sie definieren jedoch Lösungen, bevor das eigentliche Problem analysiert und verstanden wurde. Architekturen sind jedoch lebendig; ihre Anforderungen ändern sich und diese Änderungen müssen sich in der Architektur widerspiegeln. Ein einfaches Beispiel, das diese These untermauert, ist das der Stabilität einzelner Schichten in Software.

Die Datenbankschicht ist in der Regel stabil, die Geschäftslogik wird erweitert oder ändert sich mit den Anforderungen, und die UI Schicht ändert sich am häufigsten. So wird beispielsweise HTML5 eingeführt, JSF abgelöst oder ein JS-Framework für die UI-Schicht genutzt.

Wie?

Ein schlankes UI-Framework muss her, das sich nur im die UI kümmert. So wird vermieden, dass UI mit in der Geschäftslogikschicht implementiert wird, was  z.B. bei JSF-Anwendungen nicht immer umgangen werden kann.

UI-Framework

UI-Frameworks in JS gibt es wie Sand am Meer. Knockout, Ember, Backbone.js und natürlich AngularJS sind wohl die prominentesten Vertreter. Wer sich die Vielzahl der Frameworks anschauen möchte, findet eine Beispielapplikation mit verschiedenen Frameworks implementiert unter http://todomvc.com/.

Entwurfsmuster

Für die Implementierung einer Anwendung mit einem schlanken UI-Framework gibt es unterschiedliche Entwurfsmuster.

Model View Controller

Der Controller bereitet die Daten des Models für die View auf und stößt die Auslieferung der View an. Werden Daten in der View modifiziert, so werden diese über den Controller an das Model kommuniziert.

UI-Binding

Einige Frameworks arbeiten mit UI-Bindings oder auch Data Binding d.h., Änderungen am Model werden direkt der View kommuniziert und Änderungen der Daten in der View direkt ins Model geschrieben.

Model View ViewModel

Die View ist auch hier für die Präsentation der Daten zuständig. Das ViewModel verwaltet das Verhalten und den Zustand der View und macht Daten des Models verfügbar. Zwischen ViewModel und View existiert ein Data Binding. Ändern sich Daten im ViewModel, werden sie direkt an die View kommuniziert. Werden Daten in der View geändert, werden sie über das ViewModel an das Model kommuniziert.

Im nächsten Beitrag werden wir ein Beispiel dazu mit AngularJS implementieren. Nutzt Ihr AngularJS bereits in der Praxis?