Vorheriger Artikel Nächster Artikel

Ansätze für Client-Side Templating

Die Auslagerung von zum wird immer beliebter. Inspiriert durch einen MVC-ähnlichen Ansatz finden die Templates ihren Weg zur Weiterverarbeitung im Client statt auf dem Server. Denn nicht nur auf Serverseite sind Templates ein mächtiges Werkzeug.

Ansätze für Client-Side Templating
Templates haben unumstrittene Vorteile – sie helfen dabei, nicht die Übersicht zu verlieren. Markup kann von der Applikations-Logik getrennt werden, wodurch Designer in der Lage sind ihrer Arbeit nachzugehen, ohne Wissen um das im Hintergrund laufende Programm zu haben, und pfuschen nicht in die Arbeit der Entwickler herein. Auch können so, häufig verwendete Codefragmente einfach wiederverwendet und verarbeitet werden.

Warum clientseitige Templates benutzen?

Warum aber Templates zum Browser auslagern? In der heutigen Erwartungshaltung an dynamische Applikationen muss das User Interface immer öfter aktualisiert werden. Hierfür komplett neue Webseiten zu generieren und über die Leitung zu jagen, dauert einfach viel länger, als die nötige Arbeit vom Client erledigen zu lassen. Auch erleichtert eine solche Herangehensweise dem Designer die Arbeit. Es gibt keinen Grund, sich mit Smarty, Velocity und anderen Frameworks auseinanderzusetzen oder sich mit Tags wie <? oder <% das ganze Layout verhageln zu lassen. Nicht zuletzt hilft diese Herangenehsweise bei der Entwicklung von mobilen Applikationen. Denn je mehr Applikations-Logik auf den Client "gepusht" werden kann, desto besser funktioniert die App, wenn die Verbindung mal etwas schwächer sein sollte.

Template-Engines

Template engine Handlebars

Wie euer Template aussieht, hängt von der Template-Engine ab, die ihr benutzt. Die Engine übernimmt hierbei das Verarbeiten der Templates für euch und ersetzt Platzhalter, wie Variablen und Funktionen, mit den jeweiligen Daten. Template-Engines können sehr komplex oder logicless sein, was bedeutet, dass sie nur einfachste Ersetzungen und einige intelligente Tags, wie das Durcharbeiten von Arrays unterstützen. Wie viel die Engine für euer Projekt leisten soll, entscheidet ihr von Fall zu Fall am besten selbst.

Ein Beispiel für eine einfache Template-Engine ist mustache.js. So sollte der Code unten eine Liste von Harry-Potter Charakteren als Ergebnis erzielen.

var template = "<h1>{{title}}</h1><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>";
var data = {"title": "Film-Charaktere","names":[{"name":"Harry","name":"Hermine","name":"Ron"}]};
var result = Mustache.render(template,data);$(document.body).append(result);
document.body.innerHTML = result;

<h1>Film-Charaktere</h1>
<ul>
<li>Harry</li>
<li>Hermine</li>
<li>Ron</li>
</ul>

Eine Alternative, die auch mit Mustache-Templates zurechtkommt und mit erweitertem Funktionsumfang daherkommt, bietet die Template-Engine Handlebars.

Templates auslagern

Die einzeilige Schreibweise für die Templates dürfte sich als eher unpraktikabel herausstellen. Anders aber kann JavaScript den Template-String nicht verarbeiten. Sobald ein Umbruch in den String im oberen Beispiel eingebaut wird, dürfte es zu Fehlern beim Verarbeiten des Codes führen.

Eine Auslagerung der Templates aus dem JavaScript selbst erscheint als plausible Lösung, bringt jedoch einige neue Herausforderungen mit. Enthält euer Programm nämlich viele Templates, kann das Nachladen dieser,durch zahlreiche AJAX-Requests an der Performance zerren. Zwar können diese Templates im Browser zwischengespeichert werden, dies würde jedoch nur beim zweiten Aufruf eines Templates zu merkbaren Performance-Steigerungen und entsprechend möglicherweise inakzeptabel langen Ladezeiten beim ersten Aufruf führen.

Templates in Script-Tags

Eine Möglichkeit ist, die Templates in Tags zu packen, die nicht gerendert werden, etwa Script-Tags.

<script id="template1" type="text/x-handlebars-template">
<h1>Überschriften Template</h1>
</script>

Die im Script-Tag enthaltenen Informationen werden nicht im Browser gerendert und dargestellt, stehen jedoch für eine spätere Verarbeitung zur Verfügung.

var template = $('#template1').html();
var compiledTemplate = Handlebars.compile(template);
var result = compiledTemplate(data);

Precompiled Templates

