Spring und HTML5: Frühling für den Browser

Caching

Caching ist ein integraler Bestandteil von performanten und skalierbaren Webanwendungen. Dazu kennen Browser einen zeitgesteuerten Cache über HTTP-Header (Expires und Cache-Control) sowie einen Cache der über Tokens (so genannte E-Tags) gesteuert wird. Spring liefert zur Implementierung eines zeitgesteuerten (org.springframework.web.servlet.mvc.WebContentInterceptor) sowie des Token-gesteuerten (org.springframework.web.filter.ShallowEtagHeaderFilter) Cachings bereits funktionierende Klassen mit. Mit HTML5 wird das Caching um einen Application Cache erweitert. Ziel dessen ist es eine zentrale Konfiguration, ein so genanntes Cache-Manifest für sämtliche Artefakte einer Webanwendung zu haben. Durch das Manifest kann das Caching-Verhalten für einzelne Dateien bei Online- sowie Offlinebetrieb des Browsers festgelegt werden. Mithilfe dessen können bedingt offlinefunktionsfähige Anwendungen erstellt werden, die vor allem robuster gegenüber Verbindungsabbrüchen sind. In Spring-Anwendungen ist für den Application Cache keine weitere serverseitige Unterstützung notwendig. Das Cache-Manifest kann in den JSP-Dateien eingebunden und als Datei auf dem Server bereitgestellt werden. Folgender Code zeigt die Verwendung des Application Cache in der JSP-Datei:

  
Webapplikationen

Wie bereits beschrieben, lassen sich Webanwendungen mithilfe von HTML5-Erweiterungen und JavaScript Schritt für Schritt aufwerten. Mit der Zeit führen die meist unstrukturierten JavaScript-Anteile jedoch zu einer großen und schlecht wartbaren Ansammlung von Quellcode. Spätestens dann wird es Zeit, sich über die grundsätzliche Struktur der Applikation Gedanken zu machen. Wenn man den eingeschlagenen Weg vom Server hin zum Browser weiter geht, wandern die Verantwortlichkeiten vermehrt vom Server zum Browser. Die gesamte Steuerung der Interaktivität erfolgt nun im Browser selbst, der Server stellt lediglich Dienste für den Browser zur Verfügung.

Abb. 1: Architektur einer clientseitigen Webapplikation

Abbildung 1 zeigt, wie mit mithilfe von AngularJS [6] und Spring MVC [7] eine solche Architektur umgesetzt werden kann. AngularJS ist ein Framework, das zum Ziel hat, die Erstellung von Applikationen in JavaScript so einfach und sauber wie möglich zu machen. Dafür wird das klassische MVC-Pattern auf dem Client genutzt. Das Modell sind klassische JavaScript-Objekte, die sämtliche Daten zur Anzeige enthalten. Die View ist definiert durch HTML-Markup, dessen Möglichkeiten durch AngularJS erweitert werden. Dadurch können Expressions, Databinding und Templating in puren HTML-Seiten verwendet werden. Der Controller ist eine JavaScript-Funktion, die auf Eingaben und Aktionen durch den Benutzer reagiert. Der Controller erhält durch das Framework einen Zugriff auf das aktuelle Modell und fordert nötigenfalls Daten vom Server an.

Ein erstes Beispiel ist in Listing 5 zu sehen. Das Attribut ng-app dient dazu AngularJS zu initialisieren, wohin gegen ng-model die Verbindung zwischen einem Eingabefeld und dem Modell herstellt. Der Inhalt des Eingabefeldes ist an das Attribut name im Model gekoppelt. Diese Kopplung ist beidseitig, d. h. wenn sich das Eingabefeld ändert, ändert sich das Modell, und wenn sich das Modell ändert, wird der Wert im Eingabefeld angepasst. Um Werte aus dem Modell anzuzeigen, können Ausdrücke wie {{name}} verwendet werden. Das Resultat wird sichtbar, sobald Eingaben in dem Feld getätigt werden: Bei jedem Tastendruck wird das Model aktualisiert, dadurch werden die Änderungen sofort visualisiert. Mit diesem simplen aber mächtigen Mechanismus wird der Entwickler davon befreit, sich direkt mit DOM-Manipulationen zu beschäftigen. Dieses Vorgehen bedeutet nicht nur eine Erleichterung für den Entwickler. Auch die Testbarkeit des Codes steigt dadurch enorm, da Unit Tests außerhalb des Browser ausgeführt werden können.

Listing 5
 
Name: Hallo {{name}}!
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.