About this book

Jade is a template engine for node.js and the default rendering engine for the Express web framework. It is a new, simplified language that compiles into HTML and is extremely useful for web developers. Jade is designed primarily for server-side templating in node.js, but it can also be used in a variety of other environments to produce XML-like documents such as HTML and RSS.

This practical, example-oriented guide will teach you how to write Jade, utilize its features, and recognize the best ways to organize templates in your projects. With this book, you will avoid the common pitfalls and issues with sparse documentation, allowing you to learn Jade faster and use it more effectively.

To understand Jade, we will first examine the reasons for its design and how these translate into a tool that can provide real benefits to you. You will develop confidence with each of the features of the language with the help of practical examples and thorough explanations. We will cover preprocessors, basic syntax, feeding data into templates, and incorporating logic. By the end of this book, you will be able to effectively use essential features such as filters and mixins as well as template inheritance through a block system. To tie it all together, we will also look at some of the best practices to follow when organizing your Jade projects.

Use this comprehensive guide to the Jade language to help you become a more efficient web developer.

Publication date:
March 2014
Publisher
Packt
Pages
80
ISBN
9781783286355

 

Chapter 1. What is Jade?

Jade is a templating language and a shorter, more elegant way to write HTML. If you are just looking for a good way to create templates, or you want to ditch HTML's ugly syntax, Jade can help you.

 

Markup like poetry


Let's start with the following simple example. First, we have the HTML code and then the same thing rewritten in Jade:

HTML

Jade

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Meet Jade</h1>
    <p>
      A simple Jade example.
      You'll learn to write
      all of this in ch 2.
    </p>
    <p>Jade FTW!</p>
  </body>
</html>

doctype html
html
  head
  body
    h1 Meet Jade
    p.
      A simple Jade example.
      You'll learn to write
      all of this in ch 2.
    p Jade FTW!

Both of the preceding code examples mean the exact same thing, except one is much shorter. This is Jade, a powerful, terse templating language that is compiled into HTML. In addition to the syntactical improvements, Jade lets you simplify redundant markup with programmed logic. Also, it allows you to create templates that can take in and display data.

Why should I preprocess?

Jade really is just one option in a whole class of preprocessors. To have a complete understanding of Jade, we should understand why this class of languages was created.

Preprocessors are high-level languages that offer syntactical and functional improvements over their "vanilla" (non-preprocessed) counterparts. These high-level languages allow you to write the markup in a better language that is compiled down to normal (vanilla) HTML. Thus, they are there purely to improve your productivity, without affecting their compatibility with existing technologies.

Preprocessing, in general, offers many benefits over writing vanilla HTML. Standard Generalized Markup Language (SGML), the predecessor of HTML, was created to be robust and easy to parse at the expense of being clean and easy to write. Because of this, a variety of preprocessors have emerged that offer a more terse syntax.

Occasionally, people will avoid preprocessing because it adds another step, that is, another layer of abstraction to the end result. However, improvements in code readability and ease of writing far outweigh the inconvenience of this additional step. Furthermore, anything more complex than a static site will require a "build" step anyway, to inject whatever dynamic content the site has.

How Jade preprocesses

In the case of Jade, this preprocessing is done by compiling templates into JS and then rendering them to HTML, as shown in the following diagram:

Because Jade's compiled templates really are just JavaScript functions that output HTML, they can be rendered on both the server and in the browser.

Comparison with other preprocessors

As I mentioned earlier, there are many preprocessors and templating solutions, so it is worth discussing why those may be inadequate.

HAML

