Javascript Templating Language and Engine— Mustache.js with Node and Express

Sherlynn Tan
Jan 20 · 3 min read

Javascript Templating

Javascript templating is a fast and efficient technique to render client-side view templates with Javascript by using a JSON data source. The template is HTML markup, with added templating tags that will either insert variables or run programming logic.

The template engine then replaces variables and instances declared in a template file with actual values at runtime, and convert the template into an HTML file sent to the client.

Mustache

As the name suggests, it was named mustache because the syntax resembles a Mustache. E.g. {{ placeholder }}

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code — anything. It works by expanding tags in a template using values provided in a hash or object.

It is often referred to as “logic-less” because there are no if statements, else clauses, or for loops. Instead, there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

mustache.js is an implementation of the mustache template system in JavaScript. It is often considered the base for JavaScript templating. And, since mustache supports various languages, we don’t need a separate templating system on the server side.

Mustache.render(“Hello, {{name}}”, { name: “Sherlynn” });
// returns: Hello, Sherlynn

In the above, we see two braces around {{ name }}. This is Mustache syntax to show that it is a placeholder. When Mustache compiles this, it will look for the ‘name’ property in the object we pass in, and replace {{ name }} with the actual value, e,g, “Sherlynn”.

A confusion that I have initially was that Mustache is a templating engine. However, after some googling, I’ve come to learn that Mustache is NOT a templating engine. Mustache is a specification for a templating language. In general, we would write templates according to the Mustache specification, and it can then be compiled by a templating engine to be rendered to create an output.

Source: The Ultimate Mustache Tutorial

Mustache-Express

If you intend you use mustache with Node and Express, you can use mustache-express. Mustache Express lets you use Mustache and Express together easily.
To install:
With Yarn:

$ yarn add mustache-express

or with NPM:

$ npm install mustache --save

Configure mustache-express in your server.js/app.js/index.js file:

Configure Mustache for use in your node-express application

Create a views folder and add some html view templates (e.g. hello.html):

Create a views folder + html view files
A simple hello.html file with “Hello {{name}}” mustache usage

Then in the router configuration, use res.render(TEMPLATE_NAME, JSON_DATA). Example:

res.render('hello', {"name": "Sherlynn"})

Whereby the first parameter ‘hello’ refers to the hello.html file (no need to include the extension (e.g. hello.html) as it has been previously set as html.

The second parameter would be the JSON data itself. We can also pass in a variable representing the data, for example:

var nameObject = {"name": "Sherlynn"}res.render('hello', nameObject)

Final output:

Hello {{name}}

This is just a simple basic example, but I hope it helps you to understand the basic concept behind templating.

Thanks for reading!

Sherlynn Tan

Written by

Software Developer at Thoughtworks | Marathon Runner | Ex-Pharmacist Writing on Coding, Technology and Running

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade