jade-header

Introduction

If you find static html pages restrictive, not flexible enough to deliver dynamic contents, tedious and frustrating with all the unfriendly syntax, well, templating engines might just solve those for you. For beginners, such tools help to streamline your work process, better quality in coding experience and efficient in time consumption.

But for those who are new to such tools, things can get pretty messy and difficult to pick up. So the purpose of this tutorial is to hopefully provide an introduction of Jade, explaining the basic syntax and building your first simple Jade HTML template page. I am gonna try and keep it as simple as possible.

Most of the core features and advanced explanations can be found at their GIT’s readme. But as someone who just wish to make their first attempt, it may seem too daunting, especially for beginners.

If you are trying to learn Jade, I hope my tutorial will help ease up your learning curve and enabling you to render your very first html page with Jade.

Installing Jade

To install Jade, the preferred and easy way is through NPM (Node Package Manager). If you are familiar with that, simply execute this line of code in your Terminal:

1
npm install jade

This installs Jade into your project directory, or wherever you are at when you executed the command above. If you choose to install globally, which means any project at any point of time can have access to Jade, simply do this:

1
npm -g install jade

For those unfamiliar with NPM, I would highly recommend that you start installing and understand how all these works. Because many of such awesome tools and components are now easily accessed and installed through NPM. And to really adopt an agile development process and management, such tools are great even for beginners. Start early and your coding life will be much easier going forward.

If you need guide on installing NPM, I highly recommend this tutorial by Dan Dean. It guides you to install Git, Node, NPM and Express (optional. Not required for Jade).

Using Jade – How to compile/render templates

Compiling is just as easy. To do that, simply execute this line of command:

1
jade index.jade

If you would like to compile a folder of jade files, irregardless if there is any other files within it, simply execute it with the dir instead:

1
jade lib/views/

However, be mindful about nested templates. For example, if you had layout templates such as footer.jade, header.jade, which were then inherited into index.jade, Jade will compile those as well. To avoid compiling unnecessary templates, you can optionally do a Makefile that has instructions in it.

Why and how Jade can benefit your project?

First, the why – Jade allows speed typing and replication of a HTML template that you may see yourself using it again and again throughout the project, on different page or section or even iteration logics. Now, the how – Well, almost similar question to the above, but we are speaking in more technical terminology here. With Jade, you can create config files, “blocks” of code, inheritance of different files using “include”, and most interestingly effective of all, usage of javascript code seamlessly on HTML pages.

Forget about typing the chains of “ul” (unordered list) and its children “li” across your page, or even the otherwise tedious syntax of HTML with angular brackets and proper end tags for each elements. Jade helps you do those – and even more. It also allows server-side compilation to deliver dynamic contents using the same template.

All these may sound confusing, or for some even thinking “What the hell are you talking?”. So, let’s skip the introduction and dive into the syntax, shall we?

Syntax of Jade – The basics.

Remember how (for those without a HTML boilerplate or snippet at least) you have to type all the declarations and elements at the beginning of your HTML page? Well, say goodbye to those unwelcoming sections, and say hello to neat and understandable syntaxes.

The start of a HTML page

To declare, or start your page, all you have to do is just exactly what is shown below:

1
2
3
4
5
6
7
8
9
10
11
!!! 5
 
html
 
  head
 
    title My First Jade Page
 
  body
 
    h1 Hello World!

Guess what? It’s just that easy! There are different ways to declare your doc-type though. Here are some examples for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
!!! 5
 
!!! xml
 
!!! transitional
 
!!! strict
 
!!! frameset
 
!!! 1.1
 
!!! basic
 
!!! mobile

For more info, I suggest you look through the official documentation at VisionMedia’s github repo. For developers, those doctypes above should be familiar to you. Alternatively, if you think “!!!” is not easily understandable, you can also use “doctype”, as shown below:

1
!!! 5

or

1
doctype 5

The above example will produce the same results, as shown below:

1
<!DOCTYPE html>

The declarations are also case-insensitive, which makes things a lot simpler and easier. Let’s step back a bit to the chunk of code we made at the start. Notice how “body”, “head”, “h1″ are declared without angular brackets? Or did you notice there are no end tags? Those are automatically generated by Jade when you compile it. Here is the result if you render them:

