Warum JavaScript Template Engines Zeit einsparen

2. Mai 2012Patrick Dahms

Wer für die Entwicklung einer Applikation den Einsatz einer JavaScript-Architektur plant, wird neben diversen MVC- und Kommunikations-Frameworks zwangsläufig auf die JavaScript Template Engines stoßen. Zunächst stellt sich jedoch die Frage: Warum brauche ich neben der serverseitigen Engine eine weitere Template Engine in meinem Projekt?

Je mehr Funktionalität und Logik in den Client fließt, desto mehr steigt in der Regel auch der Kommunikationsaufwand mit dem Backend – Stichwort AJAX. Die Informationen, die das Backend liefert, muss das JavaScript in der Oberfläche darstellen. Wenn diese Informationen aber nicht nur als reiner Text dargestellt werden, sondern sich nahtlos in das Design integrieren sollen, müssen sie in HTML verpackt werden. Dafür gibt es verschiedene Möglichkeiten:

  • Das Backend liefert fertiges HTML, welches nur noch vom JavaScript dem DOM hinzugefügt wird
  • Das Backend liefert nur die reinen Daten (in Form von Text, XML oder JSON). Im JavaScript wird programmatisch das HTML zusammengebaut und dem DOM hinzugefügt
  • Das Backend liefert nur die reinen Daten. Die Daten werden einem JavaScript Template übermittelt und das Ergebnis zum DOM hinzugefügt

Alle drei Möglichkeiten haben ihre Vor- und Nachteile. Im nachfolgenden Beispiel gehe ich auf die Unterschiede zwischen den letzten beiden Punkten etwas genauer ein.

Mit Frameworks wie jQuery ist es ein Leichtes, simple AJAX-Aufrufe abzuschicken und das Ergebnis effektiv in das aktuelle Layout zu platzieren. Mit einer einfachen String-Verkettung wird das HTML manuell zusammengesetzt. Anfangs ist das noch relativ einfach:

$(„#container“).append(„<div>“ + responseText + „</div>“);

Der jQuery-Ausdruck selektiert das DOM-Element mit der ID container und fügt diesem ein div-Element mit dem Inhalt von responseText hinzu. Achtung: responseText wird hier nicht escaped.

Jeder, der schon einmal dynamische Oberflächen oder Templates entwickelt hat, weiß bereits, dass dieses Vorgehen recht schnell an seine Grenzen stößt. Mit der Zunahme von Bedingungen, Sonderfällen und Schleifen verliert das eigene Template schnell an Übersicht und Wartbarkeit. Angenommen, wir müssten in diesem Beispiel für bestimmte Inhalte im responseText dem div-Element eine CSS-Klasse hinzufügen. Dann hätten wir bereits die erste if-Abfrage in unserem Script-Template.

Die meisten JavaScript Template Engines funktionieren nach dem gleichen Schema. Wir schreiben HTML und ersetzen Parameterdaten, Bedingungen und Schleifen mit Platzhaltern der Engine. Das Beispiel von oben könnte dann wie folgt aussehen:

<script id=“template“ type=“text/js-template-engine“>
     <div>{{responseText}}</div>
</script>

Durch das Script-Tag mit korrektem type-Attribut deklarieren wir das Template direkt in unserer HTML-Datei (nicht in der JavaScript-Datei). Sämtliche Browser ignorieren den Inhalt des Blocks. Er kann dennoch von einem Script ausgelesen werden. Für die Nutzung des Templates müssen wir vorher noch zwei Schritte durchführen:

  • Wir müssen das Template als HTML-String holen. Kein Problem mit jQuery.
  • Wir müssen diesen HTML-String von einer Template-Engine für den Einsatz vorbereiten (kompilieren). An dieser Stelle können sich die verschiedenen Engines unterscheiden. Die meisten funktionieren aber nach genau diesem Prinzip.

Die beiden Schritte sehen mit der Template Engine Handlebars wie folgt aus:

var templateHtml = $(„#template“).html(),
     getResponseHtml = Handlebars.compile(templateHtml);

Die Schritte können auch unabhängig vom eigentlichen Aufruf gemacht werden – zum Beispiel direkt nach dem Laden der Seite. Jetzt fehlt noch das Einbinden des Templates an der richtigen Stelle im Quellcode. Dies funktioniert mit der Closure-Funktion der Engine. Alle übermittelten Eingaben an die Engine werden automatisch escaped.

$(„#container“).append(getResponseHtml(ajaxRepsonseData));

Einer der Vorteile der Templates ist, dass diese komplett losgelöst vom eigentlichen JavaScript Code im HTML ausgeliefert werden. Angenommen, der Response-Inhalt ändert sich, dann muss nur das HTML-Template geändert werden. Das JavaScript muss an keiner Stelle angepasst werden. Davon profitieren vor allem die Content-Management-Systeme, die damit wesentlich einfacher Seiten- und Absatztemplates erstellen können.

Die Auswahl von Engines hat sich im letzten Jahr stark erhöht. Komplett neu ist die Idee aber nicht. Bereits zu den Anfangszeiten von jQuery hat der Chefentwickler und Autor John Resing sein eigenes jQuery Template Engine Plugin veröffentlicht. Heute entwickeln Unternehmen wie Google und Twitter ihre eigenen Template Engines. Auch das jQuery-UI Team hat auf seiner Roadmap eine Template Engine stehen.

In meinem aktuellen Projekt nutzen wir die Template Engine Handlebars zur Generierung einer Dashboard-Tabelle und deren Navigationselemente. Die komplette Funktionalität haben wir in drei Templates ausgelagert. Im Java Backend wird nur noch das Dashboard-Modell mit den Daten generiert und per RESTful-Webservice an den Client übermittelt. Die Templates sind mittlerweile so generisch, dass wir bei Änderungen bzw. Erweiterungen nur noch das Modell anpassen müssen. Die frühere, komplett in JavaServer Faces umgesetzte Lösung wurde auf Dauer immer langsamer – vor allem in Bezug auf die AJAX-Aufrufe. Die neue Lösung ist dagegen rasend schnell (auch unter Last), was dem Kunden sehr wichtig war. Obwohl Handelbars aktuell erst in der Version beta6 vorliegt, kann ich sie uneingeschränkt empfehlen – auch für Produktivsysteme. In der Dokumentation befinden sich noch weitere Beispiele.

Eine Übersicht aktueller Template Engines mit Entscheidungshilfen finden Sie hier: http://garann.github.com/template-chooser/

Haben Sie bereits JavaScript Template Engines bei der Entwicklung von Anwendungen auf Basis von JavaScript-Architektur eingesetzt? Teilen Sie mir gern Ihre Erfahrungen mit.

 

Links:

http://handlebarsjs.com/

Patrick Dahms Patrick Dahms ist Softwareentwickler am adesso-Standort Berlin mit Fokus auf Java, HTML5 und JavaScript.
Artikel bewerten:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

Kommentar hinzufügen:

Ihr Kommentar: