In the Loop

Regardless of your background in web development, you’ve likely used a web template system (engine). The goal of a template system is to process templates (usually in combination with a set of input data) to form finalized web pages.

template(data) => final HTML

Although some engines are designed specifically for HTML output, many can be used to generate any type of a text output.

Node has a rich ecosystem of template systems available. Since it is server-side JavaScript, many of these engines are built to work both on the client and server. The benefit: template reuse in your web applications.

All the template systems mentioned in this article work both client and server side.

In this article, rather than boring you with a module by module synopsis (hint: we’d be here for a while), we will zoom out and look at the types of systems that are available and why you might choose one style over another depending on your needs.

Types of Template Systems

Node’s web template systems can be divided into four general approaches. They are:

Embedded JavaScript

Custom Domain Specific Languages (DSLs)

Logic-less

Programmatic

Embedded JavaScript

Like the style of PHP, JSP, or ERB templates? Prefer working with vanilla JavaScript? If so, take a look at embedded JavaScript. At the core, these engines allow JavaScript code to be evaluated within a template. The most notable is EJS, which looks a lot like PHP or JSP (except it uses JavaScript, of course):

1

2

3

4

5

6

7

8

9

10

<%if(loggedIn){%>

<ahref="/account"><%=firstName%><%=lastName%></a>

<%}else{%>

<ahref="/login">LogIn</a>

<%}%>

<ul>

<%records.forEach(function(record,index){%>

<li><%=index%>:<%=record.title%></li>

<%}%>

</ul>

In addition to embedded JavaScript, EJS templates include extras like partials and filters. One notable usage of EJS templates is the npmjs site (GitHub).

Custom Markup Languages

Writing vanilla JavaScript templates can get verbose and ugly with<% } %>
code sitting all over the place. Here is where the world of custom DSLs comes in. These languages vary widely on syntax. However, you’ll typically end up with cleaner templates and some extra goodies like mixins, filters, and inheritance. Let’s look at a couple examples.

Many DSLs are implemented in multiple languages (e.g. Jade and Haml). For instance, a PHP backend could share templates with Node backend. DSLs can be helpful for designers who work with templates because it doesn’t require them to learn a full-fledged language.

Logic-less

Logic-less templates, a concept popularized by Mustache, essentially prevent any data massaging in the template itself. Although there are “logical” constructs provided (like if/then and iteration), any finessing of the data happens outside the template. Why? The goal is to separate concerns by preventing business logic from creeping into your views.

Other popular template engines in this vein include Handlebars and Dust; both add helpers to the base Mustache syntax. The Mustache parser, in particular, has been implemented for a lot of languages.

Programmatic templates

The last style we will explore is programmatic. Unlike the previous styles, which add custom syntax to HTML, these modules augment plain HTML and/or build it from scratch with data. For example, hyperglue processes plain HTML, like: