HTML 5 template-Tag: Beinahe vergessen aber extrem nützlich

Viele Webentwickler kennen das Problem. Immer mehr Logik einer Webseite findet heute Client- und nicht mehr Serverseitig statt. Das bedeutet nachdem eine Webseite geladen wurde, wird noch JavaScript Code ausgeführt der bestimmte Dinge an der Webseite dynamisiert (z.B. den Inhalt von Tabellen, etc).

Im Grunde bietet das viele Vorteile – man kann das ausgegebene HTML wunderbar cachen und somit die Seitenladegeschwindigkeit erhöhen. Gleichzeitig können damit auch „moderne“ Anwendungen geschrieben werden, die nicht bei jeder User Interaktion ein neuladen der Seite erfordern sondern Inhalte direkt nach Ausführen der User-Interaktion verändern.

Aus Entwicklersicht ist das ganze aber immer eine Art „Kompromiss“ jeder der schon mal HTML Layout Elemente in JavaScript schreiben musste weiss, dass dies murks ist. Es führt zu einem gewaltigen Overhead der JavaScript Datei und zu wirklich schlecht wartbarem Code.

Welche Lösungen werden für dieses Problem oft genutzt?

Grundsätzlich gibt es zwei Möglichkeiten sowas zu realisieren. Entweder man schreibt das gebrauchte HTML direkt in den JavaScript-Code und hofft das man nie wieder etwas daran ändern muss 😉.

Oder man schreibt einen kleinen Ajax Request und lässt sich das gebrauchte HTML-Template Serverseitig bauen.

Die erste Methode führt zu einer extrem grossen JavaScript Datei und zu Code der kaum noch wartbar ist die zweite Methode benötigt mehr Zeit bis die Inhalte geladen wurden.

HTML 5 template-Tag

Ich hatte erst kürzlich wieder ein Projekt wo viele Inhalte dynamisch per JavaScript geladen werden mussten und dachte mir – da muss es doch eine bessere Lösung geben.

Nach einer kleinen Google Recherche bin ich auf das HTML 5 template-Tag gestossen. Ehrlicherweise hab ich vorher noch nie etwas davon gehört 😮obwohl das bereits Anfang 2013 (!!) standardisiert wurde.

Das template-Tag hat mich sofort begeistert. Das war genau die Lösung die ich gesucht habe. Weder führt sie zu langen Wartezeiten noch zu unhandlichem Code. Sie ist schlicht perfekt.

Kleines Beispiel

Mit dem template-Tag können Templates direkt in das geladene HTML eingebunden werden. Alles was im template-Tag ist wird beim Laden der Seite nicht gerendert und kann dann bei Bedarf mit JavaScript gerendert werden.

So sieht das auf der HTML Seite aus:

<h1>Folgende Automarken mag ich:</h1>
<button type="button" onclick="showContent();">Automarken anzeigen</button>
<template id="ilikecars">
    <div class="something">Ich mag: </div>
</template>

Innerhalb eines template-Tags ist alles erlaubt was valides HTML ist. Ein Template-Tag braucht immer eine „id“-Attribute, damit wir es per JavaScript ansprechen können.

Die Idee dieses kleinen Beispiels ist es, das nach dem Klick auf den Button ein paar Automarken angezeigt werden, die ich besonders mag. Daher müssen wir jetzt in JavaScript noch die Funktion showContent() schreiben, die beim Klick auf den Button ausgelöst wird.

<script>
    var cars = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
    function showContent() {
        var temp, item, a, i;
        //HTML 5 Template-Tag laden:
        temp = document.getElementById("ilikecars")[0];
        //Das div Element aus dem Template extrahieren:
        item = temp.content.querySelector("div");
        //Die Automarken aus dem array in einer Schleife durchgehen
        for (i = 0; i < cars.length; i++) {
            a = document.importNode(item, true);
            //Name aus dem Array hinzufügen:
            a.textContent += cars[i];
            //append the new node wherever you like:
            document.body.appendChild(a);
         }
    }
</script>

Hier sieht man wie man ohne aufgeblähtem und unwartbarem Code und ohne Ajax Request ein HTML Template problemlos verwenden kann. Sehr cool!

Probleme?

Wie bei allen coolen Dingen gibt es natürlich auch Nachteile. Und der liegt wie so oft beim Browser Support. Beginnen wir mit dem positiven – alle modernen Browser unterstützen das HTML5 template-Tag.

Zeigt die Browserunterstützung für das HTML5 Template-Tag.
Breite Browserunterstützung für das HTML 5 template-Tag

Wie immer haben wir aber ein Problem mit dem Internet Explorer 11 der leider nicht mal eine rudimentäre Unterstützung für das HTML 5 template-tag bietet.

Für dieses Problem gibt es zwei Möglichkeiten. Einerseits gibt es diverse Polyfills die diese Funktion im Internet Explorer per JavaScript nachrüsten. Ich habe gute Erfahrungen mit dem Polyfill von Nicolas Le Gall gemacht. Man findet das Polyfill auf GitHub.

Man kann aber auch per JavaScript prüfen ob der Browser das template-Tag unterstützt:

if (document.createElement("template").content) {
  //Der Browser unterstützt das template-Tag und es kann verwendet werden.
} else {
  //Der Browser unterstützt leider kein template-Tag es braucht eine alternative Methode (z.B. per Ajax).
}

Grundsätzlich empfehle ich die Variante per Polyfill, da sie weniger Zeit und Code beansprucht. Eines ist für mich klar, ich werde das template-Tag sicherlich noch in anderen Projekten verwenden.

Der Klimawandel ist kein politisches sondern ein technologisches Problem
Lifehacks für Google Chrome

Kommentare

Andy Moser

tolle Sache, hatte eben gerade und vor einigen Wochen bereits das Bedürfnis nach .

Schade, können keine variablen eingefügt werden. Aber naja, HTML ist HTML, keine Vorlagensprache.

Samuel Rüegger

Naja Theoretisch kannst du ja selber Variabeln setzen und diese dann per JavaScript entsprechend überschreiben. Funktioniert eigtl. ganz gut.

Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.