Why I Dropped Jade (Pug)

A little while back Jade got renamed to Pug. Since discovering Jade a few years back I have been a big fan. I don’t want to think it was because I was doing a lot more Python programming at the time (and less Go) but I am sure I was influenced.

Update November, 2018:

It has been over four years since this original post. I now use Vue and VuePress for everything and have felt the lure of PUG for Vue templates since it does pair well with Stylus (obviously). Stylus makes sense. PUG still doesn’t, to me. I can see importing in the <script> and <style> but not <template> since you can just use another SFC instead. This has the added advantage of being able to build it into a full SFC if needed. Anything smaller is likely better as a variable. I realize this ends up being heavier than just a simple HTML template compile but I find myself following many of the best practices I learned from studying the VuePress default theme which uses this approach. And frankly, if it is good enough for Evan, it’s good enough for me. The day Evan begins using PUG in the default VuePress theme will be the day I do as well. Coincidently, I was already (and still am) a huge Stylus fan (but be sure to learn modern CSS first). Stylus makes so much sense in Vue SFCs. At the end of the day, when the SFC language is itself HTML why would anyone want to add PUG to it and cloud things up further? There’s just no justifiable use case. By the way, VSCode makes HTML ridiculously easy to use through tab completion. It does also have PUG conversion but just why?

HTML is the Language of the Web

HTML5 brought us back from the brink of XHTML hell. Web development can get pretty messy and white space indentation is the last thing I want to put into the mix. HTML5 optional tags, revisiting the <b> and <i> tags and many other changes make it worth coding in directly.

Lock In

Some developers will argue that Jade is cleaner and better for teams, but I would actually argue the opposite point. With Jade everyone has to use Jade. While it is possible to bring in HTML it is not practical to cut and paste HTML into Jade templates. With all the valuable snippets of HTML in the world choosing a template engine that is largely incompatible with them seems less than desirable.

Simple Example

Let’s take a very simple example, one that a beginner student might encounter. Say you are creating a simple, single page web site for a school project. You create all the content as a single HTML page and a single style sheet that you link in. You are just learning about static site generators and web build processes and want to start small by just combining the two and running them through a minifier.

The first step is to just include the other style sheet inline with the html. A simple include of some kind would be nice. You could create your own include tag and a shell script but want to just use something simple that won’t mess with the rest of the HTML in your file.

To do this in Jade you would have to rewrite all of it in Jade syntax. To do this in almost anything else (Mustache, Handlebars, Go, Hugo, Liquid) you can simply include special markup without changing anything else.

CodePen and Kin

Then say you find a cool widget on codepen.io. Looks like it doesn’t have a Jade option. You cut and paste it into your markup as is. If it were Jade you would have to rewrite it or make it separate and include it. Yes you can attempt to paste it but you will be fighting with escapes and indentation.

Jaded Brain

Then there is the issue of context switching your brain between HTML and Jade. This just isn’t fun no matter how smart you are. In some cases I have become so immersed in Jade that I actually started typing it instead of HTML while teaching a class. Nope. No more.

Editor Syntax Twister

My editor doesn’t like the syntax changes either. It is almost entertaining watching VIM with the latest plugins deal with a full page of Jade with Markdown and HTML and JavaScript included in it. Hey, this is one of Jade’s biggest touted advantages, but when it comes to editing it’s just best to keep them separate. At that point Mustache partials are looking just fine. I really don’t want a lot of magic in my template tool.