1
2
3
4
5
6
7
8
9
10
11
!!! 5
 
html
 
  head
 
    title My First Jade Page
 
  body
 
    h1 Hello World!

Head over to your Terminal, and type in the following to render your Jade template:

1
jade index.jade

This will then produce a properly structured HTML like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
 
  <html>
 
    <head>
 
      <title>My First Jade Page</title>
 
    </head>
 
    <body>
 
      <h1>Hello World!</h1>
 
    </body>
 
  </html>

There you got it! Your very first Jade template! How easy is that?

HTML elements and attributes

To include stylesheets and scripts, you simply have to declare the same tags you would expect it to be:

1
2
3
link(rel="stylesheet", href="style.css", type="text/css")
 
script(src="script.js")

generates

1
2
3
<link rel="stylsheet" href="style.css" type="text/css" />
 
<script src="script.js"></script>

Yes, as shown in the example above, attributes of an elements are separated using commas. If you’re thinking about IDs and Classes, you have two options though. Either you do the same as above, or you could do this too:

1
2
3
h1#header.page-header.title Hello World!
 
h1(id="header", class="page-header title") Hello World!

generates

1
2
3
<h1 id="header" class="page-header title">Hello World!</h1>
 
<h1 id="header" class="page-header title">Hello World!</h1>

“#” dictates IDs while “.” dictates classes. Personally, I prefer using the symbols and keep it standardized throughout my template. The reason is, it’s easy and clear at the same time, while not making each line too long, especially if you have many attributes declaration. For example:

1
h1(id="header", data-title="Something", data-tag="something-else", style="background: black;") Hello World!

generates

1
<h1 id="header" data-title="Something" data-tag="something-else" style="background: black">Hello World!</h1>

can be simplified to

1
h1#header.page-header.title(data-title="Something", data-tag="something-else", style="background: black") Hello World!

generates the same output

1
<h1 id="header" data-title="Something" data-tag="something-else" style="background: black">Hello World!</h1>

It helps to maintain consistency since all IDs and Classes are declared at the front, instead of randomly within the braces of attributes.

Indentations and chaining elements in one line

As Jade is a templating engine, it relies heavily on indentations, spaces, symbols and construction of lines, to determine the output of a Jade template. Thus, be mindful of your indents, commas, braces and quotes. To give a proper explanation, the below example illustrates how the construction and indentation produce different results:

1
2
h1#title Hello World!
  span.title-tag Welcome…

generates

1
<h1 id="title">Hello World!<span>Welcome…</span></h1>

as oppose to

1
2
h1#title Hello World!
span.title-tag Welcome…

generates a different output

1
2
<h1 id="title">Hello World!</h1>
<span>Welcome…</span>

or manner of the construction

1
h1#title Hello World! span.title-tag Welcome…

generates

1
<h1 id="title">Hello World! span.title-tag Welcome…</h1>

as oppose to using the proper syntax to chain elements when constructing a single line

1
h1#title: span.title-tag Welcome…

generates

1
<h1 id="title"><span>Welcome…</span></h1>

While doing this generates a different output

1
h1#title Hello World!: span.title-tag Welcome…

generates

1
<h1 id="title">Hello World!: span.title-tag Welcome…</h1>

The difference is that, any plain texts after an element declaration are being treated as the contents of the element. Thus, if you have some texts for that container, and still has more elements within it, you might have to do this instead:

1
2
h1#title Hello World!
  span.title-tag Welcome…

generates

1
<h1 id="title">Hello World!<span>Welcome…</span></h1>

Text blocks and trailing spaces

What about a text block? Meaning multiple lines or paragraphs. Well, it’s also easy to do so using a trailing “.”. For example:

1
2
3
4
5
h1#title Hello World!
  span.title-tag.
    Welcome…
    Something is coming…
    Jade is so good!

generates

1
2
3
4
5
6
7
<h1 id="title">Hello World!
  <span class="title-tag">
    Welcome…
    Something is coming…
    Jade is so good!
  </span>
