- Home
- Knowledge Sharing
- An Introduction to Pug.js: A Templating Engine for Node.js
An Introduction to Pug.js: A Templating Engine for Node.js
Bao Hien
In the world of web development, creating dynamic HTML pages efficiently is a crucial task. One tool that can help with this is Pug.js, a high-performance template engine heavily used in Node.js applications. This post will introduce you to Pug.js, explain its benefits, and provide examples to get you started.
What is Pug.js?
Pug.js (originally known as Jade) is a template engine for Node.js. It allows you to write cleaner, more readable HTML by using a simplified syntax. Pug helps developers maintain their code by providing features such as code reusability, easier debugging, and logic implementation directly within the templates.
Key Features of Pug.js
- Simplified Syntax: Pug uses indentation to define the structure of your HTML, making the code cleaner and easier to read.
- HTML Preprocessing: You can include variables, loops, and conditionals directly within your HTML, reducing the need to manipulate the DOM with JavaScript.
- Code Reusability: Pug supports mixins, which allow you to create reusable chunks of code, making your templates DRY (Don’t Repeat Yourself).
- Static Code Analysis: The compiler can catch errors early, providing helpful error messages.
Why Use Pug.js?
- Clean and Maintainable Code: Pug's concise syntax reduces the amount of boilerplate HTML code, making it easier to maintain.
- Improved Productivity: Writing templates in Pug can be faster compared to traditional HTML, especially when dealing with complex structures.
- Integration with Node.js: Pug is designed to work seamlessly with Node.js, making it a popular choice for server-side templating.
Getting Started with Pug.js
To start using Pug.js, you need to have Node.js installed on your system. If you haven't installed Node.js yet, you can download it from here.
Step 1: Install Pug
First, install Pug using npm:
npm install pugStep 2: Create a Pug Template
Create a new file called template.pug:
doctype html
html
head
title= title
body
h1 Hello, #{name}!
p Welcome to your first Pug template.Step 3: Render the Template
Now, create a simple Node.js application to render this template:
const pug = require('pug');
// Compile the template to a function
const compiledFunction = pug.compileFile('template.pug');
// Render the template with data
const html = compiledFunction({ title: 'Pug Example', name: 'John' });
console.log(html);Step 4: Running the Application
Run your Node.js application with the following command:
node app.jsYou should see the following HTML output in your console:
<!DOCTYPE html>
<html>
<head>
<title>Pug Example</title>
</head>
<body>
<h1>Hello, John!</h1>
<p>Welcome to your first Pug template.</p>
</body>
</html>Advanced Features
Mixins
Mixins are reusable chunks of code that can take arguments. Here's an example:
//- Define a mixin
mixin list(items)
ul
each item in items
li= item
//- Use the mixin
+list(['Pug', 'is', 'awesome'])Conditionals and Loops
You can include conditionals and loops in your templates:
- var user = { name: 'John', age: 25 }
if user.age > 18
p #{user.name} is an adult.
else
p #{user.name} is a minor.
ul
each val, index in ['Pug', 'is', 'fun']
li #{index + 1}: #{val}Conclusion
Pug.js is a powerful templating engine that can significantly improve the way you write HTML in your Node.js applications. Its clean syntax, support for logic, and reusability features make it a valuable tool for developers looking to streamline their workflow and produce maintainable code. Give Pug a try in your next project and experience the benefits firsthand!
Who wrote this article