Blog

MVVM

JavaScript für Java Enterprise-Entwickler – Teil 3 – KISS-Architekturen im Frontend

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. Stabilität SW Schichten nach Oliver Zeigermann

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

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

UI-Bindings

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

View ViewModel Model

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?

Holisticon AG — Teile diesen Artikel

Über den Autor

Avatar

Mr Norman Erck M.Sc. started developing websites as a teen in 1999 driven by his fascination for the possibilities of the rising e-business technologies. He is now a certified ScrumMaster and Enterprise- Software-Architect who has worked on e-business projects for over seven years. He takes the role of a scrum master and architect for IT projects in large companies. He is a speaker on conferences about CDI as well.

Antwort hinterlassen