Explorer les moteurs de modèles HTML pour Node.js / Blogs / Perficient

La fusion des moteurs de modèles HTML avec Node.js a déclenché une vague de transformation dans le développement Web, remodelant le paysage de la création d’applications Web dynamiques. Ces moteurs offrent aux développeurs un moyen efficace de générer dynamiquement du contenu HTML, améliorant ainsi la lisibilité et la gestion des référentiels de code. Au cours de cet article de blog, nous nous lancerons dans l’exploration de trois principaux moteurs de modèles HTML adaptés à Node.js : Carlin, EJSet Guidon. Notre parcours comprendra non seulement l’intégration de ces moteurs dans une application Node.js, mais également l’élucidation de leur utilisation pratique à travers des exemples illustratifs. De plus, nous vous guiderons tout au long du processus de création d’une application Node.js à partir de zéro, en détaillant l’intégration de chaque moteur de modèle et en explorant leurs fonctionnalités avancées.

Comprendre les moteurs de modèles HTML

Avant de nous lancer dans l’exploration des caractéristiques distinctives des moteurs de modèles individuels, il est essentiel de saisir l’importance fondamentale des moteurs de modèles dans le paysage du développement Web Node.js.

Les moteurs de modèles HTML rationalisent le processus de génération de contenu HTML dynamique en intégrant de manière transparente le balisage HTML aux données et à la logique dynamiques. Ils rationalisent le processus de génération HTML en fournissant des mécanismes pour intégrer des variables, des conditions, des boucles et des partiels directement dans les fichiers HTML. Cette séparation entre la présentation et la logique favorise une réutilisabilité et une maintenabilité améliorées du code, facilitant ainsi les processus de développement plus fluides.

Étape 1 : configuration de l’application Node.js

Nous allons lancer le processus en initialisant une nouvelle application Node.js et en configurant les dépendances essentielles.

mkdir nœud-template-engine-app

cd nœud-modèle-moteur-application

npm init -y

Étape 2 : Installation des dépendances

Dans cette étape, nous intégrerons Express.js, un framework Web rapide, sans opinion et minimaliste conçu pour Node.js. Il offre une suite complète de fonctionnalités adaptées aux applications Web et mobiles.

npm installer express

Étape 3 : Création de la structure des dossiers

Créez un dossier de vues dans le répertoire racine du projet. Ce dossier contiendra les fichiers modèles pour chaque moteur de modèles.

vues mkdir

Étape 4 : Création de fichiers modèles

Créez des fichiers de modèle pour chaque moteur de modèle – indexez dans le dossier des vues index.pug, index.ejset index.guidons.

Explorons chacun de ces moteurs de modèles en détail.

1. Carlin (anciennement Jade)

Pug, anciennement connu sous le nom de Jade, est un moteur de modèles riche en fonctionnalités pour Node.js et les navigateurs. Il possède une syntaxe concise et expressive, utilisant l’indentation et les sauts de ligne pour définir la structure HTML, éliminant ainsi le besoin de balises HTML verbeuses.

Installation:

npm installer le carlin

Exemple:

doctype html
html(lang="en")
  head
    title My Website
  body
    h1 Welcome to My Website – Pub HTML Template Engine
    p#intro Hello, #{name}!

Fonctionnalités avancées de Carlin :

Pug offre des fonctionnalités avancées telles que le mixage, les inclusions et les filtres, permettant aux développeurs de créer des composants réutilisables et d’étendre les fonctionnalités sans effort.

Créez un nouveau fichier nommé en-tête.pug dans le répertoire de la vue :

en-tête.pug :

header
    nav
        ul
            li Home
            li About
            li Contact

Ce en-tête.pug fichier définit une section d’en-tête avec un menu de navigation contenant des liens vers Maison, À proposet Contact pages.

Créez un nouveau fichier nommé pied de page.pug dans le répertoire de la vue :

footer.pug :

footer
    p © 2024 My Website. All rights reserved.

Ce pied de page.pug Le fichier définit une section de pied de page avec un avis de droit d’auteur.

Maintenant, vous pouvez inclure en-tête.pug et pied de page.pug dans ton index.pug fichier pour créer une mise en page complète de page Web.

index.pug :

doctype html
html(lang="en")
  head
    title Welcome to My Website – Pub HTML Template Engine
  body
    include header.pug
    main
      h1 Welcome #{name} to My Website
    include footer.pug

