Quand on fait du Node.js, on se rend compte qu’il existe un nombre important de moteurs de template à disposition, chacun ayant ses avantages et ses inconvénients. Parmi tout ce choix, il y en a un qui a retenu mon attention récemment : Nunjucks. Et c’est signé Mozilla.

Toi qui te balade sur ce blog tout neuf, tu ne le sais peut-être pas encore mais tu lis un article sur une page générée avec Nunjucks.

Personnellement, je l’ai choisi parce que j’ai l’habitude de développer avec le framework Django qui utilise le moteur pour Python Jinja2. D’ailleurs, ce dernier est tellement pratique qu’il a inspiré Twig (moteur PHP développé par l’équipe de Symfony). Et Nunjucks est quasiment une copie conforme de Jinja2.

L’autre raison c’est que je n’apprécie pas toujours la syntaxe proposée par d’autres moteurs de template. Personnellement, je suis allergique aux syntaxes type Pug (anciennement Jade), où là, clairement, ça ne ressemble plus à de l’HTML. Je n’ai pas pu me faire non plus au style d’EJS qui oblige à itérer avec des vieilles boucles Javascript for (var i=0; i < length; i++) bien dégueulasses.

Pour moi, seul Handlebars sort du lot et propose une syntaxe agréable et des fonctionnalités avancées. Mais si tu as l’habitude d’utiliser Twig ou Jinja2, il faut que tu essayes Nunjucks pour tes projets Node.js, ça vaut le coup !

Un petit exemple pour illustrer :

{% extends 'manger.html' %}

{% block repas %}

  <ul>
    {% for pizza in pizzas %}
      <li>{{ pizza }}</li>
    {% endfor %}
  </ul>

{% endblock %}

Pas mal hein ? J’aime ce type de syntaxe, et ça me permet de ne pas trop me dépayser quand je bosse sur des frameworks comme Django ou Symfony.

Lancer un projet

Bon maintenant, je vais te montrer comment installer tout ça sur ton projet Node.js.

Commence par initialiser ton projet :

npm init -y

Installe les dépendances Express et Nunjucks :

npm install express nunjucks

Je te conseille de créer une répertoire templates dans lequel tu mettras tous tes fichiers HTML.

mkdir templates

Comme d’habitude, tu crées un fichier racine server.js dans lequel on tape du code :

const express = require('express');
const nunjucks = require('nunjucks');

const app = express();

On va maintenant configurer Nunjucks :

/* En premier paramètre, le répertoire qui contient les templates */
nunjucks.configure('templates', {
  express: app,
  autoescape: true
});

On configure une route et on active le serveur :

app.get('/', (req, res) => {
  res.render('pizza.html');
});

app.listen(3000, () => console.log('Go pizza on port 3000'));

Il manque quand même un petit quelque chose : le template ! Va dans le répertoire templates et ajoute un fichier pizza.html avec dedans ce que tu veux :

<h1>Hello pizza</h1>

Retourne à la racine et démarre le serveur

node server.js

Si tu vas sur http://localhost:3000, tu auras un joli titre à l'écran.

Maintenant, comment on fait pour passer de la data au template ? Tout bêtement, revient sur ta route dans ton fichier server.js :

app.get('/', (req, res) => {
  const locals = {
    pizza: 'Marinara',
    mangeurs: ['Michel-Michel', 'Jean-Lin', 'Bernard']
  }
  res.render('pizza.html', locals);
});

Retourne maintenant sur ton fichier index.html et tape ça :

<h1>Ce soir c’est {{ pizza }}</h1>

<h2>Participants :</h2>

<ul>
  {% for mangeur in mangeurs %}
    <li>{{ mangeur }}</li>
  {% endfor %}
</ul>

Lance ton serveur, et là magie ! Tu viens de transmettre le nom d’une pizza et itérer sur une liste de mangeurs (je pense qu'à bouffer, oui).

Utiliser les filtres

Comme sur Jinja2 ou Twig, tu peux utiliser des filtres :

{{ pizza | capitalize }}
<!-- PIZZA -->

La liste est très longue et disponible sur la documentation. Et si tu n’en as pas assez, tu peux créer les tiens très facilement.

L'héritage

Tu peux aussi créer des blocks dans un template parent et permettre aux templates enfants de renseigner des infos lorsqu’ils héritent de celui-ci.

Ajoute un fichier base.html dans ton dossier templates :

<html>
<head>
  <title>Pizza party</title>
</head>
<body>

  <p>Coucou, je suis partout!</p>

  {% block content %}{% endblock %}

</body>
</html>

Maintenant retourne dans ton fichier pizza.html et ajoute au tout début :

{% extends 'base.html' %}

Et enveloppe le contenu du block content :

{% block content %}
  <h1>Ce soir c’est {{ pizza }}</h1>
{% endblock %}

Le template enfant hérite désormais de son parent base.html.

De la même manière tu peux inclure des bouts de templates :

{% include 'marinara.html' %}

... et itérer avec !

{% for pizza in pizzas %}
   {% include 'olive.html' %}
{% endfor %}

Bref, tu l'auras compris : je ne vais pas passer en revue toutes les possibilités tellement elles sont nombreuses. Je t'invite à lire la doc et approndir le sujet si ça t'intéresse.

Références


Besoin d'un site internet, d'une application, de services de motion design ou de community management ?