A la découverte de Jade

“Un Moteur de Template”. Ça vous dit quelque chose ? Vous en connaissez peut-être déjà : Smarty, twig, EJS, Haml etc.

Aujourd’hui, l’utilisation de ces moteurs est devenue une monnaie courante : ils sont simples à mettre en place, leurs langages sont faciles à écrire et permettent de produire du HTML très rapidement. De fait, tout ce qui est fait en plusieurs lignes de codes peut se simplifier en seulement quelques petites lignes. C’est la fameuse méthode DRY : don’t repeat yourself !

L’utilisation des moteurs de templates vient surtout du fait que vous pouvez récupérer des variables de votre Frameworks favori, faire des inclusions, des boucles, des conditions… Tout ce que vous pourriez faire normalement avec un autre langage comme le PHP. La structure du code est souvent simplifiée et mieux ordonnée – vous pouvez voir vos variables en un clin d’œil.

Jade

Parmi tout ça, faisons maintenant un arrêt sur image sur Jade. Créé en 2009, inspiré de Haml – qui était basé sur ruby- Jade est un moteur de template basé sur JavaScript. Simple à prendre en main, puissant et modulaire, vous pouvez utiliser Jade avec PHP, Scala, Ruby, python, Java.

Ici, on va voir comment générer des feuilles HTML, de la même manière que les préprocesseurs CSS. D’ailleurs si vous vous êtes familiarisé avec les préprocesseurs CSS, alors ça devrait être un jeu d’enfant ! Et cerise sur le gâteau, il est possible de faire des inclusions de fichiers très rapidement pour éviter la répétition de vos blocks, exactement comme le fait PHP avec ses includes Jade (ce qui n’est pas possible de faire facilement sur Haml), c’est ce qui fait réellement la puissance de Jade.

Installation de jade :

Si vous avez Node.JS alors vous pouvez installer Jade avec la commande suivante (sudo pour les linuxiens) :

sudo npm install jade

Vérifiez si vous avez bien la dernière version (le gitHub du projet) :

npm info jade (ou npm jade -v)

jade -h : Pour voir les commandes de bases.

Usage: jade.js [options] [dir|file ...]

Options :

 -h, --help output usage information
 -V, --version output the version number
 -O, --obj <str> javascript options object
 -o, --out <dir> output the compiled html to <dir>
 -p, --path <path> filename used to resolve includes
 -P, --pretty compile pretty html output
 -c, --client compile function for client-side runtime.js
 -D, --no-debug compile without debugging (smaller functions)
 -w, --watch watch files for changes and automatically re-render

Structure de base

Bien, avec toutes ses indications faisons un essai. J’ai créé une petite structure dans un dossier « jade» qui contient un fichier index.jade dans un dossier « jadeFiles ».

Je demande à jade “d’observer le fichier” et de le compiler s’il y a des changements quand j’écris dessus, tout ça de manière automatique avec cette ligne de commande.

jade --pretty --watch jadeFiles/index.jade --out /jade

–prety permet de compiler le HTML sans le minifier

Au final, à chaque modification de votre fichier, le .jade est compilé. Exactement comme avec les préprocesseurs CSS.

Note : si vous utilisez Prepros, vous pouvez compiler vos Jade facilement.

Utilisation de jade :

Voici un aperçu d’une structure de base en Jade, plus besoin de balises fermantes ici :

!!! 5
html
  head
    //-Bloc de commentaire ; sera caché en production.
    // Bloc de commentaire ; affiché en production sous forme de commentaires HTML
    title my jade template
  body
    h1 Hello #{name}

Ce qu’il faut retenir : l’indentation dans votre code est importante, deux espaces pour une indentation signifient que ça devient un sous-bloc, autrement dit : un bloc enfant. (Exactement comme les fichiers SCSS).

Prenez l’exemple d’une liste.

A moins de faire du Zen Coding, faire une liste en HTML peut devenir un véritable enfer, surtout si cette liste contient plusieurs dizaines d’éléments contenant eux même d’autres éléments (le cas d’un menu déroulant par exemple). Avec Jade, on peut faire ça de façon simple et lisible. Voyons un exemple en Html de base :

