Using jade template engine

by Tinple

These days I touched a node template engine jade. I loved it at once because its zencoding grammar really attracts me.

Unlike other template engine such as EJS and handlebars, jade has its own elegancy and lots of features. Firstly, you can install it via npm: npm install jade -g or npm install jade. And if you install it globally, try to detect whether the $NODE_PATH includes the location that npm installs globally or not.

@tinple ➜  ~  which node
/usr/local/bin/node
@tinple ➜  ~  which npm
/usr/local/bin/npm
@tinple ➜  ~  echo $NODE_PATH
/usr/local/lib/node_modules

If your $NODE_PATH is null, try to add

export NODE_PATH=/usr/local/lib/node_modules

to your .bash_profile or .zshrc. The path is not absolute, it depends on your node directory.

Jade is a clean, whitespace sensitive syntax for writing html. Just ignore the process that how to turn .jade to .html at begin. Pay attention to its succinct writemode, for example, file demo.jade:

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 Hello #{name}
    ul#books
      li.A
        a(href="#book-a") Book A
      li.B
        a(href="#book-b") Book B
    // comment
    p.
      Tinple and Kristine

    if love
      p A couple
    else
      p Single man

and locals:

var locals = {
    pageTitle: 'Jade',
    name: 'Tinple',
    love: true
}

Finally it becomes:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Jade</title>
    </head>
    <body>
        <h1>Hello Tinple</h1>
        <ul id="books">
            <li class="A"><a href="#book-a">Book A</a></li>
            <li class="B"><a href="#book-b">Book B</a></li>
        </ul>
        <!-- comment-->
        <p>Tinple and Kristine</p>
        <p>A couple</p>
    </body>
</html>

And there are many other features there, you can learn it by yourself. Next talking about its api, command line and browser-support, yes, jade supports them.

Command Line

When jade is installed, you can run with jade --help to look for the usage. For the above example, you can run with

jade --obj demo.json demo.jade

demo.json:

{
    "pageTitle": "Jade",
    "name": "Tinple",
    "love": true
}

Then the std push the data rendered demo.html. And that's the result. Also, you can use other command options to meet your own requirements.

API

Jade offers api to developers. For full API, see there. Below is the simple usage for compile, render string or a file.

runDemo.js:

var jade = require('jade'),
    fs = require('fs');

var options = {
    pretty: true,
    debug: true,
    compileDebug: true
}

var locals = {
    pageTitle: 'Jade',
    name: 'Tinple',
    love: true
}

// three ways, just choose one

// compile
fs.readFile('demo.jade', 'utf8', function (err, data) {
    if (err) throw err;
    console.log(data);
    var fn = jade.compile(data, options);
    var html = fn(locals);
    console.log(html);
});

// render, pseudocode
var html = jade.render('string of jade', merge(options, locals));

// renderFile
var html = jade.renderFile('demo.jade', locals);
console.log(html);

Choose any way, if just like me, just render the file, then run with node runDemo.js, and you will see the result in your terminal. For more details like the options or other function arguments, try to read the document api.

Browsers Support

The latest version of jade can be download for the browser. And it only supports the very latest browsers. I strongly recommended that you pre-compile your jade templates to JavaScript and then just use the runtime.js library on the client. So how does client-side template works? The whole workflow looks like this:

  1. Edit .jade file

  2. Compile template files to JavaScript

  3. Include runtime.js file

So edit demo.jade first, we can copy it easily. Then run with

jade --client --no-debug demo.jade

you will get a file demo.js which is JavaScript function that you call with values you want to render your template with and func returns you HTML that you just need to put somewhere on page. Now you just need to include that Jade runtime plus this file that got generated via:

<script src='runtime.js'></script>
<script src='demo.js'></script>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
    $('body').append(template({pageTitle: 'Jade',name: 'Tinple', love: true}));
</script>

File runtime.js is in your jade source code directory.

END

jade is nice, not only express uses it but also there are many more developers push the contributions about the jade on github, this essay just introduces a little, for more reading, like its feature(mixin, filter, include…etc), api, implementations or many other, visiting jade.

References: