Templating HTML avec Jade

Retour aux articles Dans #blog le 08/06/2016 par Emmanuel BALLERY

Templating HTML avec Jade

Il y a encore quelques mois, je trouvais que l'on accumulait trop de briques techniques les unes sur les autres :

Alors que je travaillais sur des projets avec AngularJS, j'ai remarqué l'utilisation d'un autre meta-language : Jade.

J'ai détesté.

  • Encore un buzz de plus ?! C'est malheureusement le cas avec les technologies Front qui connaissent une évolution majeures. Des librairies/outils naissent et meurent tous les jours, sans que l'on distingue encore ce qui est péreine de ce qui ne l'est pas.
  • Quel développeur ne connait pas HTML ? C'est un langage de balisage relativement simple et qui évolue très bien pour s'adapter aux besoins modernes et il s'utilise sur un très grand nombre de plateforme.
  • Qui trouve le HTML compliqué ? Il faut connaître une trentaine de balises, des attributs. Bref, c'est loin d'être la mer à boire.
  • Que faut-il de plus à HTML ? HTML5 peut-être, ça tombe bien, on l'a. Les éditeurs de HTML sont relativement simples. Pas besoin de logiciel pour compiler, juste d'un navigateur pour interpréter votre code.

La cerise sur le gateau, pour utiliser Jade il faut installer npm sur votre machine, car le meilleur processeur Jade/HTML est en NodeJS. Une dépendance de plus ...

J'ai utilisé et j'ai adopté.

Avec AngularJS, il est nécessaire de rédiger des templates, sans language de templating par défaut. Quand on fait du Symfony, on a pris l'habitude d'avoir Twig à nos côtés. Parfois, des portions de code se répètent. D'autres fois, on aimerait insérer de la logique, des macros, des variables ... Jade répond finalement à ces problématiques.

Le code est plus court, plus lisible et moins lourd à digérer. La syntaxe est très proche du Yaml :

  • On indente les balises (les enfants sont indentés par rapport aux parents) ;
  • On repère les éléments comme en CSS :
    • div pour créer un tag (par défaut, ce sont des éléments div qui sont crées) ;
    • #id pour ajouter un identifiant à notre élément ;
    • .class pour ajouter une classe à notre élément ;
    • (href='/contact') pour ajouter des attributs autres ;
  • Quelques méthodes permettent de faire de l'héritage ou de l'inclusion de template comme extendsinclude et la gestion de block ;

  • On peut aussi créer des macros (nommées mixin) très simplement :

Toute la documentation est disponible ici : http://jade-lang.com/reference/

Retour aux articles