Jade-Template Engine

Table of Contents What is a Template Engine?Advantages of Template engine in Node.jsWhat is the Jade Template Engine?How to Install Jade?Features of JadeTags :Jade code and output in Plain HTMLAttributesJade code and output in Plain …

Jade-Template Engine

What is a Template Engine?

A Template engine that helps to build an HTML template with minimal code and additional features. It allows the developer to use static template files in the application. It inserts data to create a final page into the HTML template engine, as shown in the figure below.

Advantages of Template engine in Node.js

  • It enhances the developer’s productivity.
  • enhances readability and maintainability.
  • High performance.
  • Maximizes client-side processing.
  • A single template for multiple pages.
  • It supports the reusability of the block.

What is the Jade Template Engine?

Jade, currently known as Pug, is a server-side templating engine for NodeJS. Jade provides you to write HTML markup with high performance and lots of benefits over plain HTML. Jade uses whitespaces and indentation as part of syntax rather than opening and closing tags of HTML. It is implemented with JavaScript. It supports DRY(Don’t Repeat Yourself)  as well as supports dynamic code.

How to Install Jade?

Install Jade package in the project by using NPM as below command.

$ npm install jade -g

Run the installed file by the below command

$ jade --help

Jade uses the .jade file extension, and all .jade files save into the views folder is a subfolder inside the root folder of the NodeJS application.

Features of Jade

There are different characteristics of Jade. Some of them are discussed below.

  • Tags
  • Attributes
  • Block of text
  • Variables
  • Comments

Tags :

Jade has no opening and close tags as HTML that makes it more concise and simple. It uses indentation and whitespaces to nest text instead of tags. Jade follows sensitive syntax to write HTML code.

Jade code and output in Plain HTML

doctype HTML
HTML
    head
        title Jade Page
    body
        h1 Hello World!
        p some paragraph here…
<!DOCTYPE html>
<html>
<head>
    <title> Jade Page </title>
</head>
<body>
    <h1> Hello World!</h1>
    <p> some paragraph here…</p>
</body>
</html>

Jade compiles the above code accurately as the first word of every line treat as an HTML tag, while the rest of the line is treated as text inside the tag. Jade supports sensitive syntax. Mistakes in syntax have a large effect on output.

Attributes

It is easy to add attributes in jade tags

Jade code and output in Plain HTML

input(type=”text”,
placeholder=”username”)
<input type=”text”
placeholder=”username”/>

Block of text

Suppose in the jade template, and the developer wants to place a large block of tag inside a paragraph tag, it is noticed that the first word of every line treats as an opening HTML tag.

A full stop adding after tag that indicates that everything inside tag is text and jade stop treating the first word of each HTML line code as a tag.

Example: 

div
  p How are you?
  p.
    I am fine thank you.
    And you? I heard that you fell into a swimming poll.
    That is rather unfortunate. My right hand broken due to falling.

Variables

Jade code and output in Plain HTML

var foo = “hello world”
h1= foo
<h1> hello world </h1>

Comments

Jade code and output in Plain HTML

// single line comment
//- invisible single line comment


<!– single line comment –>
// block comment
  h1 hello Jade
//- invisible block comment
  h2 how are you?
<!– block commenth1 hello world
–>

Browser Support

Jade’s latest version can be download for the browser in standalone form. It only supports the latest version of browsers, though. It is a large file. The developer suggests that the developer pre-compile the Jade to JavaScript and then use the runtime.js library for the client.

Compilation of template for client usage, using below-given code in the command line

$ jade --client --no-debug filename.jade

above command creates a file named filename.js  that contains the compiled jade template.

Powerful Features

Some Jade powerful features which make markup smarter, easy.

  • JavaScript
  • Loops
  • Interpolations
  • Mixins

JavaScript

Due to Jade’s implementation with JavaScript, it is easy for the developer to use JavaScript in the Jade template.

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

Starting a line with a hyphen indicates that using JavaScript in the Jade compiler will return the result as expected. Here is the return result of the above code of jade compiler into HTML 

<div>
   <ul>
    <li> Hello </li>
    <li> Hello  </li>
    <li> Hello </li>
    <li> Hello </li>
    <li> Hello </li>
  </ul>
</div>

Loop

Jade Template provides amazing loop syntax that no need to resort to JavaScript. Here is an example of a loop nest array inside it.

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

Below code is jade output in HTML :

<div>
  <h1> Famous Droids from Star Wars </h1>
  <div class = "card">
    <h2> R2D2 </h2>
  </div>
  <div class="card">
    <h2> C3PO </h2>
  </div>
  <div class = "card">
    <h2> BB8 </h2>
  </div>
</div>

Interpolations

It is  hard to combine JavaScript with text, as shown below

p= "Hi there, " + profileName + ". How are you doing?"

But Jade has a smart solution for this problem

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?


Mixins

It allows building reusable blocks of Jade. It works as functions that can be invoked as markup output. It takes parameters as input and creates markup output. Mixin declares by using the mixin keyword, and it is invoked by using the “+” operator.

mixin book(name)
  div&attributes(attributes)= name
  
+book(“Book A”)#first
+book(“Book B”)(title=”book b”)
+book(“Book C”).last
<div id=”first”>Book A</div>
<div title=”book b”>Book B</div>
<div class=”last”>Book C</div>

Conclusion

In this article, we discussed in detail Jade, which is a server-side templating engine used with NodeJS. Jade supports DRY(Don’t Repeat Yourself)  as well as supports dynamic code. This article covers features of Jade, attributes, variables, tags, Mixins, etc.

Suggested Read: OpenCV VS Tensorflow

Leave a Comment