Express.js - Template Engine

Key Concepts of Template Engines

• Dynamic Rendering : Template engines enable you to generate HTML dynamically based on data passed from the server.
• Separation of Concerns : They help separate the presentation layer (HTML) from the business logic (JavaScript code), making the application easier to maintain.
• Data Binding : Template engines provide syntax to bind dynamic data (like variables, loops, conditions) into static HTML structures.
• Reusability : Templates can be reused across different parts of the application.

Popular Template Engines for Express.js

• EJS (Embedded JavaScript) : EJS is a simple, flexible templating engine for Express. It allows you to embed JavaScript directly inside HTML file.
• Pug (formerly known as Jade) : Pug is a minimalist and concise templating engine that uses indentation instead of HTML tags to create the structure. It is clean and allows for a more readable syntax.
• Handlebars: Handlebars is an extension of the Mustache template language and provides powerful helpers for logic and formatting in the templates.
• Mustache : Mustache is a logic-less template engine that is simple and easy to use.

Syntax of Template Engines

EJS (extension : .ejs)

<% if (user) { %>
    <p>Hello, <%= user.name %>!</p>
<% } else { %>
    <p>Please log in.</p>
<% } %>

Pug (extension : .pug)

if user
  p Hello, #{user.name}!
else
  p Please log in.

Handlebars (extension : .hbs)

{{#if user}}
    <p>Hello, {{user.name}}!</p>
{{else}}
    <p>Please log in.</p>
{{/if}}

Mustache (extension : .mustache)

{{#user}}
    <p>Hello, {{user.name}}!</p>
{{/user}}
{{^user}}
    <p>Please log in.</p>
{{/user}}

Advantages of Using a Template Engine

• Separation of Logic and HTML
• Dynamic Content
• Reusable Templates
• Simplified Syntax

Prev Next