Jade is a template engine for Node.js that compiles to HTML. It provides a simple syntax for writing HTML templates that allows for dynamic content without having to open and close lots of tags. Jade has been popular in the Node.js community for years and has recently been renamed to “Pug” due to trademark issues.
In this article, we’ll take a look at what Jade is, how to install and set it up, its syntax and features, and examples of how to use it in a Node.js application. We’ll also look at some of the advantages and disadvantages of using Jade compared to regular HTML.
What is Jade?
Jade is an open-source templating engine that compiles to HTML. It was created in 2010 by TJ Holowaychuk, one of the creators of Express, to avoid having to write repetitive HTML in his Node.js applications.
The key advantages of Jade include:
- Simpler and more concise syntax than HTML
- Dynamic content support with JavaScript
- Reusability through mixins, includes, and extends
- Better readability without all the closing tags
Rather than writing full HTML tags, Jade provides shortcuts for commonly used elements. For example, a paragraph tag can be written as just p instead of
. Jade removes a lot of the verbosity of HTML to create cleaner templates.
Jade templates compile down to regular HTML so they can be used by any frontend framework or CMS. The compiled HTML is static and string interpolation is handled at compile time.
Overall, Jade aims to make writing HTML templates faster, easier, and more maintainable by removing a lot of repeated code. It’s a popular choice for Node.js applications but can be used in any environment that supports JavaScript.
Installing Jade
To use Jade, you first need to install it as a dependency in your Node.js project. Jade can be installed from npm:
“`
npm install jade
“`
This will install the latest version of Jade into the node_modules folder. We can then require() it in our JavaScript code:
“`js
var jade = require(‘jade’);
“`
Jade provides both a Node.js API for compiling templates as well as a command line interface. The CLI allows you to compile Jade templates from the command line:
“`
jade template.jade
“`
This will output the compiled HTML to stdout. The CLI also allows compiling a directory or file to an output directory.
To render Jade templates in the browser, you can use a client-side compiler like jadeify. This browserifies Jade so templates can be compiled in the browser.
There are also implementations of Jade available for PHP, Python, Ruby, and Java so it can be used for templating on the backend in many environments.
Jade Syntax
The syntax of Jade aims to be cleaner and more concise than regular HTML. Here are some of the main elements of Jade syntax:
### Plain Text
Plain text in Jade templates is just written as-is:
“`
p This is a paragraph of text
“`
Whitespace is preserved by default so newlines and indentation is maintained in the compiled HTML.
### HTML Tags
HTML tags in Jade do not require angle brackets. They are just written as the tag name:
“`
div
p This paragraph is inside a div
“`
Self-closing tags like img and input just have a / after the name:
“`
img(src=”image.png”/)
“`
To set attributes, the syntax is (attrName=attrValue):
“`
a(href=”index.html”) Link
“`
Boolean attributes can just be written as the attribute name:
“`
input(type=”checkbox”, checked)
“`
### Comments
Single line comments start with //:
“`
// This is a comment
p Hello
“`
Multi-line comments are wrapped in /* */:
“`
/*
This is a
multi-line comment
*/
“`
### Variables and Interpolation
Jade supports variables and string interpolation using #{ }:
“`
– var name = “John”
p Hello #{name}
“`
JavaScript expressions can also be embedded:
“`
p Today is #{new Date().toDateString()}
“`
### Conditionals
if, else if, else, and unless control structures are available:
“`
if user.authenticated
p You are logged in
else
p Please log in
“`
### Iteration
Jade supports iteration using for and while loops:
“`
ul
for user in users
li= user.name
“`
while:
“`
– var n = 0
ul
while n Using Jade in Node.js
Here is a simple example of using Jade in a Node.js application with Express:
First we need to install Jade and Express:
“`
npm install jade express
“`
Then in our app.js file, we configure Jade as the view engine for Express:
“`js
var express = require(‘express’);
var jade = require(‘jade’);
var app = express();
// Set Jade as view engine
app.set(‘view engine’, ‘jade’);
app.get(‘/’, function(req, res) {
res.render(‘index’);
});
app.listen(3000);
“`
The index.jade template file would look like:
“`
html
head
title My App
body
h1 Hello from Jade!
p This is a simple example using Jade
“`
When the / route is hit, Express will render the index.jade file. The compiled HTML will be sent in the response.
This allows you to create clean templates for your Node.js app without having to write raw HTML. The Jade syntax and features help reduce redundant code.
You can also pass variables from the route handlers to the template:
“`js
app.get(‘/’, function(req, res) {
res.render(‘index’, {name: ‘John’});
});
“`
“`
p Hello #{name}
“`
And include other Jade files:
“`
include header.jade
“`
This is a simple example but demonstrates how Jade can be integrated and used for templating in a Node.js app.
Advantages of Jade
Here are some of the main advantages of using Jade compared to regular HTML:
– More concise syntax without having to close tags
– Dynamic template capabilities
– Reusability through extends, includes, mixins
– Conditionals, loops, other control structures
– Readable with whitespace preserved
– Can intersperse JavaScript
– Compiles to HTML so works anywhere
– Mature and battle-tested in Node.js
– Active development and community
For web development with Node.js, Jade provides a cleaner way of defining templates compared to building up strings of HTML or manually writing static HTML files.
The terse syntax makes Jade templates easy to read and visual. Nesting is handled through whitespace rather than closing tags. The compiler handles converting Jade to standard HTML.
Jade also gives you the full capabilities of JavaScript within the templates. This allows for dynamic generation of content.
Overall, Jade removes a lot of the verbosity associated with HTML, making web templates more concise and expressive.
Disadvantages of Jade
There are also some disadvantages of using Jade compared to regular HTML:
– New syntax to learn
– Reliance on whitespace and indentation
– Limited error reporting in templates
– Not as ubiquitous as HTML
– Browser previews require compilation
– End output still HTML
– Logic in templates controversial
The Jade syntax is simpler than HTML but still must be learned, especially if you are used to writing raw HTML and CSS. The reliance on proper whitespace and indentation can cause issues for those used to more forgiving HTML.
Debugging Jade templates can be harder than debugging HTML. Template errors often aren’t very descriptive.
While Jade has been popular in Node.js for a long time, it isn’t as ubiquitous as HTML. Most frontend developers know HTML so there can be a learning curve when using Jade for the first time.
Browser previews of Jade templates require compiling to HTML since browsers only understand HTML. This can slow down real-time editing compared to directly editing HTML.
The end result of a Jade template is still HTML. Some see Jade as just a pre-processor for HTML and prefer to work directly with HTML.
There are also differing opinions on logic and control flow in templates. Some argue that Jade templates become harder to maintain with a lot of JavaScript.
For these reasons, Jade may not be ideal for every use case compared to HTML. The benefits around brevity and expressiveness have to be weighed against the disadvantages.
Conclusion
Jade is a mature, popular templating engine for Node.js that compiles to HTML. It provides a terse, expressive syntax for writing HTML templates that avoids verbosity through shortcuts like tag omission and whitespace sensitivity.
Key features like extends, includes, and mixins help encourage template reuse and reduce duplication. The syntax also allows for dynamic templating capabilities through interspersed JavaScript.
While the abbreviated syntax can take some time to learn, Jade removes a lot of repetitiveness of coding HTML templates by hand. Many find the readable, nested format easier to work with once they get used to the shorthand syntax.
There are certainly still times when coding HTML directly makes more sense. For larger, more complex web applications, Jade is a helpful tool to simplify template creation and maintain clean abstractions between views and logic. The HTML output ensures compatibility with any framework.
Overall Jade is a mature, battle-tested templating engine that provides a viable alternative to hand-coding HTML templates. The terseness and expressiveness of Jade has made it a popular choice for Node.js developers looking for a cleaner, more maintainable approach to HTML generation.
| Advantages | Disadvantages |
|---|---|
| – More concise syntax without closing tags | – New syntax to learn |
| – Dynamic template capabilities | – Reliance on whitespace |
| – Reusability through extends, includes, mixins | – Limited error reporting |
| – Conditionals, loops, control structures | – Not as ubiquitous as HTML |
| – Readable with whitespace preserved | – Browser previews require compilation |
| – Compiles to HTML so works anywhere | – End output still HTML |
| – Mature and battle-tested in Node.js | – Logic in templates controversial |
