Un moteur de template sous NodeJS

Découvrez Handlebars, un moteur de template pour Express sous NodeJS

Nous avons vu, lors de précédents articles, comment implémenter un serveur Express sous NodeJS puis une application possible sous la forme d'une API. Nous continuons notre voyage en ajoutant une brique supplémentaire : le rendu dans le navigateur web. Jusqu'à présent, nous nous étions, en effet, contenté de restituer les informations dans la console du navigateur, nous allons donc remédier à ce point en ajoutant des vues.

Un moteur de template

Rappelons tout d'abord ce qu'est un moteur de template.
Dans une architecture MVC, comprenez Model View Controller, la restitution à l'écran de l'information est volontairement isolée des parties fonctionnelles ou logiques d'un projet. Cela offre plusieurs avantages comme la clarté d'organisation, la facilité de maintenance ou encore la souplesse de partage des rôles entre les différents intervenants. La partie restitution visuelle, appelée vue, s'en trouve ainsi déportée et déclinée selon les besoins. Vous conviendrez cependant que le serveur doit communiquer avec ces vues pour leur donner les informations à restituer, c'est le travail du moteur de template.
Vous connaissez peut-être Smarty, un moteur de template pour PHP. Il en existe beaucoup d'autres. Celui qui nous intéresse ici est dédié à Express, il s'agit de Handlebars.

Installation des packages

La première étape va consister à installer les packages nécessaires, en l'occurence Express et HandleBars.

npm install express express-handlebars

Implémentation du serveur

Notre serveur va reprendre les bases que nous avions posées dans un précèdent article, à la différence que, cette fois, nous allons charger le moteur HandleBars puis associer une vue à nos routes. Voici une première version du serveur, que nous nommerons serveur.js pour faire simple :

//Chargement express et declaration des parametres du serveur
const express = require('express')
const server = express()

//Chargement du moteur de template
const { engine } = require('express-handlebars');

const host = '127.0.0.1';
const port = 3280;

server.engine('handlebars', engine());
server.set('view engine', 'handlebars');
server.set('views', './views');

server.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

server.get('/', (req, res) => {
  res.render('home');
})

server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

Dans la première partie, nous instancions le serveur Express, nous chargeons ensuite HandleBars puis associons le moteur à notre serveur. Pour cette première version, nous n'avons qu'une seule route, la racine. Depuis celle-ci nous redirigeons le visiteur vers une vue nommée home via l'instruction "render".
Il va désormais nous falloir créer cette vue.

Arborescence et vues

Il faut tout d'abord savoir que les vues Handlebars sont des fichiers html dont l'extension est ".handlebars". Par ailleurs, comme vous l'avez peut-être remarqué dans notre code ci-dessus, nous précisons au moteur ou se situe les vues (ici, dans le répertoire views situé à la racine). Il nous faut donc créer un répertoire "views" à la racine puis y placer un fichier home.handlebars, du nom de notre vue.
Enfin Handlebars attend un layout, c'est à dire une vue parente, commune à toute les autres. Chacune des vues que nous ajouterons viendra simplement insérer, à l'image d'un include, son code dans le cadre de base qu'est le layout. Le layout attendu se nomme main.handlebars et doit être situé dans un répertoire "layouts" situé lui-même dans le répertoire "views" créé précédemment.
Notons néanmoins qu'il est possible via un paramètre {layout: false} donné à la méthode render de se passer de layout. En ce qui nous concerne, nous allons conserver le système de layout.
Ceci étant dit, créons notre arborescence :

serveur.js
views
 |
 |-- home.handlebars
 |-- layouts
       |
       |-- main.handlebars

Notre arborescence est créée. Voyons désormais le contenu du fichier main.handlebars :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tableaux de bord sous NodeJS</title>
</head>
<body>
  {{{body}}}
</body>
</html>

Il s'agit, comme vous le constatez, d'un html classique, à l'exception d'une variable body a la place de laquelle va venir s'insérer la restitution de notre vue home.
Voyons, à présent, le contenu de notre vue home.handlebars :

<h1>Bienvenue sur votre plateforme Data !</h1>

Nous ne retrouvons dans la vue home que le contenu du body de la page. Il s'agit d'un exemple très simple, pour l'instant, que nous développerons par la suite.

Lancement et requête du serveur

Tout est en place, lançons le serveur à présent :

node serveur.js

Serveur running at http://127.0.0.1:3280/

Si nous nous rendons, depuis un navigateur sur l'adresse http://127.0.0.1:3280/, nous allons decouvrir ceci :

Variables et helpers

Nous nous sommes contentés d'afficher une vue fixe, aussi nous allons désormais voir comment passer à notre vue des variables, résultantes d'un traitement du serveur. Deux types d'objets sont disponibles les variables et les fonctions, appelées helpers.
Pour illustrer ce point, nous allons ajouter une nouvelle route "dashboard" puis y associer une vue du même nom. Lors de l'appel à cette vue via la méthode render, nous allons définir une variable vTitre contenant le titre de la vue à éditer, puis une fonction retournant un nombre de salariés.
Voici tout d'abord le code de la nouvelle route, à ajouter coté serveur :

server.get('/dashboard', (req, res) => {
  res.render('dashboard', {
     vTitre: "Salaires par secteur d'activite",
     
     helpers: {
       nombreSalaries() { return 318+40; }
     }
  });
})

Voici ensuite le contenu de la vue dashboard.handlebars :

<h1>{{vTitre}}</h1>
Nombre de Salaries : {{nombreSalaries}}

Le résultat, sur requête de l'adresse http://127.0.0.1:3280/dashboard, est le suivant :

Aller plus loin

Handlebars permet de faire beaucoup plus de choses bien entendu, aussi il est conseillé de visiter la page du projet pour creuser selon ses besoins : express-handlebars

Retrouvez dans la rubrique "Nos datasets" toutes les données dont vous aurez besoin pour tester et pratiquer !