Qui n’a jamais entendu de la bouche d’un développeur backend (pour ne pas dire Java) “Javascript, moins j’en fais, mieux je me porte”. Je parle en connaissance de cause car j’étais assez imperméable au Javascript par le passé. Mais je ne faisais que “bidouiller” du Javascript car en vérité, je ne connaissais pas le langage et après quelques lectures d’ouvrages de référence (Javascript: The Good Parts de Douglas Crockford par exemple), je me suis surpris à apprécier Javascript de plus en plus. Et du Javascript il y en a partout, déguisé derrière du jQuery, et même côté serveur avec Node.js.
Dans cet article, je vais vous parler d’une librairie Javascript très spécifique, qui ne fait qu’une seule chose mais qui le fait bien. Il s’agit de la librairie de templating Mustache.js.
1. jQuery sans les moustaches
Imaginons qu’on veuille afficher une liste de livres (titre, auteur) que l’on récupère sous forme d’objets Javascript. Voici le code Javascript/jQuery correspondant :| var book = { title: "Javascript: the Good Parts", author: "Douglas Crockford" }; $('#example').append('Title: <b>' + book.title + '</b><br/>Author: ' + book.author); |
Et le résultat :
Title: Javascript: the Good Parts
Author: Douglas Crockford
Je ne sais pas vous mais cette ligne là, elle m’irrite un peu quand je la lis et encore plus quand je l’écris :
| $('#example').append('Title: <b>' + book.title + '</b><br/>Author: ' + book.author); |
Pleins de ' et de +, c’est facile de s’y perdre et surtout on mélange affichage et données. Il existe de nombreux systèmes de templates pour mettre en oeuvre cette séparation. Et bien en Javascript, il existe également des systèmes de template dont Mustache, que je trouve simple et pourtant très puissant. Alors faisons appel à Mustache.js et voyons comment on peut rendre l’exemple précédent plus sexy.
| var data = {title: "Javascript: the Good Parts", author: "Douglas Crockford"}; var template = 'Title: <b>{{title}}</b> <br/> Author: {{author}}'; var output = Mustache.render(template, data); $('#example').append(output); |
Title: Javascript: the Good Parts
Author: Douglas Crockford
Aaah fini les ' et + parasites ! On a maintenant une belle séparation entre le template et les données. On utilise Mustache.render qui prend en paramètre le template et notre objet de données data. Dans le template, il y a deux tags {{title}} et {{author}} qui vont être remplacés par les valeurs correspondantes de l’objet data lors de l’appel à Mustache.render.
On peut faire donc une première observation, un template Mustache est composé de tags et un tag est délimité par des doubles accolades : les fameuses moustaches !
2. Les tags Mustache
Pour l’instant, nous n’avons vu qu’un type de tag {{name}} qui permet d’afficher la valeur de l’attribut name de votre objet de données. Dans le jargon Mustache, name est la clé du tag. Voici un petit listing des tags Mustache qui existent :{{#name}}, la moustache de section
Ce tag va ouvrir ce que Mustache appelle une section. Cette section peut contenir du text/html ou des tags Mustache. Une section est fermée par un tag {{/name}}. Si l’attribut name existe dans votre objet de données et est non null, non vide, non undefined alors Mustache va interpréter cette section. Dans le cas contraire, la section n’est pas interprétée.| var data = {title: "Javascript: the Good Parts", author: ""}; var template = '{{#title}} Title: <b>{{title}}</b> {{/title}} {{#author}} ne sera pas affiché {{/author}}'; var output = Mustache.render(template, data); $('#example').append(output); |
Title: Javascript: the Good Parts
Si name est un array, alors Mustache va itérer sur cet array et interpréter la section autant de fois que nécessaire.
| var data = { books: [ "Javascript: the Good Parts", "Clean Code" ] }; var template = '{{#books}}<li>{{.}}</li>{{/books}}'; var output = Mustache.render(template, data); $('#example').append(output); |
- Javascript: the Good Parts
- Clean Code
{{^name}}, la moustache inverse
C’est l’inverse du tag {{#name}}, c’est-à-dire que le body du tag ne sera interprété que si l’attribut name n’existe pas, est vide, null ou undefined dans votre objet de données. Exemple :| var data = { books: [ ] }; var template = '{{#books}}<li>{{.}}</li>{{/books}} {{^books}}Aucun livre{{/books}}'; var output = Mustache.render(template, data); $('#example').append(output); |
Aucun livre
{{! comment}}, la moustache invisible
C’est le tag de commentaire. Tout ce qu’il y a entre les moustaches est ignorée.| var data = {title: "Javascript: the Good Parts", author: "Douglas Crockford"}; var template = 'Le commentaire suivant ne sera pas affiché : {{! ne doit pas être affiché}}'; var output = Mustache.render(template, data); $('#example').append(output); |
Le commentaire suivant ne sera pas affiché :
{{> tag}}, la moustache partielle
Avec Mustache, il est possible de définir des templates partiels afin de décomposer des templates qui seraient trop verbeux ou des templates que vous récupérez de plusieurs sources.| var data = {title: "Javascript: the Good Parts", author: "Douglas Crockford"}; var template = 'Title: <b>{{title}}</b> <br/>{{> tplAuthor}}'; var partials = { tplAuthor: 'Author: {{author}}' }; var output = Mustache.render(template, data, partials); $('#example').append(output); |
Title: Javascript: the Good Parts
Author: Douglas Crockford
3. Fonctions
Dans votre objet de données, vous n’êtes pas cantonnés à avoir uniquement des valeurs ou des arrays. Vous pouvez également définir des fonctions qui vont déterminer le texte à afficher. Exemple :| var i = 0; var data = { currentdate: function() { return i++;} }; var template = '<li>{{currentdate}}</li>'; $('#example').append(Mustache.render(template, data)); $('#example').append(Mustache.render(template, data)); $('#example').append(Mustache.render(template, data)); |
- 0
- 1
- 2
| var data = { title: "Javascript: the Good Parts", titleDisplay: function() { return function(text, render) { return '<b>' + render(text) + '</b>'; } } }; var template = 'Title: {{#titleDisplay}} {{title}} {{/titleDisplay}}'; var output = Mustache.render(template, data); $('#example').append(output); |
Title: Javascript: the Good Parts
Mais maintenant si je veux afficher le titre en italique et l’entourer par des guillemets, on remplace le corps de la fonction par :
| return '"<i>' + render(text) + '</i>"'; |
Title: “Javascript: the Good Parts“
Donc celui qui fournit l’objet data peut maintenant personnaliser l’affichage du titre.
4. Template multi lignes
“T’es bien gentil Ludo, mais tes exemples sont simplistes, tes templates ne tiennent que sur une seule ligne. Tiens prend ce template là. C’est beaucoup moins beau du coup et on peut vite oublier un antislash…”| var template = 'Title: {{title}} <br/>\ Author: {{author}} <br/>\ Edition: {{edition}}'; |
Effectivement, ce n’est pas très sexy. Alors il y a une petite astuce. Il suffit de mettre le template dans une balise <script> de typetext/html, de récupérer son contenu et de le passer à Mustache ! En exemple ça donne :
| <script id="book" type="text/html"> Title: {{title}} <br/> Author: {{author}} <br/> Edition: {{edition}} </script> |
| var data = {title: "Javascript: the Good Parts", author: "Douglas Crockford", edition: "O'Reilly"}; var template = $('#book').html(); var output = Mustache.render(template, data); $('#example').append(output); |
Title: Javascript: the Good Parts
Author: Douglas Crockford
Edition: O’Reilly
Mais on peut faire encore mieux !
5. ICanHaz.js
ICanHaz.js est une petite librairie Javascript qui wrappe Mustache.js et qui reprend l’idée de définir ses templates dans des balises script de type text/html. Au chargement de la page, ICanHaz.js va rechercher tous les templates de la page, créer un cache contenant ces templates et une fonction pour chaque template. A l’utilisation, c’est encore plus simple que Mustache.js. Si on reprend l’exemple précédent, le javascript devient :| <script id="book" type="text/html"> Title: {{title}} <br/> Author: {{author}} <br/> Edition: {{edition}} </script> |
| var data = {title: "Javascript: the Good Parts", author: "Douglas Crockford", edition: "O'Reilly"}; var output = ich.book(data); $('#example').append(output); |
ICanHaz.js fournit un objet ich et a créé une méthode book correspondant à l’id de la balise script. ICanHaz.js permet également de gérer les partials Mustache de manière élégante en indiquant un attribut à la balise script. Si on remplace la partie “edition” par un partial :
| <script id="book" type="text/html"> Title: {{title}} <br/> Author: {{author}} <br/> {{> edition}} </script> <script id="edition" type="text/javascript"> Edition: {{edition}} </script> |
et l’appel à ich.book(data) reste le même !
Comme je vous le disais précédemment, ICanHaz.js gère un cache de templates et fournit donc des méthodes pour rajouter des templates dans le cache, nettoyer le cache ou recharger le cache.
Conclusion
Si, sur votre projet, vous utilisez jQuery et n’utilisez pas de système de template côté client, alors foncez ! Essayez Mustache.js et ICanHaz.js ! Le tout ne fait que 5,4ko minifié.Ensuite, je voudrais donner quelques précisions sur Mustache.js. Mustache.js est en fait l’implémentation Javascript du système de template Mustache (sans le .js). En effet, il existe de nombreuses implémentations de Mustache, en Java, Ruby, Python, PHP, etc…
De plus, on dit souvent que Mustache est un système de template “logic-less”, car il n’y a pas de if, else ou autre, il n’y a que des tags, que des moustaches :}}