HAML is a very popular, beautiful templating language that was made to replace ERB (Ruby's default templating system) with a more beautiful abstracted markup language. In fact, HAML was one of the major influences on the creation of Jade and can be thanked for many of its features.

However, HAML does have a few problems. It lacks useful features such as mixins and block operations such as extend, and it has a slightly more verbose syntax.

The original implementation of HAML also had the disadvantage of not compiling into JS, so it couldn't be used to write templates that are evaluated on the client side. However, now there are several JS implementations of HAML, the most popular being haml-js (https://github.com/creationix/haml-js).

PHP

PHP does not offer any syntactical improvements and must be rendered on the server side, so it may not be the first thing that comes to mind when discussing these types of languages. However, it is currently the most popular HTML preprocessor; sadly, it is also the worst.

It can hardly be considered a templating language because it has overgrown the scope of a typical templating language and has gained the features of a complete object-oriented programming language. This is a major issue because it encourages the mixing of business logic with templating logic. Combining this with PHP's already awful design, it makes for some pretty horrific code.

Jinja2

Jinja2 is a templating language for Python. Like PHP, it doesn't have any syntactical improvements and must be rendered on the server side. Unlike PHP, it has a sensible language design, supports block-based operations, and it encourages you to keep most of the logic outside of templates. This makes it a good, general-purpose templating language, but it lacks the HTML-specific syntax optimizations that Jade and HAML have.

Mustache

Mustache is another JS-based templating language, and like Jade, it compiles into JavaScript, meaning it can be rendered on the client side. However, it too lacks HTML-specific syntactical improvements.

There are many other templating languages, but they all suffer from pretty much the same issues, or they just haven't gained a large enough supporting community to be recognized as a major language yet.

Installation instructions

To install the Jade compiler, you first need to have Node.js installed. This is a JavaScript interpreter based on V8 that lets you run JS outside of the browser. The installation instructions are available at http://nodejs.org/. Once you have Node.js installed, you can use npm (Node.js Package Manager) to install Jade from the terminal as follows:

$ npm install jade -g

(The -g command installs Jade globally—without it, you wouldn't be able to use the jade command)

 

Compiling Jade


Now that you have Jade installed, you can use the jade command to compile Jade files. For example, if we put some Jade in a file:

$ echo "h1 Some Jade" > file.jade

Then we can use the jade command to render that file.

$ jade file.jade

  rendered file.html

This will create file.html, as shown:

$ cat file.html
<h1>Some Jade</h1>

By default, jade compiles and renders the file, but if we only want it to compile into JS, we can use the --client argument, as shown:

$ jade --client file.jade

  rendered file.js

$ cat file.js
function anonymous(locals) {
jade.debug = [{ lineno: 1, filename: "file.jade" }];
try {
var buf = [];
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
buf.push("<h1>");
jade.debug.unshift({ lineno: undefined, filename: jade.debug[0].filename });
jade.debug.unshift({ lineno: 1, filename: jade.debug[0].filename });
buf.push("Some Jade");
jade.debug.shift();
jade.debug.shift();
buf.push("</h1>");
jade.debug.shift();
jade.debug.shift();;return buf.join("");
} catch (err) {
  jade.rethrow(err, jade.debug[0].filename, jade.debug[0].lineno,"h1 Some Jade\n");
}
}

This results in some very ugly JS, mostly due to the debugging information. We can remove that debugging information with the --no-debug argument.

$ jade --client --no-debug file.jade

  rendered file.js

$ cat file.js
function anonymous(locals) {
var buf = [];
buf.push("<h1>Some Jade</h1>");;return buf.join("");
}

The JS resulting from that could still be optimized a little bit more (and likely will be in future versions of the compiler), but because it's just machine-generated JS, it's not a huge issue. The important part is that this JS can be executed on the client side to render templates dynamically. This will be covered more in Chapter 4, Logic in Templates.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

 

Summary


In this chapter, we learned the idea behind preprocessors, and why Jade is awesome. Also, we learned the process that Jade uses to compile templates and how to install/use Jade.

About the Author

  • Sean Lang

    Sean Lang attends the Milwaukee School of Engineering; he is currently majoring in software engineering. Even though he is a freshman there, he is by no means new to the field. He has been teaching himself software development for the last four years, and during this time, he has done extensive volunteer work for open source software projects. These include roots (a toolkit for building web apps), the Jade template engine, nib (a set of utilities for advanced web page styling), and a myriad of smaller projects. In addition to this, he has been doing freelance web designing and consulting, which is especially convenient because it gives him an opportunity to use the open source tools that he has been developing in production. He started writing this book about Jade to supplement the existing documentation and help teach people the language. Also, he had never written a full book before, so he was really interested and excited to know what being an author is like.

    Browse publications by this author

Latest Reviews

(4 reviews total)
Overall, I thought "Web Development with Jade" was a good read. I think my only criticism would be that it could do with an update (after all, "Jade" is now "Pug"). But any reasonably competent reader should be able to work around the anachronisms. But I was in the market for a book that would bring me up-to-speed on Pug quick…and "Web Development with Jade" delivered…I easily got through it in a couple of days and am now quite capable with Pug.
El libro contiene los ejemplos justos y las explicaciones adecuadas. Me ha parecido facil de seguir y acertado.
It was okay. But didn't really say anything beyond the official documentation.
Book Title
Access this book, plus 7,500 other titles for FREE
Access now