</h1>

However, as mentioned above, please be mindful about trailing spaces and texts to the right of any elements. For example, if you accidentally do it this way:

1
2
3
4
h1#title Hello World!
  span.title-tag Welcome...
    Something is coming… 
    Jade is so good!

You will generate a different output of what you are expecting:

1
2
3
4
5
6
<h1 id="title">Hello World!
  <span class="title-tag">Welcome...
    <Something>is coming...</Something>
    <Jade>is so good!</Jade>
  </span>
</h1>

As they are also indented, they are children of the SPAN tag but treated as an element by itself since it is not wrapped by any other element. Let’s take Lorem Ipsum as the classic example here:

1
2
3
4
5
6
7
8
p
  |Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  |sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  |Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  |nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  |reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  |pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  |culpa qui officia deserunt mollit anim id est laborum.

generates this set of output

1
2
3
4
5
6
7
8
9
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

By adding the | to each line, it tells Jade that they are all part of the p text block. Alternatively, you could use the previous example of using a trailing “.” after the element. For example:

1
2
3
4
5
6
7
8
p.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum.

generates the same output for you:

1
2
3
4
5
6
7
8
9
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

Even doing this will give you the same result:

1
2
3
4
5
6
7
8
p .
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum.

generates the same type of output:

1
2
3
4
5
6
7
8
9
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

But, be careful! Trailing spaces after the “.” will cause Jade to assume texts beside it and ignore the rest of the lines as text blocks. (adding a letter just to visually tell you of the trailing space):

1
2
3
4
5
6
7
8
p . t
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
  culpa qui officia deserunt mollit anim id est laborum.

generates the wrong output for you!

1
2
3
4
5
6
7
8
9
<p>. t
  <Lorem>ipsum dolor sit amet, consectetur adipisicing elit, </Lorem>
  <sed>do eiusmod tempor incididunt ut labore et dolore magna aliqua. </sed>
  <Ut>enim ad minim veniam, quis nostrud exercitation ullamco laboris </Ut>
  <nisi>ut aliquip ex ea commodo consequat. Duis aute irure dolor in </nisi>
  <reprehenderit>in voluptate velit esse cillum dolore eu fugiat nulla </reprehenderit>
  <pariatur>. Excepteur sint occaecat cupidatat non proident, sunt in </pariatur>
  <culpa>qui officia deserunt mollit anim id est laborum.</culpa>
</p>

Essentially, most templating engine depends on spaces, indentations, symbols to render the output. So, learning and getting use to it may take some time, but it should be that hard at all.

Commenting and other useful Jade syntaxes

Comments are just as simple as “//”. If you would like to make a comment block, simply place the “//” on a new line. Below are the examples:

1
2
// display title
h1#title Hello World!

generates

1
2
<!-- display title -->
<h1 id="title">Hello World!</h1>

Whereas a comment block would be done like this:

1
2
3
//
display title
h1#title Hello World!

generates

1
2
3
4
<!--
display title
<h1 id="title">Hello World!</h1>
-->

What if you do not want these comments to be included in the final output? Jade has that covered too. Simply add a trailing “-” to your “//”, like this:

1
2
//- display title
h1#title Hello World!

will generate this

1
<h1 id="title">Hello World!</h1>

Thus, escaping the commented line. So, how about showing an example of how a full Jade template might look like? Sure, that will give you a good idea of how it looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
!!! 5
html
  head
    title Your first Jade template
    link(rel="stylesheet", href="#", type="text/css", media="screen", title="no title", charset="utf-8")
    script(src="js/modernizr-1.7.min.js")
  body
    div#wrapper
      h1#pageTitle.header Hello World! 
        span Welcome...
      p
        |Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        |sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        |Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        |nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        |reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        |pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        |culpa qui officia deserunt mollit anim id est laborum.
      p.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      p .
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      p . 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      p.my-content.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      p
        |You're reading 
        span: a(href="http://blog.grayjunior.com/2013/04/12/an-attempt-on-jade/") An Attempt on Jade
        | at Gray's Blog. Follow him at 
        span: a(href="http://twitter.com/GrayJunior") @GrayJunior
    script(type="text/javascript")
        $(document).ready(function () { 
          console.log("Your API is ready!");
        });

