Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage

HTML5 rockt. (Foto: yukop / flickr.com, Lizenz: CC-BY-SA)

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es euch vor.

Das modulare Template-System Tempy.js

Bei der Entwicklung von Web-Apps suchen Webworker immer wieder nach einer Stellschraube, die zu einer besseren Performance beitragen könnte. Bei einer Web-App, die ich derzeit in meiner Agentur entwickle, boten vor allem clientseitige Templates eine Herausforderung. Das Ziel ist, ein modulares Template-System, das verschiedene App-Bestandteile asynchron neu rendern kann, zu realisieren. Hierfür bieten sich verschiedene Optionen an.

Option 1: Komplette HTML-Blöcke vom Server vorverarbeitet an den Client schicken. Das ist sicherlich am einfachsten zu realisieren, da clientseitig nur wenig Prozesslogik erfordert wird und die Template-Engine auf der Server-Seite alles unkompliziert erledigen kann. Jedoch kann man bei diesem Ansatz kaum Vorteile aus dem Caching der Templates ziehen, sodass der Client durch unnötig viele Daten und der Server durch unnötige Template-Verarbeitung zusätzlich belastet werden.

Option 2: clientseitige Templates über Script-Tag. Bei clientseitigem Templating ist es gängige Praxis, die jeweiligen Templates innerhalb eines Script-Tags mit dem Hauptdokument zusammen auszuliefern. So erspart man sich zusätzliche Aufrufe separater Templates und kann sehr schnell clientseitig auf die jeweiligen Templates zugreifen. Für ein komplexes System wird diese Lösung bei zunehmender Anzahl von Templates  auf Dauer jedoch unübersichtlich und irgendwann auch nicht mehr performant.

Option 3: clientseitige Templates über AJAX nachladen. Die Übertragung von Templates über AJAX zur Weiterverarbeitung in Template-Systemen wie Moustache oder Handlebars schien hier die beste Lösung zu sein. Die Templates können so kleinteilig wie nötig aufgesplittert werden und werden in der Regel nach dem ersten Aufruf  gecached. Diese Lösung ging jedoch nicht weit genug. Erst vor kurzem berichtete ich von basket.js, einer Bibliothek, die JavaScript in den LocalStorage des Browsers ablegen und so blitzschnell ohne zusätzliche Requests zur Verfügung stellen kann. Besonders auf mobilen Geräten soll so ein zusätzlicher Performance-Schub ermöglicht werden.

Diese Idee haben wir nun in der Bibliothek tempy.js in abgewandelter Form umgesetzt.

Das Konzept von Tempy.js

Tempy.js bietet im Zusammenspiel mit einer Server-Applikation eine schnelle Lösung für das Abrufen und Speichern von clientseitigen Templates. Die Bibliothek ruft Templates via AJAX-Request von einer PHP-Applikation ab und speichert sie im LocalStorage des Browsers. Ab dann stehen die Templates auf Clientseite sofort und ohne Kommunikation mit dem Server zur Verfügung, sodass auch Offline-Applikationen denkbar sind.

Template Ladezeit
Tempy.js: Der Aufruf von Separaten Templates kostet viel Mehr Zeit als die Übertragung in einem „Template Pack“. (Screenshot: t3n)

Ein weiterer Vorteil in der Aufteilung ist die Möglichkeit, Templates auf dem Server vorzuverarbeiten (zum Beispiel zu übersetzen) und zusammengehörige Templates bei einem Aufruf zu übertragen. Dazu aber später mehr.

Tempy.js benutzen

Tempy.js benötigt derzeit jQuery, um die nötigen Requests an den Server zu stellen. Nachdem jQuery und Tempy.js in die Web-App eingebunden sind, können mittels einer einfacher API Template-Dateien abgerufen werden.

Du kannst einzelne Templates oder mehrere Templates in einem Rutsch anfordern, ganz, wie deine Programmlogik es erfordert.

// Ein Template anfordern
var template1 = tempy.get({name:"template1"});
// Mehrere Templates anfordern
var templates = tempy.get(
{name:"template2"},
{name:"template3"},
{name:"template1"},
{name:"template4"}
);

Als Rückgabewert erhältst du den Template-String, den du an eine clientseitige Template Engine weiterreichen oder wie im unterstehenden Beispiel direkt ins Dokument einfügen kannst.

// Template einfügen, wenn ein Template angefordert wurde
$('#content').append(template1);
//Bestimmtes Template einfügen, wenn mehrere Templates angefordert wurden
$('#content').append(templates['template1']);

Um nicht unnötig viele Abhängigkeiten beim Aufruf im JavaScript festhalten zu müssen, bietet die serversetige Komponente von tempy.js die Möglichkeit, Template-Packs zu definieren. Bei jeder Anforderung eines Templates wird geprüft, ob für die Programmlogik weitere Templates benötigt werden und zusammen mit dem angeforderten Template mit nur einem einzigen Aufruf an den Client übertragen. Hierfür müssen nur die Abhängigkeiten in einer separaten Datei (pack.info) im JSON-Format hinterlegt werden.

{
"mainView":[
"template1",
"template2",
"template3",
"template4"
]
}

Fordert man nun also  das Template „mainView“ an, werden die dazugehörigen Templates template1, template2, template3 und template4 mit übertragen.

Tempy.js: API und Konfiguration

Tempy.js lässt sich über eine Reihe von Befehlen steuern.

  • tempy.get() ruft Templates ab
  • tempy.clear() überprüft ob veraltete Templates im LocalStorage hinterlegt sind
  • tempy.flush() löscht sämtliche Templates aus dem LocalStorage des Clients

Standardmäßig behält Tempy.js Templates für zehn Stunden im Cache und fragt Templates von der templateServer.php ab. Diese Werte können – wie auch das Storage-Prefix, das die Unterscheidung der Tempy.js-Daten von anderen Daten im LocalStorage ermöglicht – nach Belieben in der Bibliothek selbst angepasst werden, um es den eigenen Anforderungen anzupassen.

var storagePrefix = 'tempy-';
var defaultExpiration = 10;
var templateServer = "templateServer.php";

Für die Zukunft planen wir weitere Funktionen wie die Integration von JavaScript-Template-Engines und eine Require.js-Implementation von Tempy.js. Solange steht die aktuelle Fassung von Tempy.js zum Download auf GitHub zur Verfügung.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Ilja Zaglov

Hallo Simon,

danke für dein Feedback. Ich gebe dir Recht, der PHP-Code sollte definitiv überarbeitet werden. Ist aber auch nur als Minimalbeispiel gedacht, wie man Templates an das Skript weitergeben kann.

Die anderen Punkte stehen auch schon auf der Liste.

simon

Ich hab den code nur kurz ueberflogen, wuerde euch aber dringend dazu raten den code zu ueberarbeiten.
Ueber das PHP Script ist es mit hoher warscheinlichkeit moeglich x-beliebige Dateien an den Client zu schicken da die Eingabe die vom Client kommt nicht validiert wird.

Clientseitig jQuery nur deswegen als dependency drinn zu haben wegen dem Ajax request macht meiner Meinung nach keinen Sinn. Ebenso wuerde ich das JS script so umbauen, dass man die Konfigurationsparameter von aussen reingibt anstatt sie direkt in der jquery.tempy.js definieren zu muessen.

Aber wie gesagt, die Sicherheitsluecke im PHP Code ist zunaechst das wichtigste ;-)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst