MVC Pattern und die Umsetzung in verschiedenen Frameworks

In diesem Artikel wird die Umsetzung des MVC Patterns (Model View Controller) – eines der bekanntesten Architekturmuster – in zwei unterschiedlichen Frameworks erläutert. Dabei werden folgende Frameworks betrachtet:

  • JSF (JavaServer Faces), ein Framework zur Entwicklung von grafischen Benutzeroberflächen für Webapplikationen
  • AngularJS + Java Enterprise Edition (Java EE), ein Open Source-Framework von Google, mit dem Entwickler in HTML und JavaScript Single Page Webanwendungen nach einem MVC (Model View Controller)-Muster erstellen können.

Im Internet gibt es unzählige Beiträge, die diese Technologien miteinander vergleichen. Dieser Artikel konzentriert sich hauptsächlich auf die Umsetzung des MVC Patterns. Im nächsten Unterkapitel wird das MVC Pattern erklärt. In Kapitel 2 und 3 wird auf die Umsetzung des MVC Patterns in den verschiedenen Technologien eingegangen und die Nachteile bei der Umsetzung werden aufgezeigt.

1. MVC Pattern

Das MVC Pattern ist ein Architekturmuster zur Strukturierung von Applikationen in drei Schichten: Daten (Model), deren Darstellung (View) und die Interaktion mit dem Benutzer (Controller). Es gibt verschiedene visuelle Darstellungen des MVC Pattern. Die Darstellungen unterscheiden sich zumeist minimal, aber doch entscheidend für die Interaktion zwischen den verschiedenen Schichten. Abbildung 1 zeigt eine mögliche Darstellung, die in diesem Artikel als Referenz herangezogen wird.

 

Abbildung 1: Interaktion zwischen den Schichten

Abbildung 1: Interaktion zwischen den Schichten

Model

Im Model sind die darzustellenden Daten enthalten. Es nimmt Informationen vom Controller entgegen und speichert/manipuliert diese. Das Model enthält zumeist die Businesslogik oder Teile davon.

View

Ist für die Darstellung der Daten aus dem Model zuständig und leitet Benutzerinteraktionen an den Controller weiter.

Controller

Der Controller nimmt Informationen von der View entgegen und bearbeitet diese entsprechend weiter. Zumeist werden die Informationen an die Model-Schicht weitergereicht. Zu Ausnahmen kann es zum Beispiel kommen, wenn Teile der Businesslogik in der Controller-Schicht liegen (zum Beispiel die Validierung von Benutzereingaben).

2. Umsetzung des MVC Patterns in JavaServer Faces (JSF)

In JavaServer Faces (JSF), Teil des JavaEE Frameworks, sind die Schichten auf den ersten Blick nicht klar erkennbar. Die Abgrenzung zwischen den Schichten ist nicht immer eindeutig und liegt auch im Auge des Betrachters. Abbildung 2 zeigt die Umsetzung des MVC Patterns in JSF.

Abbildung 2: MVC in JSF

Abbildung 2: MVC in JSF

Model

Den Einstiegspunkt in die Model-Schicht stellen die Backing-Beans dar. In der Model-Schicht ist die Businesslogik mit Services, Data Access Objects (DAOs) und Entities.

View

Die View-Schicht besteht ausschließlich aus den in HTML eingebetteten JSF-Tags. Die JSF-Tags werden in normale HTML Tags umgewandelt und dem Aufrufer übermittelt.

Controller

Der Controller ist im Framework eingebettet. Fälschlicherweise werden die Backing-Beans oft als das Steuerelement bezeichnet. Das liegt vermutlich daran, dass die Beans zumeist für den Entwickler als der serverseitige Einstiegspunkt gesehen werden. Den eigentlichen Controller bildet aber das FacesServlet. Das FacesServlet nimmt Anfragen entgegen und leitet den JSF-Lebenszyklus für die einzelnen Anfragen.

MVC Schwächen in JSF

  • Der Controller ist im Framework verankert.
  • Die View-Schicht und die Model-Schicht sind über die Backing-Beans eng verzahnt, sodass die View nicht durch eine andere Komponente ersetzt werden kann, ohne dabei die Model-Schicht zu ändern.

3. Umsetzung des MVC Patterns in AngularJS + JavaEE

Als Alternative zu JSF existieren zahlreiche Technologien, die auf eine lose Kopplung zwischen der View- und der Controller-Schicht basieren. In diesem Abschnitt wird die Umsetzung des MVC Patterns in AngularJS beschrieben. AngularJS ist eine JavaScript Bibliothek, die für SPAs (Single Page Applications) verwendet wird. In Verbindung mit JavaEE können lose gekoppelte Applikationen entwickelt werden.

