Why View Templates Revolutionize Web Development
Imagine building a website where every page requires manually rewriting HTML. Painful, right? I've been there. Thankfully, view templates solve this exact problem—and they've revolutionized how we build web applications.
"Developers using templating engines report a 40% reduction in development time for dynamic content." — Web Development Survey, 2023
View templates are your HTML's dynamic counterpart. They maintain your page structure while seamlessly integrating changing data. Think of them as fill-in-the-blank documents where your server provides the answers. One template, infinite possibilities!
In Node.js, templates aren't just convenient—they're essential. Without them, you're stuck concatenating messy strings of HTML and data. I've seen codebases drown in this approach. It's unsustainable for anything beyond trivial applications.
The magic happens through templating engines like EJS and Handlebars. These powerful tools transform static HTML into dynamic powerhouses. They separate presentation from logic, making your code cleaner, more maintainable, and infinitely more scalable.
What are View Templates?
A view template is a file that contains the structure of a web page (HTML) along with placeholders for dynamic content. The HTML defines how the page should look, and the placeholders get filled with real data when the page is rendered by the server.
Benefits of Using Templates
- Reusability → One template for many data sets
- Separation of Concerns → HTML stays separate from backend logic
- Maintainability → Easier to update page design without touching backend code
- Dynamic Content → Can change per user, time, or data in the database
Static HTML vs Template
Static HTML
Always shows the same content. Good for pages that never change (like a simple "About" page).
<p>Today is Monday.</p>
This will always show "Monday" unless you manually edit the file.
Template
Displays different data depending on the request or user. Uses a templating engine to insert values into placeholders.
<p>Today is <%= day %>.</p>
If day = "Tuesday", the output will be "Today is Tuesday."
EJS and Handlebars Templating
Templating Engine
A templating engine is a tool that allows you to write HTML pages that can include dynamic content. Instead of manually writing different HTML for every page variation, you use placeholders that get filled in with real data when the page is generated. It works together with your server (Node.js + Express) to create HTML on the fly.
EJS (Embedded JavaScript)
EJS stands for Embedded JavaScript. It's a simple templating language that lets you write JavaScript code directly inside your HTML.
Key Features:
- Syntax is very close to regular JavaScript
- Uses <%= %> to output values and <% %> for logic
- Easy learning curve for students who already know basic JavaScript
Syntax Examples:
<h1>Welcome <%= name %></h1>
// Conditional
<% if (isLoggedIn) { %>
<p>Hello, <%= name %>!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
Handlebars
Handlebars is another templating engine for Node.js that focuses on logic-less templates — meaning you keep complex logic out of the template and only show variables and simple conditions.
Key Features:
- Clean, readable syntax using {{ }} for variables
- Encourages separating application logic from the view
- Supports helpers — small functions for formatting data
Syntax Examples:
<h1>Welcome {{name}}</h1>
// Conditional
{{#if isLoggedIn}}
<p>Hello, {{name}}!</p>
{{else}}
<p>Please log in.</p>
{{/if}}
EJS vs Handlebars: Key Differences
| Feature | EJS | Handlebars |
|---|---|---|
| Syntax | <%= %> for output, <% %> for logic | {{ }} for variables, {{#if}} for conditions |
| Logic in templates | Allows JavaScript directly | Limited to simple expressions |
| Learning curve | Easier if you know JS | Easier for beginners in HTML |
| Flexibility | More flexible, more logic | Cleaner separation of concerns |
When to Use Which:
EJS – Great if you're comfortable with JavaScript and want flexibility inside your templates.
Handlebars – Better if you want your HTML to stay clean and avoid putting too much logic in the view.
Final Project Activity: Student Information System
Activity 1:
- Set up a basic Node.js + EJS project for a Student Information System
- Implement routing to serve multiple pages
- Use EJS templates to display dynamic student data
- Follow a project structure that supports the MVC pattern
Create the first version of the SIS with three pages: Home page (index), Student list, and Student details page.
Step-by-Step Walkthrough
1Project Setup
cd studentInfoSystem
npm init -y
npm install express ejs
Creates a new project folder, initializes package.json, and installs Express and EJS.
2Folder Structure
| server.js
|--- routes/
| studentRoutes.js
|--- views/
| index.ejs
| students.ejs
| studentDetails.ejs
This follows MVC-friendly organization. routes/ handles URL requests, views/ contains the templates.
3Create Router – routes/studentRoutes.js
const router = express.Router();
// Dummy data
const students = [
{ id: '20001234', name: 'Juan Dela Cruz', course: 'BSIT' },
{ id: '20005678', name: 'Maria Santos', course: 'BSCS' }
];
// Home page
router.get('/', (req, res) => {
res.render('index', { title: 'Student Information System' });
});
// Student list page
router.get('/students', (req, res) => {
res.render('students', { students });
});
// Student details page
router.get('/students/:id', (req, res) => {
const student = students.find(s => s.id === req.params.id);
res.render('studentDetails', { student });
});
module.exports = router;
4Main Entry File – server.js
const app = express();
const PORT = 3000;
// Set view engine
app.set('view engine', 'ejs');
// Routes
const studentRoutes = require('./routes/studentRoutes');
app.use('/', studentRoutes);
app.listen(PORT, () => {
console.log(`SIS running at http://localhost:${PORT}`);
});
This connects the router to the main app and starts the server on port 3000.
5Create Templates
views/index.ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1>Welcome to the Student Information System</h1>
<p><a href="/students">View Student List</a></p>
</body>
</html>
views/students.ejs
<html>
<head>
<title>Student List</title>
</head>
<body>
<h1>Student List</h1>
<ul>
<% students.forEach(student => { %>
<li>
<a href="/students/<%= student.id %>">
<%= student.name %> - <%= student.course %>
</a>
</li>
<% }) %>
</ul>
<p><a href="/">Back to Home</a></p>
</body>
</html>
views/studentDetails.ejs
<html>
<head>
<title>Student Details</title>
</head>
<body>
<% if (student) { %>
<h1><%= student.name %></h1>
<p>ID: <%= student.id %></p>
<p>Course: <%= student.course %></p>
<% } else { %>
<p>Student not found.</p>
<% } %>
<p><a href="/students">Back to Student List</a></p>
</body>
</html>
6Run the App
Go to:
- Home page: http://localhost:3000
- Student List: http://localhost:3000/students
- Student Details: http://localhost:3000/students/20001234
Mandatory Assessment
All students must complete the assessment for this lesson. Your submission is required for course completion.
Take the View Templates AssessmentDon't miss this! Assessment link is required for all students.
Lesson Resources
Access all the learning materials for this lesson through the following resources:
Assessment
Complete the mandatory assessment to test your understanding of view templates.
Take AssessmentImportant Note
The assessment is mandatory for all students. Make sure to complete it after going through the lesson materials.
Expand Your Knowledge
Dive deeper into web development with these related resources:
- Introduction to Node.js and Express – Build a solid foundation in server-side JavaScript.
- MVC Architecture in Web Development – Learn how to structure your applications using the Model-View-Controller pattern.
No comments yet. Be the first to share your thoughts!