L’extrait de code Pug fournit une structure concise et expressive pour un document HTML, commençant par une déclaration du doctype et définissant l’attribut de langage pour la balise HTML. Le document comprend une section d’en-tête, une zone de contenu principale comportant un en-tête de bienvenue avec interpolation dynamique de la variable de nom (par exemple, #{nom}), et une section de pied de page. L’utilisation de l’indentation signifie l’imbrication des éléments, améliorant la lisibilité et maintenant une structure visuelle propre. La directive include intègre de manière transparente des fichiers Pug séparés pour les sections d’en-tête et de pied de page, favorisant la modularité et la réutilisabilité du code. Dans l’ensemble, le code Pug organise succinctement les composants du document HTML, facilitant le développement et la maintenance efficaces des pages Web.

2. EJS (JavaScript intégré)

EJS, ou Embedded JavaScript, est un moteur de modèles simple et puissant pour Node.js. Il permet aux développeurs d’intégrer du code JavaScript directement dans le balisage HTML, ce qui facilite l’injection de données dynamiques et de logique dans les modèles.

Installation:

npm installer ejs

Exemple:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p id="intro">Hello, <%= name %>!</p>
  </body>
</html>

Fonctionnalités avancées d’EJS :

EJS prend en charge les modèles dynamiques et le rendu conditionnel, permettant aux développeurs de créer facilement des mises en page dynamiques et réactives.

index.ejs :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <% if (loggedIn) { %>
    <h1>Welcome <%= username %></h1>
    <% } else { %>
    <h1>Welcome Guest</h1>
    <% } %>
  </body>
</html>

L’extrait de code EJS présente une structure de document HTML dans laquelle le contenu dynamique est intégré de manière transparente à l’aide de la syntaxe JavaScript intégrée. Il comprend une logique conditionnelle pour afficher un message de bienvenue personnalisé basé sur le loggedIn statut. Si l’utilisateur est connecté, son username est inséré dynamiquement dans le titre, sinon, une valeur par défaut «Bienvenue invité» message s’affiche. La capacité d’EJS à intégrer du code JavaScript directement dans le balisage HTML simplifie le processus de génération de contenu dynamique, ce qui en fait un outil puissant pour créer des applications Web réactives.

Guidon

Guidon est un moteur de création de modèles sémantiques avec une syntaxe minimale et des fonctionnalités puissantes. Il adopte une approche sans logique, mettant l’accent sur la simplicité et la convivialité. Les modèles de guidons exploitent les assistants pour étendre les fonctionnalités.

Installation:

npm installer le guidon express

Exemple:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p id="intro">Hello, {{name}}!</p>
</body>
</html>

Caractéristiques avancées du guidon :

Les guidons fournissent des aides pour étendre les fonctionnalités, permettant aux développeurs de mettre en œuvre une manipulation de données complexe et un rendu conditionnel. De plus, nous introduirons la notion de mise en page par défaut utilisant un main.hbs Le fichier agit comme un cadre global partagé entre toutes les pages Web.

Créez un fichier nommé main.hbs dans un dossier nommé layouts (ou tout autre nom de dossier approprié de votre choix) :

layouts/main.hbs :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>

    <main>
      {{{body}}}
    </main>

    <footer>
      <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Ce modèle HTML constitue la base d’une structure de page Web, comprenant un en-tête affichant un message de bienvenue et un menu de navigation, une section de contenu principale destinée à l’insertion de contenu dynamique et un pied de page présentant des informations de droit d’auteur. Exploitant la puissance de la syntaxe des modèles de guidons, le {{ title }} l’espace réservé remplit dynamiquement le titre de la page, tandis que l’espace réservé {{{ body }}} l’espace réservé intègre de manière transparente le contenu principal, facilitant l’intégration transparente des données dynamiques. Par conséquent, ce modèle est la pierre angulaire de la création de pages Web dynamiques, permettant aux développeurs de créer sans effort des expériences utilisateur réactives et engageantes.

index.handlebars :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    {{#if loggedIn}}
      <h1>Welcome {{username}}</h1>
    {{else}}
      <h1>Welcome Guest</h1>
    {{/if}}
  </body>
</html>

L’extrait de code guidons définit la structure d’un document HTML avec un contenu dynamique rendu à l’aide de la syntaxe guidons. Il intègre une logique conditionnelle pour afficher un message de bienvenue personnalisé basé sur le loggedIn statut, intégrant de manière transparente les variables et les structures de contrôle dans le balisage HTML. Le paradigme de création de modèles sans logique de guidon favorise la simplicité et la lisibilité, permettant une manipulation efficace des données et le rendu du contenu dynamique. Cette approche concise et expressive rationalise le processus de développement, faisant de guidon un choix efficace pour créer des applications Web dynamiques.

Étape 5 : Intégration des moteurs de modèles dans l’application Node.js

Maintenant que nous avons configuré notre application Node.js et intégré divers moteurs de modèles HTML, créons des fichiers app.js distincts pour chaque moteur de modèle avec des explications.

Pour le Carlin :

app.js :

const express = require("express");
const app = express();

// Set Pug as the view engine
app.set("view engine", "pug");

// Define routes
app.get("/", (req, res) => {
  // Render index.pug with data
  res.render("index", { name: "John" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explication:

Dans ce fichier app_pug.js, nous définissons Pug comme moteur d’affichage en utilisant app.set(‘afficher le moteur’, ‘pug’). Ensuite, nous définissons une route pour le chemin racine (‘/’) qui rend le index.pug modèle et lui transmet quelques données (dans ce cas, le titre « Exemple de carlin »). Enfin, nous lançons le serveur et le configurons pour écouter sur le port 3000.

Pour EJS :

app.js :

const express = require("express");
const app = express();

// Set EJS as the view engine
app.set("view engine", "ejs");

// Define routes
app.get("/", (req, res) => {
  // Render index.ejs with data
  res.render("index", { loggedIn: true, username: "John" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explication:

Dans ce fichier app_ejs.js, nous définissons EJS comme moteur d’affichage en utilisant app.set(‘afficher le moteur’, ‘ejs’). Ensuite, nous définissons une route pour le chemin racine (‘/’) qui rend le index.ejs modèle et lui transmet certaines données (dans ce cas, le connecté statut et le nom d’utilisateur). Enfin, nous lançons le serveur et le configurons pour écouter sur le port 3000.

Pour les guidons :

app.js :

const express = require("express");
const exphbs = require("express-handlebars");
const app = express();

// Set Handlebars as the view engine
app.engine(
  "handlebars",
  exphbs.engine({
    extname: "handlebars", // Set Handlebars file extension to '.hbs'
    defaultLayout: "main", // Set the default layout file
    layoutsDir: __dirname + "/layouts", // Specify the directory for layout files
  })
);
app.set("view engine", "handlebars");

// Define routes
app.get("/", (req, res) => {
  // Render index.handlebars with data
  res.render("index", { loggedIn: true, username: "John", title: "Home" });
});

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Explication:

Dans ce fichier app_handlebars.js, nous définissons guidon comme moteur d’affichage en utilisant app.engine(‘handlebars’, exphbs()) et app.set(‘afficher le moteur’, ‘guidon’). Ensuite, nous définissons une route pour le chemin racine (‘/’) qui rend le index.guidons modèle et lui transmet certaines données (dans ce cas, le connecté statut et le nom d’utilisateur). Enfin, nous lançons le serveur et le configurons pour écouter sur le port 3000.

Ces fichiers app.js distincts illustrent le processus de configuration et d’exécution d’une application Node.js utilisant divers moteurs de modèles HTML, soulignant la polyvalence et les capacités d’intégration transparentes fournies par chacun.

Étape 6 : Exécuter l’application Node.js

Maintenant, exécutons notre application Node.js.

nœud app.js

Pour observer le résultat de notre application, ouvrez simplement votre navigateur Web et visitez localhost:3000. Cela affichera le contenu rendu généré par notre application Node.js.

Sortir:

Carlin:

EJS :

Guidon:

Choisir le bon moteur de modèle HTML pour Node.js

Chaque moteur de modèle HTML a sa syntaxe, ses fonctionnalités et ses avantages uniques. La sélection du moteur de modèles à utiliser dépend de divers facteurs, notamment les spécifications du projet, les préférences individuelles et l’expertise de l’équipe. Néanmoins, Handles est une option exceptionnelle s’il privilégie la simplicité et la convivialité, en raison de sa méthodologie sans logique et de sa syntaxe simple. Il atteint un équilibre parfait entre adaptabilité et simplicité, le positionnant comme un choix idéal pour répondre à diverses exigences d’application.

Conclusion

En résumé, les moteurs de modèles HTML servent de composants essentiels dans le développement Web Node.js, rationalisant la génération de contenu HTML dynamique. Que vous choisissiez Pug, EJS, Guidon ou un autre moteur de modèles, chacun offre des fonctionnalités robustes pour optimiser votre flux de travail de développement. En comprenant leurs subtilités et en les intégrant habilement dans vos applications Node.js, vous pouvez renforcer la productivité et obtenir des résultats exceptionnels.