Hier ist zu beachten, dass MVC in zwei verschiedenen Ebenen betrachtet werden muss, da alleine mit AngularJS in Verbindung mit HTML nach dem MVVM-Pattern (Model View ViewModel) Single Page Applications erstellt werden können. MVVM ist eine Variation des MVC-Patterns zur Trennung der View von der Logik der Benutzerschnittstelle. Abbildung 3 zeigt die Interaktionen. Die ViewModel-Schicht ist das Bindeglied zwischen der View und dem Model (data binding). Sie tauscht Daten aus und ruft JavaScript Methoden auf.

Im Folgenden wird auf die MVC Komponenten eingegangen. Die ViewModel-Schicht des MVVM-Patterns wird dabei außer Acht gelassen, da sie für die Implementierung des AngularJS-Frameworks dient.

Abbildung 3: MVC in AngularJS mit JavaEE

Abbildung 3: MVC in AngularJS mit JavaEE

Model

Die Businesslogik wird (fast nur) mit JavaEE realisiert. Die Benutzereingaben werden wie schon bereits erwähnt an JavaScript-Variablen gebunden. Diese können clientseitig validiert oder ohne bearbeitet zu werden an den JavaEE-Server geschickt werden. Es kann damit zwischen zwei Model-Schichten unterschieden werden. Wobei die eine Schicht hauptsächlich für die Entgegennahme der Benutzereingaben zuständig ist, die über HTTP an den JavaEE-Server geschickt werden, wohingegen die zweite Schicht vom Controller angesprochen wird und die erwünschten Manipulationen/Operationen durchführt.

View

Die View besteht aus ganz normalem HTML, das mit AngularJS-Direktiven erweitert wird. Zu der View müssen die Aufrufe in JavaScript programmiert werden. Durch Data-Binding werden die Benutzereingaben an JavaScript-Variablen gebunden. Die Ergebnisse der Anfragen werden in Callbacks aufgearbeitet und an die View über die ViewModel-Schicht übermittelt. In Abbildung 4 wird mit JSON.stringify($scope.data) das vom Backend gelieferte Ergebnis in ein Array ($scope.products) geschrieben, über das durch AngularJS-Direktiven im HTML Code durchiteriert werden kann (Abbildungen 4 und 5).

Abbildung 4: REST Call

Abbildung 4: REST Call

Abbildung 5: Produkt-Iteration

Abbildung 5: Produkt-Iteration

Controller

Die Controller-Schicht wird über eine REST Schnittstelle angesprochen. Der Controller kann als ein Servlet implementiert werden. Daneben gibt es zahlreiche andere Frameworks für die Implementierung von RESTful Web Services in Java, zum Beispiel JAX-RS. Für die Übertragung der Daten zwischen dem Backend und der View können verschiedene Datenformate (XML, JSON, CSV, HTML) verwendet werden. Da AngularJS eine JavaScript Bibliothek ist, ist es naheliegend JSON zu verwenden. Der Controller übernimmt die Validierung von Benutzereingaben, wertet diese aus und leitet sie an die Model-Schicht weiter.

Nachdem eine Anfrage in der Businesslogik abgearbeitet wurde, wird das Ergebnis über den Controller an die View zurückgegeben. Das Format für die Rückgabewerte kann frei gewählt werden, aber es ist zu empfehlen das gleiche Format zu verwenden wie für die eingehenden Anfragen.

4. MVC-Schwächen in AngularJS + JavaEE

Die Trennung der Schichten ist auf Grund der Tatsache, dass AngularJS ohne JavaEE bereits nach dem MVVM-Pattern entwickelt wurde, nicht ganz eindeutig.

5. Fazit

Über die Vor- und Nachteile der beiden Technologien (bzw. Architekturen) gibt es unzählige Berichte und Gegenüberstellungen im Internet. Beide Technologien weisen Schwächen in der Umsetzung des MVC-Patterns auf. JSF zeigt deutliche Schwächen bezüglich loser Kopplung zwischen den Schichten. Oberflächen-Entwickler müssen sich gut mit den Backend-Entwicklern absprechen, um nicht aneinander vorbei zu entwickeln. Da liegt der große Vorteil von AngularJS. Die REST Schnittstelle unterstützt eine lose Kopplung zwischen der View- und Controller Schicht.

Entscheidend für die Auswahl eines Frameworks ist natürlich nicht nur die Unterstützung von erwünschten Architekturmustern. Viel entscheidender sind die Funktionen, die die Frameworks anbieten und welche für die zu entwickelnde Software notwendig sind.

 

Posted in Uncategorized.