Comme déjà exprimé plus tôt j'ai longtemps souhaité déplacer mon code XHTML et CSS en dehors de mes librairies Javascript. J'ai donc récement entendu parler des moteurs de templates Javascript. Seule ou plugin de framework existant, ces outils sont la prochiane étape pour les developpeurs web.

Je ne parlerai que de trois d'entre eux :

• jTemplates basé sur le framework jQuery. (http://jtemplates.tpython.com)
• Javascript Template de Trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates)
• et EJS, Embedded JavaScript. Une libraire dédiée (http://embeddedjs.com)

J'ai choisis ceux là pour la simple raison qu'il correspondent tous a mes besoins en termes de traitement de données hiérarchisées JSON sous forme princiapelement de tableau. J'ai écrit ce benchmark pour ma propre information. comme je l'ai trouvé interressant j'ai décidé de le publier

Les résultats mis en évidence par ce script de mesure des performances ne sont pas conçut pour aider quiconque à choisir le "meilleur" moteur de templates, soyez conscient que la vitesse d'execution n'est pas la seul et encore moins le plus important des critères a prendre en compte dans le choix optimal d'un systeme de template pour votre application.
Cependant, si la vitesse et les performances globales sont importante pour votre projet, ce test pourra peut-être vous être utile.

Notez biens que ce script tourne entièrement  côté client, les résultats seront donc uniquement valide sur votre machine et a fortiori seront affectés par les programmes s'executant au moment du test. Ah oui, j'allais oublier, ces tests de performances ne fonctionnent pas sous internet explorer.

Le benchmark :
Ce script va executer les différente méthodes de transformation des librairies citées en introduction le même nombre de fois. Il va mesurer le temps d'execution pour chacune d'entre elle et les stockera afin d'afficher un graphique généré par un plugin jQuery nommé flot (http://code.google.com/p/flot/) de l'intégralité de l'execution ainsi qu'un résumé. Pour eviter tout gel de votre navigateur, les données JSON seront découpées et traitées par lot. Vous pourrez configurer combien de données devront être traitées ainsi que la taille des lots.

Pour finir, si vous constatez un quelconque illogisme dans les résultats, merci de me contacter !

Javascript template engines benchmarking

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;
         });
      });