Node.js - 6.3 Présentation des moteurs de modèles

Un modèle HTML contient la structure de la page, avec des emplacements réservés pour le contenu dynamique. Un moteur de modèles remplace ces emplacements par les données de l'application, puis produit du HTML. Cette leçon présente ce principe et trois moteurs populaires.

Comment fonctionne un moteur de modèles

Un modèle contient le balisage HTML, le style et les imports. Il contient aussi des espaces réservés, à l'endroit où le contenu doit changer. Le serveur fournit les données, comme un tableau de produits.

Le moteur analyse le modèle, remplace les espaces réservés, puis renvoie du HTML normal. Le navigateur ne voit jamais le modèle ni ses espaces réservés. La page est générée à la volée, sur le serveur.

Trois moteurs populaires

Chaque moteur a sa syntaxe et sa philosophie. Ils ont tous les trois des fonctionnalités courantes, comme les conditions et les boucles, mais avec des manières différentes de les écrire.

La leçon présente chacun d'eux en bref. Le moteur choisi ensuite pour le cours est Pug.

  • EJS : HTML normal, avec des balises spéciales qui permettent d'exécuter du JavaScript simple, y compris des conditions et des boucles.
  • Pug : syntaxe minimale, sans balises de fermeture, où l'indentation définit l'imbrication. Pug était auparavant appelé Jade.
  • Handlebars : HTML normal avec des doubles accolades, et un ensemble limité de fonctions comme les conditions et les boucles.

Consulter les ressources

Il existe d'autres moteurs de modèles. La documentation officielle de chacun décrit leurs fonctionnalités complètes. La leçon se limite aux trois plus populaires pour éviter la confusion.

Pour choisir un moteur, comparez la syntaxe, la proximité avec le HTML et les fonctions dont vous avez besoin. Cela vous évitera de changer de moteur plus tard.

En résumé

Un moteur de modèles remplit les espaces réservés d'un modèle avec les données du serveur. Le navigateur reçoit ensuite une page HTML normale. EJS, Pug et Handlebars sont trois options populaires, avec des syntaxes différentes.

Points clés

  • Un modèle contient du HTML et des espaces réservés pour les données.
  • Le moteur génère la page HTML au moment de la requête.
  • Le navigateur ne voit jamais le modèle d'origine.
  • EJS garde un HTML proche du standard, avec du JavaScript simple.
  • Pug utilise une syntaxe minimale fondée sur l'indentation.

Questions fréquentes

Pourquoi utiliser un moteur de modèles ?

Pour produire des pages HTML dynamiques à partir des données de l'application, sans écrire chaque page à la main.

Quel est l'ancien nom de Pug ?

Pug était auparavant appelé Jade. Le nom a changé, mais le moteur reste le même.

Quel moteur le cours retient-il ?

Le cours retient Pug. Les autres moteurs sont présentés pour comparaison.