Pimp my Legacy Webapp! Integration von AngularJS und Struts1

Im privaten Umfeld und im Geschäftsalltag verbreiten sich moderne Webtechnologien immer rasanter. Bei der Wartung alter Webanwendungen, sprich „Legacy Webapps“ gerät man deshalb unter den Druck, ähnliche Features sowie eine möglichst komfortable Benutzerführung bereitzustellen. Dies ist jedoch mit den vorhandenen Technologien gar nicht oder nur mit sehr hohem Aufwand möglich. Um die gewünschten Anforderungen umzusetzen, ist daher die Integration moderner JavaScript Frameworks in Legacy Webapps unumgänglich.

Nach der Lektüre dieses Artikels sollten Ihnen die wichtigsten Unterschiede von Legacy Webapps und modernen JavaScript Apps klar sein, damit auch Sie ihre Legacy Webapps mit AngularJS pimpen können!

Warum nicht einfach jQuery verwenden?

jQuery ist nun seit einigen Jahren eines der beliebtesten JavaScript-Frameworks am Markt. Im Vergleich zu purem JavaScript bietet es auch bahnbrechende Neuerungen und steigert die Entwicklungsgeschwindigkeit enorm. jQuery in eine bestehende Webanwendung zu integrieren ist sehr einfach möglich, da einfach die benötigte jQuery-Bibliothek in den HTML-Code eingebunden werden muss. Die Architektur der Anwendung wird dadurch nicht beeinflusst. Die leichte Integration kommt daher, dass jQuery nur auf dem bestehenden HTML-Code arbeitet und gezielt DOM-Elemente manipuliert. Zumeist werden hier nur optische Anpassungen an bestehenden HTML-Seiten gemacht. Ein Beispiel sind die UI-Elemente von jQuery UI, mit denen sich schöne Dialoge und andere UI-Komponenten darstellen lassen. Die Steigerung der Benutzerfreundlichkeit kann mit jQuery sehr gut verbessert werden; die Entwicklungsgeschwindigkeit erhöht sich allerdings noch in unbefriedigendem Umfang.

JavaScript-MVC-Frameworks

Große Geschwindigkeitsvorteile bei der Entwicklung ergeben sich hingegen, wenn man eines der in den letzten Jahren immer populärer werdenden JavaScript-MVC-Frameworks einsetzt. Der prominenteste Vertreter dieser Gattung ist das von Google entwickelte AngularJS. Die Suchanfragen bei Google sind für AngularJS im Vergleich zu den konkurrierenden Frameworks deutlich höher [1]. Im Rahmen der Übersichtlichkeit wird hier auf einen Vergleich der konkurrierenden Frameworks verzichtet. Eine gute Übersicht findet sich aber auf der Webseite TodoMVC [2].

Das MVC-Prinzip ist ein alter Bekannter in der Softwareentwicklung und fand bisher hauptsächlich in der Rich-Client-Entwicklung Verwendung. Die Übertragung des MVC-Prinzips auf die Webentwicklung kommt jedoch einer kleinen Revolution gleich. Denn im Vergleich zu Frameworks wie jQuery, führen MVC-Frameworks aufgrund ihres höheren Abstraktionsniveaus zu deutlich höherer Entwicklungsgeschwindigkeit und besserer Codequalität. Aufgrund der klaren Trennung zwischen Model, View und Controller lassen sich zudem deutlich besser testbare Anwendungen erstellen.

Was ist AngularJs?

In AngularJS werden mit HTML-Code deklarativ die Oberflächen gestaltet. Ein wichtiger Aspekt ist, dass Anwendungslogik nur in den JavaScript-Dateien definiert wird. Dieser sollte weitmöglichst unabhängig von der Oberfläche sein. Im Gegensatz zu manch anderen MVC-Frameworks erweitert AngularJS den HTML-Code aber nur, anstatt ihn zu abstrahieren.

Um einen Bereich einer HTML-Seite von AngularJS verwalten zu lassen, muss dieser von einem Element mit dem Attribut „ng-app“ umschlossen sein. Nach dem Laden der Seite sucht AngularJS nach dem Atrribut „ng-app“ und analysiert den davon umschlossenen Bereich.

„Controller“ werden in AngularJS mit dem Attribut „ng-controller“ definiert. Controller und View kommunizieren über den „Scope“, einen Container auf dessen Inhalt von beiden Seiten aus zugegriffen werden kann. Mit der „{{}}“ Notation kann mittels einem One-Way-Binding im HTML auf Elemente des „Scope“ zugegriffen werden. Die Daten können angezeigt, aber nicht zurückgeschrieben werden. Two-Way-Bindings ermöglichen auch das Schreiben in den „Scope“ und können logischerweise nur an HTML-Input-Elementen verwendet werden.

Die Beispiele in Listing 1 und Listing 2 zeigen eine simple AngularJS-Anwendung. In Listing 1 sehen wir die Definition der App „myModule“ und des Controllers „MyCtrl“. In Zeile 2 wird dann über ein One-Way-Bindung die Länge der im „Scope” definierten Liste „list“ ausgegeben. Danach folgt in den Zeilen 3-8 mit der AngularJS-Anweisung „ng-repeat“ die Iteration über alle Elemente der Liste „list“. Innerhalb jedes „<li>“ Elementes wird der Inhalt der Property „text“ jedes Listenelementes ausgegeben. In Zeile 5 als Two-Way-Bindung in einem Eingabefeld, in Zeile 6 als One-Way-Binding.

Schon an diesem simplen Beispiel zeigt sich die Leichtigkeit von AngularJS. Der HTML Code ist einfach zu verstehen, enthält jedoch keine Logik. Durch das von AngularJS kontrollierte Binding ändert sich die Anzeige in Zeile 6, sobald in Zeile 5 ein Wert geändert wird. Der vergleichbare jQuery Code wäre deutlich länger!

Listing 1

Listing 2 zeigt den zugehörigen Controller „MyCtrl“. Als Funktionsparameter wird in Zeile 2 von AngularJS der „Scope“ injiziert. Dies demonstriert wie simpel Dependency Injection in AngularJS ist. „Controller“ sind aufgrund von Dependancy Injection sehr gut testbar, worauf bei der Entwicklung von AngularJS von Anfang an sehr großen Wert gelegt wurde. In Zeile 3-5 erfolgt dann eine Zuweisung einer Liste von Objekten an den „Scope“

Listing 2

Auch zur Teilmigration?

Obwohl AngularJS eigentlich für Single-Page-Anwendungen gedacht ist, kann es auch für andere Zwecke „missbraucht“ werden. Vielleicht will man im ersten Schritt ja nur einen kleinen Teil einer Webseite „hübscher“ machen. Mit AngularJS ist dies kein Problem, denn es werden ja nur die von einem Element mit dem Attribut „ng-app“ umschlossenen HTML-Elemente analysiert.

Da AngularJS relativ leichtgewichtig ist und schnell initialisiert wird, kann man es auch zur Gestaltung der Oberflächen einer serverseitigen Webanwendung verwenden. Wenn der JavaScript Code in Dateien ausgelagert wurde, wird dieser gechached und kostet keine wertvolle Ladezeit. Die Initialisierung von AngularJS nach dem Seitenaufruf geschieht sehr schnell und kann quasi vernachlässigt werden.