Hallo, nachdem ich es letzte Woche zeitlich nicht geschafft habe einen Eintrag zu schreiben, möchte ich mich diese Woche mit einem Beitrag über die ein- oder andere „Template-Engine“ zurückmelden. Ich denke viele von euch haben einen oder mehrere der folgenden Namen bereits gehört: Smarty, Twig, Mustache oder RainTPL… All diese Systeme haben nur ein Ziel: Das erstellen von Templates soll einfacher und modularer werden!
Idealerweise soll es so einfach werden, das auch Jemand ohne PHP-Kenntnisse einen funktionierenden Klick-Dummy zusammenbasteln kann – Inklusive Funktionen wie „include“, Abfragen oder Schleifen. Zusätzlich helfen Template Systeme die Schichten einer Applikation zu trennen: Die Darstellung soll mit der Technik nicht vermischt werden (ähnlich wie beim MVC-Konzept).

Ein kurzes Wort zu Template-Engines

Für diejenigen, die mit dem Begriff „Template-Engine“ nicht viel anfangen können, möchte ich kurz ein paar Worte schreiben…

Eine „klassische“ Template-Engine verzichtet beinahe komplett auf PHP Code bzw. PHP Syntax. Um eine Variable auszugeben wird mit Platzhaltern gearbeitet. Ähnliches geschieht mit Kontrollstrukturen (if, switch, include, while, for, …) – Sie bekommen eine eigene einfachere Syntax:

<h1>Willkommen auf {$titel}</h1>
<p>Hallo {$planet}!</p>
{if $planet='Welt'}
<p>Auch "der blaue Planet" genannt</p>
{/if}

Der dazugehörige PHP-Code könnte so aussehen:

$tpl = Template::factory()
    ->assign('planet', 'Welt')
    ->assign('titel', 'Meiner Webseite');
echo $tpl->render('pfad/template.tpl');

Das ganze geht natürlich noch viel viel weiter! Hier ein kleines Beispiel mit einer Schleife und einem include:

<h1>Einige Planeten unseres Sonnensystems</h1>
{cycle $planeten}
    {$value}
{else}
    {include "sorry.tpl"}
{/cycle}

Wobei „$planeten“ in PHP als Array definiert werden muss, da sonst nicht iteriert werden kann. Variablen wie „value“ (und teilweise auch „key“) werden von einigen Systemen automatisch innerhalb von Schleifen angeboten um die Syntax weiter zu vereinfachen.
Einige der Systeme bieten unter anderem Features an, um z.B. herauszufinden ob es sich bei der aktuellen Iteration um das erste oder letzte Element handelt! Speziell für Web-Applikationen bieten sich solche Systeme an, da viele Elemente als eigene Templates modularisiert werden können (ggf. für wiederkehrende Formular-Elemente). Auch Caching und Content-Filterung werden häufig angeboten!

Doch genug zur Einführung – Lasst uns die Syntax der vier Systeme etwas vergleichen!

In meinen Beispielen verwende ich eine Abfrage (bzw. einen Else-Zweig), eine Schleife und ein include. Folgende Daten werden wir ausgeben:

$titel = 'Planeten';
$planeten = array(
    'Mars' => '228 Millionen',
    'Saturn' => '1,43 Milliarden',
    'Venus' => '109 Millionen'
);

Smarty

Smarty wurde Anfang 2001 veröffentlicht und dürfte eine der bekanntesten Systeme zum Templating sein. Es gibt massenhaft Features so wie eine sehr komplexe Syntax die sich beliebig durch selbstgeschriebene Plugins erweitern lässt! Die aktuelle Version ist 3.1.11.

<h1>Hallo {$titel}</h1>
<ul>
{foreach $planeten as $key => $value}
    <li>{$key} mit einer Entfernung von {$value} Kilometer!</li>
{foreachelse}
    {include "sorry.tpl"}
{/foreach}
</ul>

Twig

Twig wird von Sensiolabs entwickelt, den Jungs die auch hinter symfony stehen. Ich habe persönlich zwar (noch) keine Erfahrung mit dieser Template-Engine, sie sieht auf „den ersten Blick“ allerdings sehr Entwicklerlastig aus, die Syntax folgt außerdem einer strikten Regelung (z.B. müssen am Anfang und Ende jedes Platzhalters GENAU ein Leerzeichen vorkommen usw). Twig dürfte zwar, zusammen mit Smarty, die meisten Funktionen bieten, doch bringt auch die komplexeste Syntax mit die man sich erst mal aneignen muss.

