Templating with good ol‘ Javascript

Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann.

Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner.

Der Code

Der komplette Code basiert auf RequireJS, kann aber natürlich von da aus auch weiter adaptiert oder gewrappt werden.

Das folgende Skript dient dazu Zugriff auf das globale document zu erhalten ohne global darauf zuzugreifen und ist eine reine Dependency für das eigentliche Templating-Skript.

define(function() {
  return document;
});

Hier die eigentliche Template-Enginge. Diese erwartet in der render-Methode zwei Parameter:

1. Eine HTML-ID, um ein Template aus dem DOM auslesen zu können.
2. Ein JSON-Objekt, um das Template mit Daten befüllen zu können.

Das Template liegt in einem speziellen script-Tag im DOM herum, wird jedoch nicht vom Browser gerendert. Über ein ID-Attribut wird es dann ausgelesen und dessen Inhalt im Modul selbst zwischengespeichert, um diese DOM-Operation bei zukünftigen Wieder-Verwendungen einsparen zu können. Schlussendlich werden die definierten Platzhalter aus dem Template mit den Werten aus dem JSON-Objekt ersetzt und das fertige HTML zurückgegeben.

define([
  'global/document'
], function(document) {
  'use strict';

  var templates = {};

  /**
   * Renders the given template by extracting it from the DOM and replacing its placeholders with the given data.
   * If the template was loaded before it will be cached and fetched from there for better performance and less memory usage.
   *
   * @param {String} id
   * @param {Object} data
   * @returns {String}
   */
  var render = function(id, data) {
    if(!templates[id]) {
      templates[id] = document.getElementById(id).innerHTML;
    }
    
    var template = templates[id];

    for(var key in data) {
      template = template.replace('{' + key + '}', data[key]);
    }
    return template;
  };

  return {
    render: render
  };

});

Das Template wird über ein script-Tag eingebunden, welches mit dem Type text/html versehen wird. Damit wird es nicht vom Browser gerendert und über die zugewiesene ID wird es per Skript auslesbar. Der Type ist bei unserer Entwicklung mit NetBeans übrigens wichtig, da dieses sonst nicht sauber formatieren kann.

<script id="map__popup--template" type="text/html">
  <img src="{thumbnail}" alt="" width="400" height="250">
  <div class="map__popup__content">
    <h2>{title}</h2>
    <p>{desc}</p>
    <a href="{link}" class="button button--info">zum Artikel</a>
  </div>
</script>

Genutzt werden kann das Ganze anschließend wie folgt. Was man dann mit dem gerenderten HTML anstellt ist damit jedem selbst überlassen.

requirejs([
  'helper/templating'
], function(templating) {
  'use strict';
  
  var html = templating.render('map__popup--template', {
    thumbnail: 'http://loremflickr.com/400/250/dog',
    title: 'Der Titel',
    desc: 'Das ist die Kurzbeschreibung.',
    link: 'http://example.com',
  });
  
  // Do something with the created HTML here.
});

Vorteile dieses Vorgehens

Bisher haben wir gerne auf EJS gesetzt, welches für komplexeres Templating auch weiterhin eine sehr gute Alternative darstellt. Der große Nachteil bei dieser Library ist jedoch der Overhead, der durch die zusätzlichen synchronen AJAX-Requests entsteht.

Für einfache Aufgaben wie das Rendern von z.B. Infowindows und Markern innerhalb von Karten, Elementen in Warenkörben, usw. bietet sich jedoch der simplere Ansatz durchaus an. Man spart damit extra Requests an den Server, der Browser-Cache des Users kann nicht für Verwirrung sorgen und man hat bereits alles was man benötigt zur Hand ohne diese Templates noch irgendwie extra ermitteln zu müssen.