Using Jade (Pug) to preprocess HTML


HTML looks like soup as you create complex layouts. You have to use opening <tag> and closing </tag>. They are everywhere and you can’t forget to close one. Okay, I know that if you’re using a text editor like sublime text, it sort of takes care of these problems with plugins. Jade Templating language, now known as Pug, transpiles into HTML and fixes this issue.

Jade is an HTML templating language. Actually, it is not only for HTML because it also provides an extension to writing javascript. Let me show you HTML vs Jade. One word of warning: If you intend to use PHP, don’t use Jade. It is javascript friendly, and unfortunately doesn’t play well with <% php> tags.

HTML — Example 1

<body> 
<h1>This is a header</h1>

Headline 1


Yes, this is pretty cool.



Headline 2


Life is good.



</body>

Jade — Example 1

body 
h1 This is a header
.container
h1 Headline 1
p Yes, this is pretty cool.
.container
h1 Headline 2
p Life is good.

Compare the examples above. Instead of closing tags, Jade relies on indentations. Indentations seem much more intuitive to the eye in seeing parent-child relationships between elements.

Go ahead, go to HTML2Jade and play with the two formats yourself.

The other advantage of using Jade is that it supports partials. This means that if you’re making a static website, you can re-use the same code in your pages. Where is this useful? How about the navigation menu. You’ll likely have the same navigation menu for all your pages, so when you add a new link to it, you don’t have to update all your pages. The partial feature part of Jade will update them for you and keep your code DRY (Do not Repeat Yourself).

I’ve noticed a difference in comprehending the page when using Jade in my code. I open the document, and I can quickly understand what is going on.

Since Jade is a templating language, that means that it must be preprocessed before you get an output HTML file. I really like using Prepros to automatically process any Jade files in my selected watch folder. The other great thing about PrePros is that it automatically refreshes the browser for me when it detects changes to the document. If you’re on a Mac, you can use CodeKit.


Originally published at www.basicdrop.com on October 19, 2015.

Share on facebook
Share
Share on linkedin
Share
Share on reddit
Reddit
Share on twitter
Twitter
Nikita Kazakov
Nikita Kazakov

Software Developer and Product Owner.