<h1>Hallo {{ titel }}</h1>
<ul>
{% for planet, entfernung in planeten %}
    <li>{{ planet }} mit einer Entfernung von {{ entfernung }} Kilometer!</li>
{% else %}
    {% include 'sorry.html' %}
{% endfor %}
</ul>

Mustache

Im Gegensatz zu den anderen Template-Engines ist Mustache für eine Vielzahl von Programmiersprachen erhältlich! Die Sprache hat außerdem eine einfache Syntax bzw. nur wenige „Extra-Regeln“ zu lernen – Leider muss man seine Daten der Syntax anpassen (nicht anders rum!): Es ist nämlich nicht möglich über ein assoziatives Array zu iterieren und sowohl die Schlüssel als auch die Inhalte zu erhalten. Da Mustache für eine Vielzahl an Programmiersprachen verfügbar ist, wurde auf eine allgemeine (JSON-Ähnliche) Datenstruktur gesetzt!
Wir müssen folgendes umschreiben:

$titel = 'Planeten';
$planeten = array(
    array('name' => 'Mars', 'entfernung' => '228 Millionen'),
    array('name' => 'Saturn', 'entfernung' => '1,43 Milliarden'),
    array('name' => 'Venus', 'entfernung' => '109 Millionen')
);

Mustache „zwingt“ und also dazu unsere Daten sauber zu formulieren (es bleibt jedem selbst überlassen ob das ein Vor- oder Nachteil ist). Das Template sieht dann folgendermaßen aus:

<h1>Hallo {{titel}}</h1>
<ul>
{{#planeten}}
    <li>{{name}} mit einer Entfernung von {{entfernung}} Kilometer!</li>
{{/planeten}}
{{^planeten}}
    {{> sorry}} <!-- Das Template muss "sorry.mustache" heißen -->
{{/planeten}}
</ul>

RainTPL

Zu guter letzt möchte ich die vermutlich unbekannteste Template-Engine meiner Auswahl vorstellen: RainTPL. Diese Template-Engine ist sehr darauf ausgelegt „schlank“ und gleichermaßen „schnell“ zu sein. RainTPL verfügt außerdem über ein Features das mir persönlich sehr gefällt: Das System wird relative Pfade innerhalb von Template-Dateien (auf Wunsch) automatisch ergänzen! Die Syntax ist recht schlank und einfach gehalten:

<h1>Hallo {$titel}</h1>
<ul>
{loop="planeten"}
    <li>{$key} mit einer Entfernung von {$value} Kilometer!</li>
{else}
    {include="sorry"}
{/loop}
</ul>

So viel also zur Vorstellung der vier Systeme, für den zweiten Teil dieses Postings (nächste Woche) plane ich einen Einblick auf die Entwickler-Seite und die Performance der vier Template-Engines! Ich denke es wird sehr interessant und vielleicht auch zeigen das der Feature-Umfang nicht immer Ausschlaggebend ist. Ich werde mich selbst von den Ergebnissen überraschen lassen 😉

In diesem Sinne wünsche ich euch allen Happy Coding!

5 comments on “Template-Engines im Vergleich – Teil 1

  • Ich nutze Smarty und Twig für das Templatin in Bludit, Pico aber auch als Standalone-Lösung. Smarty war zunächst mein Favorit, da es sich ohne Probleme installieren ließ und die Doku extrem gut ist. Bei Twig hatte so meine Probleme. Allerdings würde mich eher mal interessieren, ob du Erfahrungen zum Theme „JavaScript Template Engine und der Sinn?“ hast? Da ja viele User durchaus JS am Browser abstellen. Hat eine JS Templatesprache da noch Zukunft?

    • Hi Oliver,
      ich arbeite inzwischen auch seit rund 10 Jahren mit Smarty und war über den plötzlichen Release von Smarty 4.0 und 4.1 durchaus positiv überrascht 🙂 Bis dahin schhien mir Twig etwas lebendiger, aber damit habe ich auch ein wenig meine Probleme – hauptsächlich wegen der Syntax bei Vergleichen wie $x == 1.

      Mit JS Template Engines habe ich tatsächlich gar keine Erfahrung, ich nutze beruflich stattdessen seit einiger Zeit React – das scheint auch inzwischen (neben anderen Frameworks wie Preact, Vue und Angular) eher „state of the art“ zu sein als mit Templates zu arbeiten.

      Ich denke diese Lösungen haben eher eine Zukunft, vor allem auch wegen den treibenden Kräften (Facebook und Google) – aber das ganze JS Umfeld ist wahnsinnig schnelllebig, also mal schauen was kommt 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.