Getting Started with View Engine
Last Updated :
18 Apr, 2024
A view engine is a tool used in web development to create dynamic HTML content based on data from the server. It acts as a template processor, allowing developers to integrate data with predefined HTML templates easily. View engines are commonly used in frameworks like Express.js for Node.js, Django for Python, and Ruby on Rails. There are different view engines available for various programming languages, such as EJS, Pug, Handlebars, Django, Freemarker, and more.
Choosing the Right View Engine
When selecting a view engine for your Node.js project, consider factors such as:
- Syntax: Choose a view engine with syntax that aligns with your preferences and team's expertise (e.g., Pug, EJS, Handlebars).
- Features: Evaluate the features provided by the view engine, such as template inheritance, partials, conditionals, loops, and custom helpers.
- Performance: Consider the performance implications of the view engine, especially for large-scale applications with high traffic.
- Community Support: Check the community support, documentation, and available resources for the chosen view engine to aid in development and troubleshooting.
Features of View Engine
- It provide a template syntax that allows you to embed dynamic content within HTML markup.
- Many view engines support template inheritance that allow you to define a base template with common layout and structure.
- It supports conditional statements like if-else etc.
- It provides mechanisms for iterating over collections or arrays of data.
- It provides data binding capabilities that allow you to bind data from the server-side to the client-side.
- It provides error handling by providing default values for missing data or rendering custom error pages.
These are the types of View Engine:
EJS View Engine
EJS stands for Embedded JavaScript. It is a template engine designed to be used with server-side JavaScript environments like NodeJS and It is used to generate dynamic content in a web page. It simplifies the generation of HTML by allowing you to embed JavaScript code directly in HTML.
Syntax:
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome, <%= username %> </h1>
<p>Your email is: <%= email%> </p>
</body>
</html>
Pug View Engine
Pug is a concise and expressive templating language with a syntax that significantly reduces the amount of HTML code needed. It supports template inheritance and provides a clean indentation-based syntax.
Syntax:
// base.pug
html
head
title My Website
body
block content
Handlebars View Engine
Handlebars is a logic-less templating engine that focuses on simplicity and ease of use. It provides features like helpers and partials, making it powerful for building dynamic templates.
Syntax:
{{#if loggedIn}}
<p>Welcome, {{username}}!</p>
{{else}}
<a href="/https/www.geeksforgeeks.org/login">Login</a>
{{/if}}
Mustache View Engine
Mustache is a minimalistic templating engine that emphasizes readability and simplicity. It follows the "logic-less" approach, making it suitable for generating HTML from JSON data.
Syntax:
<ul>
{{#users}}
<li>{{name}}</li>
{{/users}}
</ul>
Steps to Implement EJS in Express
Step 1: Create a NodeJS application using the following command:
npm init
Step 2: Install required Dependencies:
npm i ejs express
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2"
}Example: The below example is demonstrating the EJS View Engine for Express.
HTML
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS Example</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks | EJS View Engine</h1>
<h2>Welcome, <%= name %>
</h1>
<p>Your email is: <%= email%>
</p>
</body>
</html>
// index.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
// Set EJS as the view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// Define a route to render the Pug
// template when the root path is accessed
app.get('/', (req, res) => {
//Sending this data from Server
const data = {
name: "jaimin",
email: "[email protected]"
};
// Render the EJS template named 'index' and pass the data
res.render('index', data);
});
// Start the server and listen on the specified port
app.listen(port, () => {
// Display a message when the server starts successfully
console.log(`Server is running at http://localhost:${port}`);
});
Step 4: To run the application use the following command
node index.js
Output: Now go to http://localhost:3000 in your browser:
Similar Reads
Using Mixins with Pug View Engine
Pug is a template/view engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. Among all of these features, it also provides support for Mixins. Mixins is a block of code that can be reused in multiple templates. In t
4 min read
Why use View Engines with Express ?
Express.js is a popular and adaptable framework for developing web apps and APIs using Node.js. Its simplicity, versatility, and solid features make it a popular option among developers. The usage of view engines is an important component of Express.js that greatly helps to its efficacy. In this art
5 min read
Tags in Pug View Engine
Tags play a crucial role in Pug templates, allowing developers to create structured and dynamic HTML content. Let's explore the concept of tags in Pug in detail. Table of Content What are Tags in Pug?Tag AttributesClass and ID AttributesSelf-Closing TagsBlock ExpansionDynamic Tag NamesSteps to Setup
4 min read
What is a View Engine ?
A view engine is a software component that allows the rendering of dynamic content onto a web page. It acts as a bridge between the server side and the client side. When the user accesses any webpage then the server responds to them with dynamic pages which is possible only because of the view engin
4 min read
Pug View Engine Installation
Pug, once known as Jade, makes writing HTML codes eÂasy for NodeJS and web browsers. It's cleÂar syntax and handy features speeÂd up web work and keep things simpleÂ. This quick guide will go over what you neeÂd to use Pug, how to install it, and what it does, and will give you cleÂar steps along wi
2 min read
Pug View Engine - Iteration
Pug is a template engine for NodeJS and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or ref
4 min read
Plain Text in Pug View Engine
Plain text in Pug can be retrieved via a variety of methods, each with its own syntax and advantages. This article will go over many strategies for achieving plain text output in Pug, outlining each approach step by step. We'll also include examples, installation instructions for required modules, p
2 min read
Headings in Pug View Engine
Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or
2 min read
Pug View Engine Introduction
Pug is a template engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. It uses indentation to represent HTML structure. By using Pug you can reuse the HTML code. In this article, we will learn about how to use pug
5 min read
What is includes in Pug View Engine ?
In Pug, "includes" are a way to modularize and reuse code by importing separate Pug files into a main Pug file. This helps in organizing code more efficiently and reduces duplication of code by allowing you to include common sections or components across multiple pages easily. In simple words, Inclu
3 min read