Key features of EJS
EJS (Embedded JavaScript) is a templating engine for Node.js that allows you to generate HTML markup with plain JavaScript. It integrates seamlessly with Express.js and is known for its simplicity and flexibility. Here are some key features of EJS:
1. Simple Syntax
EJS uses a straightforward syntax that integrates JavaScript logic into HTML. It is easy to learn and use, especially for those familiar with JavaScript and HTML. EJS tags are embedded within <% %> delimiters.
Example:
<h1><%= title %></h1>
<p><% if (showMessage) { %>Welcome to EJS!<% } %></p>
2. Data Binding
EJS allows you to pass data from your server-side code to your templates. You can use data to dynamically generate content and render it in the browser.
Example:
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page', showMessage: true });
});
Template (views/index.ejs):
<h1><%= title %></h1>
<p><% if (showMessage) { %>Welcome to EJS!<% } %></p>
3. Template Inheritance
EJS supports template inheritance, allowing you to create a base layout and extend it in other templates. This promotes reusability and reduces code duplication.
Example:
Base Layout (views/layout.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<%- body %>
</main>
<footer>
<p>Footer content</p>
</footer>
</body>
</html>
Page Template (views/home.ejs):
<% layout('layout') %>
<h2>Home Page</h2>
<p>This is the home page content.</p>
4. Partial Templates
EJS allows you to include partial templates, which are reusable components like headers, footers, and navigation bars.
Example:
Header Partial (views/partials/header.ejs):
<header>
<h1>My Website</h1>
</header>
Usage in Main Template (views/index.ejs):
<%- include('partials/header') %>
<p>Content goes here...</p>
5. JavaScript Logic
You can include JavaScript logic directly within your EJS templates. This includes loops, conditionals, and other control structures.
Example:
<ul>
<% items.forEach(item => { %>
<li><%= item %></li>
<% }); %>
</ul>
6. Safe HTML Output
EJS provides a way to render HTML without escaping it by using the <%- %> tag. This is useful when you need to render HTML content that is safe and intended.
Example:
<div>
<%- rawHtml %>
</div>
7. Supports Static Files
EJS integrates well with static files such as CSS, JavaScript, and images. You can easily include these files in your templates.
Example:
<link rel="stylesheet" href="/styles/main.css">
<script src="/scripts/main.js"></script>
8. Error Handling
EJS provides error handling for template rendering. If there is an error in your template code, you will receive a helpful error message indicating the problem and its location.
9. Lightweight and Fast
EJS is known for its lightweight nature and fast performance. It does not require extensive setup or configuration and is efficient in rendering templates.
10. Integration with Express
EJS works seamlessly with Express.js, making it a popular choice for server-side rendering of views in Express applications.
Example:
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' });
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Summary
- Simple Syntax: Easy to embed JavaScript logic within HTML.
- Data Binding: Pass data from the server to templates.
- Template Inheritance: Create and extend base layouts.
- Partial Templates: Reuse components across templates.
- JavaScript Logic: Use loops, conditionals, and other logic.
- Safe HTML Output: Render HTML without escaping if needed.
- Supports Static Files: Include CSS, JS, and images.
- Error Handling: Helpful error messages for template issues.
- Lightweight and Fast: Efficient rendering of templates.
- Integration with Express: Works seamlessly with Express.js for server-side rendering.
EJS provides a powerful yet simple way to render dynamic HTML in Node.js applications, making it a versatile choice for many developers.