ImaginativeThinking.ca


A developers blog

What the Heck is Jade?

By: Brad

Hi Brad,
I started looking into doing web development and have been hearing about Jade; what the heck is that?

ThinkingPig

Jade is a templating language to simplify the creation of HTML documents.

What we mean by templating or HTML Templating is the ability to create templates for HTML documents where when we use them, that is when we render them, place holders will be substituted with real data. For example I might have a static HTML document but depending on the URL used or parameters provided I might want a different title heading. I can in my template define a header tag but the contents of the tag will be a place holder that is substituted with different text at render time depending on the provided parameters or URL path.

If you’ve never written HTML before or hate writing HTML then Jade looks to be a good alternative as its not HTML but a meta language which will generate HTML for you.

The Jade syntax and keywords map directly to HTML so if you use the Jade keyword h1 (Example: h1 Hello) Jade will generate a h1 tag that looks like this: <h1>Hello</h1>. Similarly paragraphs are p, un-ordered lists are ul and anchors are a; basically Jade drops the angle brackets and closing tags from HTML to simplify the syntax to reduce typing and improve readability.

Jade template files are saved with the file extension .jade and will be processed into HTML files when rendered.

Here is an example of a Jade template:

layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}

In the layout.jade file we define an HTML document with a header and body. The header will define a title tag where the value is a place holder variable called title. At render time its expected that a parameter hash will be passed in with one parameter being the title argument. We also link to a style sheet setting the rel and href attributes. Lastly we define a body but instead of putting content in the body we define a block called content, this block is a place holder for down stream templates to override. If you are familiar with C++, C#, or Java think of this statement as defining a pure virtual method. We are saying that the body will contain something but we’re relaying on the template which will extend layout to provide what that something is.

In the index.jade file we extend the layout.jade file so index.jade will use everything defined in layout.jade when generating the final HTML document. What index.jade adds is a header tag and paragraph tag to the body of the document by implementing the content block. These two tags also expect a title argument to be passed in when we generate the HTML. The h1 tag is set to the value of title argument where the paragraph tag concatenates a string literal, Welcome to, with the value of the title argument.

Commercial break...


Because Jade templates can be extended we can cut down on duplicate code and ensure consistency between pages. This is not unlike Master Pages in ASP.net.

The minimalist syntax of Jade compared to HTML some would argue makes writing and reading Jade much easier for humans then HTML.

A thing to point out here, since all the brackets and closing tags have been removed, that is to define a h1 tag I just have to type h1= hello Jade is space delimited like Python or YAML. To put an anchor within a list item you need to ensure that you properly indent your lines:

ul
  li
    a(href="#book-a") Book A
  li
    a(href="#book-b") Book B

Similarly multi-lined paragraphs need to be handled to ensure that all the lines get put into the same <p></p> tag.

p This is a one line example.
p
  | This is a multi-lined
  | example of a paragraph
  | using Jade.

There are however alternative syntax for the different keywords in Jade to simplify this type of space sensitivity.

ul
  li: a(href="#book-a") Book A
  li: a(href="#book-b") Book B

p This is a one line example.
p.
  This is a multi-lined
  example of a paragraph
  using Jade.

Variables and Control Flow

Jade can also be used when the HTML document being generated is more dynamic and different elements need to be generated based on inputs. Jade template documents can include variables and these variables can be used by the different keywords.

- var foo = "hello world"
h1= foo

The above would render <h1>hello world</h1>

You can also check variable values with if statements and switch-case statements.

if user == "Bill"
  h1 Hello William
else
  h1 Hello #{user}

Jade also has For-each loops so you can generate HTML dynamically when passed in a collection of data, such as generating a list:

ul
  for book in books //books is a json array: {"books": ["A", "B", "C"]}
    li= book
  else
    li Sorry, no books in your library.

Needless to say Jade as a language has a lot of functionality to allow you to create dynamic HTML documents.

Although the condensed syntax is nicer to read, call me old school I’ve just always preferred to write the HTML myself and typing has never been my performance bottle neck so I’d admit I don’t use Jade myself but it is rather common so its good to know about it for when you do come across it in the field.

I recommend checking out Jade’s website at jade-lang.com for an in-depth reference to the Jade meta language as the documentation is quite good.

So that is what the heck Jade is, a meta language to simplify the generation of HTML documents used in JavaScript projects such as those who use Express and Node.js. I hope that helps, if you have any questions feel free to leave them below and I’ll try to answer them as time permits.

Until next time think imaginatively and design creatively

Brad

My interest in computer programming started back in high school and Software Development has remained a hobby of mine ever since. I graduated as a Computer Engineering Technologist and have been working as a Software Developer for many years. I believe that software is crafted; understanding that how it is done is as important as getting it done. I enjoy the aesthetics in crafting elegant solutions to complex problems and revel in the knowledge that my code is maintainable and thus, will have longevity. I hold the designation Certified Technician (C.Tech.) with the Ontario Association of Computer Engineering Technicians and Technologists (OACETT), have been certified as a Professional Scrum Master level 1 (PSM I) and as a Professional Scrum Developer level 1 (PSD I) by Scrum.org as well as designated as an Officially Certified Qt Developer by the Qt Company. For more on my story check out the about page here

Feel free to write a reply or comment.