<ul class="realisateur">
  <li>
    <div>Andreï Tarkovski</div>
    <ol class="tar">
      <li>Le miroir</li>
      <li>Stalker</li>
      <li>Le Sacrifice</li>
    </ol>

    <div>Robert Bresson</div>
    <ol class="bre">
      <li>Un condamné à mort s'est échappé</li>
      <li>Au hasard Balthazar</li>
      <li>Mouchette</li>
    </ol>
  </li>
</ul>

Et en jade ça donnerait :

ul.realisateur
  li
  div Andreï Tarkovski
    ol.tar
      li Le miroir
      li Stalker
      li Le Sacrifice
  li
  div Robert Bresson
    ol.bre
      li Un condamné à mort s'est échappé
      li Au hasard Balthazar
      li Mouchette

Si on veut aller un tantinet plus loin on pourrait automatiser le tout, en manipulant les datas avec une boucle each et des conditions :

ul.realisateur 
  realisateurs = [{ film1: 'Le miroir', film2: 'Stalker', film3: 'Le Sacrifice', nom:'Andreï Tarkovski', nomAbr:'tar', oscar:false }, { film1: 'Un condamné à mort s\'est échappé', film2: 'Au hasard Balthazar', film3: 'Mouchette', nom:'Robert Bresson', nomAbr:'bre', oscar:false}]
  each rea in realisateurs
    li
      div= rea.nom
      if !rea.oscar
        p #{rea.nom} n'a pas obtenu d'oscar.
      else
        p #{rea.nom} a obtenu un oscar.
      ul(class=rea.nomAbr)
        li rea.film1
        li= rea.film2
        li= rea.film3

Les includes

Si plusieurs parties de votre site se répètent (footer, sidebar etc.) faire une inclusion de fichier en Jade, c’est intéressant lorsque vous devez faire l’intégration d’un site complet en Full HTML. Le footer, la sidebar, les métadonnées dans le head. Voici un exemple d’inclusion :

Je place un fichier “_header”, dans le dossier include qui contiendra toutes les métadonnées du head

doctype HTML
html(lang="en")
  head
    include include/_header
  body

Dans le fichier “_header” j’ai :

meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')

title Titre de la page 

link(rel='stylesheet', href='css/main.css')
script(src='js/vendor/modernizr-2.6.2.min.js')

Ecrire du JavaScript :

Avec Jade vous avez aussi la possibilité d’écrire du JavaScript directement dans le code HTML. Les chevrons peuvent être échappés facilement avec l’argument « = » pour éviter toutes failles XSS.

Exemple :

p= “Un texte <strong>important</strong>'
<p>Un texte &lt;strong&gt;important&lt;/strong&gt;</p>

Possibilité aussi d’écrire du JavaScript dans le HTML en ajoutant un tiret devant chaque portion de code :

- var javascript = true
- if (javascript) {
- for (var x = 0; x < 3; x++)
li Salut
- }

 Les avantages :

Comme on l’a vu, les avantages sont nombreux :

  • Simplification du code,
  • Facile à lire,
  • De meilleures performances par rapport à Haml,
  • Diminuer les tâches répétitives,
  • Inclusions de fichiers,
  • Découvrir une nouvelle façon de faire du HTML,
  • et Pour vous convaincre davantage, voici 11 raisons de migrer vers Jade.

 Les inconvénients :

Mais il y a aussi quelques inconvénients :

  • Il y a toujours un certain temps d’adaptation quand on apprend un nouveau langage.
  • Malgré que le code soit simple à lire, si vous travaillez a plusieurs sur un projet cela peut devenir compliqué, car généralement plusieurs personnes modifient le HTML.

Ressources :

Le site officiel, avec quelques commandes & une doc de l’API : http://jade-lang.com

Apprendre Jade de façon interactif en modifiant le code directement dans le code de la page :

Le HTML5 boilerplate en Jade :

https://github.com/dmotz/jade-html5-boilerplate