How to NodeJS- Jade Templating Engine explained

In this tutorial, we are going to learn everything about jade templating engine. Jade separate the HTML code from dynamic content. Jade templating engine is for Node.js which compiles into basic HTML.

Jade is an elegant templating engine, primarily used for server-side templating in NodeJS. Generating HTML using preprocessor code provide more readable code and easier to maintain.  It gives you a powerful new way to write markup. Let’s see some basic jade with corresponding HTML markup.

 

In our Node.js Express project, we already have a home page which is templated by index.jade and layout.jade. The layout.jade is extended by index.jade file.

Jade templating engine

 

Let’s see the most important features of the Jade templating language and rendering of corresponding HTML markup language.

Doctypes

The <!DOCTYPE> declaration must be the very first thing in HTML document.  Using jade, doctypes are just simple shorthands on a single line. Following table shows you jade template and corresponding HTML tag

JadeHTML
!!!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
doctype<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Tags and Text

There are no “closing” tags in Jade templating. Instead, Jade uses white space to determine how tags are nested. Let’s look at HTML simple tags and corresponding jade code. To add text inside the tags, simply add it after the word preceded by a space.

JadeHTML
p<p></p>
div<div></div>
h1<h1></h1>
img<img/>
input<input/>
p#header <p id="header"></p>
p.content<p class="content"></p>
div.content.column#menu<div id="menu" class="content column" ></div>
p Hello, World! <p>Hello, World!</p>
p
| Hello, World!
| Jade is an elegent templating engine.
| It's very easy to use.
<p>Hello, World!
Jade is an elegent templating engine.
It's very easy to use..
</p>

 

Comments

Jade has several ways of writing comments. using simple way, comments are like typical programming comments with double slashes. let’s see the example.

JadeHTML
//this is a HTML comment line. this line does not include on markup. /code><!--this is a HTML comment line. this line does not include on markup. -->

 

Nesting

Nesting just requires new lines and a tab per nest level.  Jade uses white space to determine how tags are nested. In the following example, the paragraph tags are indented, inside the div tags.

JadeHTML
.row
.column
  p Foo
   .column
    p Bar
<div class="row">
<div class="column">
  <p>Foo</p>
</div>
<div class="column">
  <p>Bar</p>
</div>
</div>

 

Attributes

Attributes provide additional information about HTML elements. It starts and ends with parentheses. Multiple attributes are separated with commas. The following example shows you the type and placeholder attribute in an input field.

JadeHTML
input(type="text", placeholder="your name")<input type="text" placeholder="your name"/>

 

Iteration

To iterate the sequences and objects you would use the “each” or “for” keyword. Unlike other programming languages, there is no need to parentheses or curly braces for iteration.

JadeHTML
each item in ['Home', 'About', 'Contact']
li= item
<li>Home</li>
<li>About</li>
<li>Contact</li>

 

Conditionals

Conditionals are simple if/else statements or case statements. For conditional statements in jade, no need for parentheses or braces.

JadeHTML
- var name = "bob"
if name == "bob"
p Hello bob!
else
p It's Not bob
<p>Awesome</p>

 

jade is a powerful template language and allows extending other templates and defining blocks. This is exactly how you can define a default layout and use it in other templates on Express app.

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...