Introduction à handlebars

Handlebars est un outil qui permet de développer des templates Javascript sémantiques. Le logiciel est hébergé chez GitHub.

Handlebars intègre Mustache hébergé aussi chez GitHub pour sa version Javascript.

Handlebars est disponible en CDN à ces adresses :

//cdn.jsdelivr.net/handlebarsjs/3.0.3/handlebars.amd.js
//cdn.jsdelivr.net/handlebarsjs/3.0.3/handlebars.amd.min.js

J’ai appris à utiliser handlebars à l’aide de ces tutoriels en anglais :
1 – An Introduction to Handlebars
2 – Handlebars.js Tutorial
3 – Learn Handlebars in 10 Minutes or Less
et comme j’aime bien noter en même temps que j’apprends j’en profite pour rédiger ce tutoriel à destination de tous et d’abord de moi-même !

Pour comprendre ce qui est écrit ici, il faut quelques bases : au moins connaitre Javascript, jQuery, CSS, HTML et lire l’anglais car je ne traduis pas ce qui est écrit dans les articles que je cite.

La version actuelle d’handelbars (à la date du 26/6/2015) est la 3.0.3. Un seul fichier(4131 lignes)  constitue le package : handlebars-v3.0.3.js

Handlebars est écrit en Javascript. Ce n’est pas le seul template engine. Le site ici en référence au moins 17 et vous aide à choisir lequel est le mieux adapté à vos besoins. Pour ma part je n’ai pas choisi handlebars, il s’en imposé à moi lors d’un projet de développement d’une application mobile hybride utilisant Cordova.

Handlebars est toutefois reconnu comme étant le, ou un des meilleurs template engines avec underscore et mustache.

Que fait handlebars ?

Handlebars.js is a compiler that takes any HTML and Handlebars expression and compiles them to a JavaScript function.

Handlebar est un compilateur, pas un compilateur qui génère du code machine mais un compilateur qui à partir d’HTML et de commandes handlebars génère du Javascript.

This derived JavaScript function then takes one parameter, an object—your data—and it returns a string with the HTML and the object properties’ values inserted into the HTML

Le code généré par Handlebars est une fonction qui a vos données en paramètres et qui retourne une chaîne HTML.

Rien de mieux qu’un exemple pour comprendre. Je prends celui de 1 (Here are the 3 pieces together).

Advertisements

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s