Can you dig it?

Whiskered Node Views

Aug 13th, 2013

As we draw closer to the glorious month of Movember, I find myself pondering the myriad template engines available for Node apps. The most popular is still probably Jade as its syntax is Haml-like and results in quite clean views, lacking in HTMLish clutter.

While Jade is handy, it takes some time to get used to. Plus, if you find yourself working with a UI person who prefers to speak in HTML, you’ll find yourself translating between HTML and Jade (which isn’t that hard with web apps like HTML2Jade, but nevertheless involves an extra translation step).

There are other template engines that map more closely to pure HTML. Mustache, for instance, forgoes reducing HTML entirely and introduces {}’s (i.e. mustaches) as a substitution delimiter. Thus, you can take normal HTML files and add some {}’s to make pages dynamic.

In the world of Node, there are a few Mustache implementations. One of the more interesting ones that I’ve used is Whiskers. Whiskers is fairly lightweight and doesn’t offer a lot of bells and whistles. As the project’s README states

Whiskers is focused on template readability. By limiting template logic, careful preparation of the context is encouraged, and the processing and formatting of data is kept separate from the design of the display.

Note inside the for loop, I have access to a word instance. I can call properties on it as well. Note, with Whiskers, you can’t invoke methods on passed in objects. Only properties (i.e. word.definition isn’t a function).

Jade certainly produces more elegant, less verbose view code. But Jade’s whitespace delimiting coupled with the fact that basic HTML knowledge is near universal, make template frameworks like Whiskers, which permit normal HTML with {} delimiters appealing from time to time.