The good, the bad and the ugly of Pug template engine

I like all the cool and latest things that can increase my productivity as a developer.

So when I heard of this new template engine Jade (It is now renamed as Pug), I was quite excited by it, as Pug required indentations and not opening and closing tags like HTML.

For those who do not know what Pug templating engine is let me give a brief introduction.

Pug is a template engine.

You need to create ‘.pug’ files and transpile them to HTML. So basically an alternative to typing HTML.

But since the browser cannot understand pug files, they need to be transpiled to HTML.

So why I decided to try Pug template engine?

Indentation. Yes, that was the first and foremost reason, I liked Pug. I am a Python programmer, hence I am habituated with indentations.

To be honest, I never liked typing HTML. It always felt extremely bloated and not so human-friendly.

These two reasons were sufficient for me to try out this new cool kid on the block. I was ok with the additional step of transpiling Pug to HTML, as anyway, I had setup Gulp to automate the process.

So my journey with the Pug template engine started.

What I liked about Pug

1. Indentations give the code a cleaner look. A coding standard is forced on you which makes the teamwork and sharing of code easier than HTML.

Plus if you are coming from Python background, it will be an added advantage because Pug will make you feel like home.

The following example will make it clear on how indentations work in Pug.

  body
    div.container.is-fluid.is-marginless.level
        p.level-item.has-text-centered Get in touch
    nav.navbar
        div.container
            div.navbar-brand
              a.navbar-item(href="/")
                img(src="images/image.png" alt="Image")

2. Pug template engine allows using variables in the template. In fact, you can include regular JavaScript expressions inside Pug.

This helps you in using simple logic in the templates; like setting classes and few other things.

a.navbar-item.is-tab(class=(page === 'blog' ? 'is-active' : undefined) href="blog") Blog

As seen from above example, I am able to set the class of anchor tag to is-active if the page is the blog.

3. Using partials (partial views) is another benefit of the Pug. Inability to use partials is one of the headaches with HTML Creating a modular page, wherein a header and footer files are separate and they are included in the layout file, with content block coming from respective page files is impossible with HTML.

One must use either PHP includes or frameworks where partial views are supported. To be honest there are a number of ways you can use partials but there is no way you can do it natively in HTML.

Pug solves this problem, you can use partial views very easily just by using include syntax.

include _partials/footer

4. As I had said earlier, the browser cannot understand any other template language than HTML.

So it is necessary to convert Pug to HTML. Doing so manually will render any benefit provided by Pug, useless.

Availability of Gulp plugin helps us in automating the process of transpiling Pug to HTML. In fact, you can use Gulp watch, to transpile Pug to HTML on the fly.

Overall I was very happy with using Pug. But then, every story has a villain. And this story had villains in it too.

What I didn’t like about Pug

1. I use a lot of embedded code in my templates, like the MailChimp subscription form. MailChimp gives standard HTML code for such forms. So when I have to use them in my template, I have to convert it to Pug first and then included it. I use this tool to do it. But this defeated the purpose of simplifying things. HTML is the de facto standard in web development. Hence most of the readymade code such as MailChimp’s subscription form is available in HTML.

2. The whitespace and tab conundrum. Pug doesn’t allow the combination of white spaces and tabs. If you will mix and match tabs and whitespaces, the Pug template’s conversion to HTML won’t be possible. Even Python 3 does not allow combining whitespaces with tabs. But this is an irritating issue. And just recently, the compiler has started showing the whitespace tabs error. Otherwise, it was very difficult to pinpoint the source of error.

3. Familiarity with the HTML is another point of contention. We are using HTML for a long time. And make no mistake it has evolved a lot from the XHTML days to current HTML5. What I found out was, even though HTML is boring to type, feels unnatural, yet I was so used to HTML, it made me think twice, as to why I am switching from HTML. Why fix something that is not broken. But then we have an inertia, we are always resistant to the change.

My overall opinion

At the cost of being diplomatic, I would like to say that Pug is good in some areas and bad in some areas.

Not exactly bad but definitely cumbersome to use. Let’s try to stay in the grey area instead of being polarized. I was attracted by Pug’s ability to force a coding standard, the use of indentations and natural way of writing the code, it provided.

The availability of Gulp plugin was an added advantage for me as I use Gulp for my automation needs.

On the other hand, constant conversion from HTML to Pug if you are using the third party embedded forms, forces an additional manual work.

The whitespace and tabs mixing issue do hamper the productivity. An additional issue is if you are working in a team, there are not many developers who are used to Pug template engine. But it is very easy to learn nonetheless.

On the closing note, whether you like Pug or not depends totally on your personal preference.

I would like you to learn Pug and use it in one of your mini projects. If you are an experienced developer, it won’t take more than two hours to understand basics of Pug.

It is a very small investment that may reap big rewards down the line if you like the Pug template engine. The downside is a couple of hours down the drain.