and run the command line execution

1
jade index.jade

will generate your HTML page like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html><html><head><title>Your first Jade template</title><link rel="stylesheet" href="#" type="text/css" media="screen" title="no title" charset="utf-8"><script src="js/modernizr-1.7.min.js"></script></head><body><div id="wrapper"><h1 id="pageTitle" class="header">Hello World! <span>Welcome...</span></h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p><p>. <Lorem>ipsum dolor sit amet, consectetur adipisicing elit, </Lorem><sed>do eiusmod tempor incididunt ut labore et dolore magna aliqua. </sed><Ut>enim ad minim veniam, quis nostrud exercitation ullamco laboris </Ut><nisi>ut aliquip ex ea commodo consequat. Duis aute irure dolor in </nisi><reprehenderit>in voluptate velit esse cillum dolore eu fugiat nulla </reprehenderit><pariatur>. Excepteur sint occaecat cupidatat non proident, sunt in </pariatur><culpa>qui officia deserunt mollit anim id est laborum.</culpa></p><p class="my-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p><p>You're reading <span><a href="http://blog.grayjunior.com/2013/04/12/an-attempt-on-jade/">An Attempt on Jade</a></span> at Gray's Blog. Follow him at <span><a href="http://twitter.com/GrayJunior">@GrayJunior</a></span></p></div><script type="text/javascript">$(document).ready(function () { 
console.log("Your API is ready!");
});</script></body></html>

Wait. What? It’s a gibberish, mashed up piece of code! Well, that’s the default option that minifies your code. It helps in performance, something you would do for CSS and JS too. But in any case in which you need to preview the pretty-version of it, simply add in the option:

1
jade -P index.jade

or

1
jade --pretty index.jade

That will generate this beautiful HTML page you always see

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <title>Your first Jade template</title>
    <link rel="stylesheet" href="#" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="js/modernizr-1.7.min.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <h1 id="pageTitle" class="header">Hello World! <span>Welcome...</span></h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>. 
        <Lorem>ipsum dolor sit amet, consectetur adipisicing elit, </Lorem>
        <sed>do eiusmod tempor incididunt ut labore et dolore magna aliqua. </sed>
        <Ut>enim ad minim veniam, quis nostrud exercitation ullamco laboris </Ut>
        <nisi>ut aliquip ex ea commodo consequat. Duis aute irure dolor in </nisi>
        <reprehenderit>in voluptate velit esse cillum dolore eu fugiat nulla </reprehenderit>
        <pariatur>. Excepteur sint occaecat cupidatat non proident, sunt in </pariatur>
        <culpa>qui officia deserunt mollit anim id est laborum.</culpa>
      </p>
      <p class="my-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>You're reading <span><a href="http://blog.grayjunior.com/2013/04/12/an-attempt-on-jade/">An Attempt on Jade</a></span> at Gray's Blog. Follow him at <span><a href="http://twitter.com/GrayJunior">@GrayJunior</a></span></p>
    </div>
    <script type="text/javascript">
      $(document).ready(function () { 
      console.log("Your API is ready!");
      });
    </script>
  </body>
</html>

Conclusion

Just like HAML, erb, ejs and other templating engines, Jade provides a versatile and agile development process that many developers have hoped to achieve in the past. And the fact that it allows projects, from small to big, to scale elegantly is just a big bonus for anyone who is picking up a relatively easy to learn templating engine.

You may also be interested in Handle Bars, where things make get a little more complex but also provide powerful features that allows you to build Web Apps easily. Frameworks like Ember and AngularJS they enhance what a normal template engine couldn’t do – Data binding and compiler. I personally like AngularJS for its simplicity to learn but at the same time having APIs that are powerful to scale it into a large Web App. Not that Ember isn’t good, it’s just a matter of preference. If you need something to convince you further, here is a good read you might be interested – 3 Reasons to Choose AngularJS for Your Next Project.

That’s all folks! I hope you enjoy this tutorial and helps you in any way that benefits in encouraging you to learn a new template engine or frameworks in general.