Ein weiterer Ansatz, wäre auf vorkompilierte Templates zu setzen. Hierbei werden Templates auf dem Server vorverarbeitet und einige der gegebenenfalls komplizierteren Vorgänge nicht auf den Client ausgelagert. Als Ergebnis erhalten die Clients dann eine einzelne JavaScript-Datei, in der die Templates als Funktion, die nur noch auf die Eingabe der Daten wartet, zur Verfügung stehen.

var template = {
templateA: function() {},
templateB: function() {};
templateC: function() {};
};

Der Mix macht 's

Um kleinere Veränderungen zu erzielen, ist das Verwenden von clientseitigen Templates eine sehr gute Lösung. Für das Generieren der Ausganssituation dürfte das Übertragen einer gesamten Seite an den Client aber immer noch die bessere Lösung sein, da so JavaScript-Aufrufe und unnötiges Zusatzrendering eingespart werden kann. Am besten eignet sich die clietnseitige Herangehensweise für besonders dynamische Inhalte.

Auch muss die Frage nach der Komplexität der Templates und ob man den Server oder den Client die Arbeit machen lassen will gestellt werden. Eine Kombination aus dynamisch nachgeladenen Templates und der Zusammenfassung der Templates mit der Script- oder Precompiled-Methode dürfte ein guter Ansatz für komplexere aber reaktionsschnelle Applikationen sein.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
10 Antworten
  1. von Jakiku am 13.01.2013 (11:52 Uhr)

    Wende ich schon seit geraumer Zeit an. Es bietet eine gute Lösung, um Ressourcen zu sparen. Immerhin sind die Leitungen inzwischen schnell genug und die Rechner auch nicht mehr so langsam. Gleiches gilt auch für mobile Endgeräte. Hat sehr viele Vorteile.

    Antworten Teilen
  2. von Mark am 13.01.2013 (12:44 Uhr)

    Ich finde mustache.js wirklich toll...
    Was ich mich jedoch schon länger frage, wie ich es richtig verwenden soll, denn möchte man eine etwas umfangreichere Seite bauen, lande ich schnell bei einem JavaScript MVC Framework und hole mir noch ein Ding mehr ins Boot.

    Wie setzt ihr denn mustache.js ein..? Würde mich wirklich interessieren.

    Antworten Teilen
  3. von lars.von.hemp am 13.01.2013 (17:47 Uhr)

    Zitat: Die einzeilige Schreibweise für die Templates dürfte sich als eher unpraktikabel herausstellen. Anders aber kann JavaScript den Template-String nicht verarbeiten.

    Frage: Normal kann JavaScript mit mehr Zeilen umgehen, gewusst wie. Oder ist das bei diesem Framework nicht möglich, wobei ich mir das nicht vorstellen kann da JS immer JS ist. Oder?

    Antworten Teilen
  4. von MArcJ am 14.01.2013 (02:50 Uhr)

    Ich halte das Templating im Browser ebenfalls fuer sehr nuetzlich, wenngleich ich noch keins gefunden habe, das fuer mich passt. Hatten doch fuer mich alle 'bekannteren' javascript template engines immer mindestens einen Nachteil zu viel. Bei einem ist's die fuerchterliche Einengung (wie in mustache), bei der man jede zusaetzliche Funktion extra programmieren muss (wie z.B. das Packen des ersten Zeichens eines String in einem extra hinein zum stylen) oder aber die Syntax ist nicht mein Fall.

    Falls jemand noch Alternativen sucht bzw. ebenfalls nicht fuendig wurde , dem koennte ich folgendes nahe legen. Ich war so frei und hatte mir eine eigene geschrieben:
    https://github.com/MArcJ/mowla.js

    Antworten Teilen
  5. von Stefan am 14.01.2013 (09:26 Uhr)

    Mehrzeilige Strings kann ich doch mit \ realisieren. In einem Projekt (das war 2008) hatten wir radikal alle Templates in JS umgesetzt (mittels Prototype) und per AJAX auf Bedarf eingeladen. Die nachträgliche Administration des Projekts erwies sich aber als viel zu Zeitaufwendig und setzte vorraus das die Entwickler allesamt fit in JS waren (womit ein grosser Teil ausschied).
    Weiterhin musste man höllisch auf updates (z.b. bei Prototype) und JS Fehler im allgemeinen aufpassen. Beim kleinsten JS Fehler funktionierte das ganze System (und somit die Templates) nicht mehr.

    Vielleicht gibt es ja inzwischen bessere Ansätze. Ich selber würde das Templating im Browser nur in Teilbereichen anweden.

    Antworten Teilen
  6. von lars.von.hemp am 14.01.2013 (09:29 Uhr)

    Genau so sehen ich das auch. Entweder einen Zeilenumbruch mit \n oder die einzelnen Strings in Brackets machen und mit einen + zusammen fügen. Würde den Autor bitten dieses mal im Artikel zu ändern. War sehr irritiert als ich gelesen habe das dies nicht möglich sein soll.

    Antworten Teilen
  7. von Keine neue Idee am 14.01.2013 (18:43 Uhr)

    Nicht jeder hat einen goldenen LTE-Vertrag von der Firma gesponsort und ist immer in der Großstadt unterwegs. 40% sind offliner. Viele haben auf dem Dorf nur UMTS mit 500 MB. Danach nur noch 64kbit. Weil als "Ausbau" reicht, wenn man dort UMTS anbietet. Großstädter interessiert das eher wenig. Aber auch Landbevölkerung hat Geld und will es ausgeben.

    Bei News-Sites wo man ständig Artikel anklickt und die Navigation und Drumherum zu 99% gleich bleibt, sollte sich sowas auch anbieten. Dieser Punkt wurde nicht direkt angesprochen und sollte jedem der die Seiten mal ausdruckt doch mal auffallen.
    Sowas macht enorm viel beim Traffic aus und ist immer dasselbe.

    Interessant wäre ein Javascript welches Teile holt wenn man sie braucht oder ändert oder man sich in einem Forum den Rest vom Thread ansehen will.

    Bei XML gibts auch XInclude. In wie weit man das benutzen kann, weiss ich allerdings nicht.

    Man kann oft die Schriftgröße kleiner und größer stellen. Interessant wären Buttons um viel oder wenig zu laden. Dann würde man beispielsweise "Neueste News" sehen, aber wenn man "langsame Verbindung / Wenig laden" angeklickt hat, müsste man draufklicken damit es aufklappt und die neuesten News nachlädt und nur kleine Vorschau-Bilder geladen werden. Wenn man hingegen "ich hab ne dicke Leitung" angeklickt hat, wird alles im Voraus geladen und alles ist aufgeklappt und ausgefüllt und die Bilder in Retina-Qualität geladen.
    So schwer sollte ein Content-Generator für sowas nicht sein. Verhindert werden sollte Scraping. Aber wer Reader-Mode im Safari-Browser einschaltet oder Google-Currents als Reader nimmt macht die Navigation der Seite ja auch weg und zeigt den puren Content ohne Webdesigner-Schnickschnack an. Da ist zum "bösen" Scrapen dann auch kein großer Unterschied mehr und man sollte lieber Apis anbieten wie es Youtube, Xing und andere aktiv promoten und was Facebook zum Erfolg geführt hat.

    Antworten Teilen
  8. von JenZzzz am 15.01.2013 (17:43 Uhr)

    Mal ne andere Fragen, gilt jetzt "Javascript ist bei allen immer eingeschaltet"?

    Bisher habe ich Webseiten immer so angelegt, dass sie auch ohne JS benutzt werden können, für so eine Templategeschichte ist es aber ja zwingend erforderlich, das JS eingeschaltet ist.

    Ich habe noch so ein Klingeln im Ohr, dass es Leute geben soll, die JS aus "Sicherheitsgründen" ausschalten, deswegen frage ich, denn auch denen will ich eine Webseite anzeigen lassen ...

    Antworten Teilen
  9. von MArcJ am 15.01.2013 (20:20 Uhr)

    @JenZzzz Der Prozentsatz von Leuten mit deaktiviertem Javascript ist so niedrig, dass man ruhig davon ausgehen kann, dass Javascript vorhanden ist. Ich kenn ehrlich gesagt niemand, der Webseiten extra für solche Leute ohne JS "optimiert" oder gar bei der Architektur extra daran denkt.

    Ein kleiner noscript-Hinweis sollte trotzdem beinhaltet sein, damit die, die es deaktiviert haben, es wissen und die Seite dann in derren Ausnahmen hinzufügen können.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Templates
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage

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 … » weiterlesen

Joomla: 15 schicke Templates für deine Webseite
Joomla: 15 schicke Templates für deine Webseite

Mit Templates kannst du das Aussehen von Joomla steuern. Wir stellen dir 15 kostenlose und kostenpflichtige responsive Templates für den Einsatz mit Joomla zur Inspiration vor. » weiterlesen

Marketing-Videos made easy: VideoLean verspricht einfache Produktionsplattform für Unternehmen [Screencast]
Marketing-Videos made easy: VideoLean verspricht einfache Produktionsplattform für Unternehmen [Screencast]

Ein schickes Marketing-Video kann schnell aufwendig und teuer werden. Dass das nicht so sein muss, zeigt das Online-Tool VideoLean. Wir stellen es euch in Text, Bild und Ton vor. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen