Keyword - jTemplates

Entries feed - Comments feed

Monday, March 3 2008

Javascript Template Engines comparison and benchmark

By Nicolas Crovatti on Monday, March 3 2008, 00:26 - JavaScript

For a long time i wished to have the ability to move my XHTML or CSS  code/formatting out of my javascript libraries.  I lately heard about  javascript templates engines. Either standalone or plugged into existing frameworks these tools are the next step for web developpers.

I will only speak about tree of them :


Basicaly I choosed them because they have the functionality to process hierachical JSON data input, mainly arrays and evolved syntax. I originally wrote this benchmark script for my own knowledge, since i found it interresting i decided to release it to the public.

The results shown by the benchmark tool are not intended to guide anyone in choosing the "best" template engine, be aware that speed is not the only and further less the most important criteria in the process of choosing the right template engine for your application. However, it can help if the speed and overall performance is an important issue at some point.

Note that since the benchmark itself runs on client side, results shown will only be true on your computer and are heavily dependents of its load at the time your are running the test. Oh, a trivial thing, this benchmark is not running at all with internet explorer.

The benchmark:
This script, will run the different template transformation methods from the librairies the same amount of time for each. It will time every call to these method and stock them into an array. This array will then be processed to display plots using a jQuery plugin named flot (http://code.google.com/p/flot/) and summary informations about each of the tree mentioned librairies. To let the control to the browser, the data (JSON) will be splitted into small chunks. You can configure how much data is processed and the chunk's size.

As a last note, I would be glad if you contact me if you notice any discrepancy in the benchmark results.

Javascript template engines benchmarking






Wednesday, February 27 2008

jQuery et jTemplates

By Nicolas Crovatti on Wednesday, February 27 2008, 00:41 - JavaScript

jTemplate (http://jtemplates.tpython.com) est un plugin pour jQuery (http://jquery.com/). Il ajoute la merveilleuse fonctionnalité qu'est le templating à la librairie jQuery. J'avais longtemps souhaiter cela ! C'est chose faite à présent et c'est à la fois extrêmement pratique et puissant.

Les développeurs, par soucis de relecture et maintenance, cherchent à dissocier au maximum le contenu de la partie code. Appliqué à PHP, Smarty (http://www.smarty.net/) fût une véritable révolution lors de sa sortie en 2003.  Aujourd'hui des dixaines de milliers de développeurs l'utilisent quotidiennement dans des projets de grande envergure.

Si vous êtes comme moi un familier de la syntaxe Smarty, vous ne serez pas dépaysé par jTemplates.

La mise en oeuvre est ultra simple :

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery-jtemplate.js"></script>

La première chose à faire est d'ajouter un conteneur qui recevra le résultats de la "transformation":
   <p id="my_list"></p>

Une fois ceci fait il faut créer un element contenant un template :

      <textarea name="template" id="template">
      <![CDATA[
      {#template MAIN}
        <p>Pour rouler une {$T.title} vous aurez besoin des fournitures suivantes :</p>
        <ul>
         {#foreach $T.elements as record}
            <li>{$T.record.element} ({$T.record.quantite})</li>
         {#/for}
        </ul>
      {#/template MAIN}
      ]]></textarea>


Et définir nos données JSON de la même manière : 

      <textarea name="item" id="item">
      {
         "title" : "Cigarette",
         "elements": [
         {"element": "tabac", "quantite":"un peu"},
         {"element": "feuille", "quantite":1},
         {"element": "filtre", "quantite":1},
         ]
      }</textarea>

Nous venons de mettre en place un combo formidable que nous allons activer avec les deux lignes de code suivantes (à affecter sur l'evenement onClick d'un element par exemple) : 

      $('#my_list').setTemplateElement('template');
      var data = eval( '(' + $('#item').attr('value') + ')');
      $('#my_list').processTemplate(data);

Le seul truc à noter si  on ne travaille par directement avec des objets, c'est qu'il faut impérativement  évaluer  le JSON avant d'appliquer la transformation. Pour une raison mal définie, il faut wrapper la chaîne de caractères JSON dans des parenthèses afin que l'eval() fonctionne...

Vous pouvez aussi consulter cet exemple ainsi qu'un outil de benchmark sur le Workshop.

Pour ma part j'utilise les fonctions $.setTemplate() et $.setTemplateURL(). En effet, je ne trouve pas qu'il soit optimal d'avoir les templates dans des textarea cachés dans la page pour plusieurs raisons :
  • Cela oblige l'utilisateur à télécharger tous les templates au chargement de la page.
  • L'utilisateur peut éventuellement modifier le contenu des templates à l'aide de Firebug et cela peut poser problème si vous utilisez jTemplates pour générer des formulaires.
J'ai donc opté pour une solution plus adaptée à l'Ajax et au Web 2.0.

Quand un template doit être utilisé souvent sur une page, je le télécharge en utilisant la fonction $.get() de jQuery au chargement de la page et je le stocke dans une variable, il sera disponible tant que l'utilisateur n'aura pas besoin de changer de page.

Si le template est sensé être utilisé dans des cas plus rare je le télécharge uniquement "on demand". Biensur, rien n'empêche de dire à la fonction de téléchargement de mettre en cache le template au bout d'un certains nombre de téléchargements :D

Fonction de mise en cache d'un template au chargement de la page (jQuery) :

      var tpl_root = "/templates/jtpl/";
      var table_template = '';
       
      $(document).ready(function(){
         $.get(tpl_root + "table.html", function(data) {
            table_template = data;
         });
      });