Be awesome with Jade
A couple of month ago, I was working on a website development project, the client needed to develop a static site to represent their business on-line, So I developed them a static HTML site and they were happy, but after the development is complete they asked me to change some details in website footer and as it was developed with only HTML I had to go through all 36 static pages and change the details in the footer. I realized that managing static HTML sites is very hard and tedious.
The solution was to move to some templating engine which would provide the modularity to the common element of the site. I tried to find a good templating engine suitable for static site development and I met Jade.
Jade is an awesome templating engine built on top of Node js. It allows you to rapidly build HTML templates that are modular, easy to code and maintain.
Let’s take a look at some beautiful features of jade
1. Elegant and concise syntax
The syntax is one of the reasons why jade is so awesome. Jade follows indented flavor of nesting statements like python, so you don't need to close any tag. It allows you to write neat HTML tags without angular brackets thus saves a hell lot of keystrokes :).
Also it’s not only used to create HTML markups it supports any XML typed language like SVG.
Take a look at a basic page structure built with jade:
Hint: hover over following code and click view compiled button bellow to see the jade code compiled into HTML
2. Variables, Loops & Control structure
As Jade is built on top of Node js it allows you to use all the features a programming language can provide like variables, loops and control structure.
So you can develop lightweight CMS like blogs. In fact this blog is also developed with jade.
Let's see how we can use variables and loops in jade
3. Mixins
A mixin is similar to the function. It allows you to pass parameters to it and generate template based on the parameters.
Let's define a mixin and user it to create some template
4. Template importing & inheritance
Jade allows you to include the contents of one jade file into another. It also allows you to extend a layout or parent template.
Consider following example where we includehead.jade andfoot.jade external files usinginclude keyword.
The following example indicates how we can create a templatelayout.jade and extend the template inpage.jade.
Conclusion:
While we went through the basic concepts of Jade. Jade is much more then we discussed here. Take a look at the links mentioned bellow in further reading if you want to learn more about Jade.
If you liked this post, do share it. Don't forget to leave your comments and feedback in the comment box bellow.
Happy Jading!
P.S. Jade has been renamed to pug due to a copyright claim. So the future releases of Jade will be named as pug.