Mustache as a Second Language

The mustache template language is ubiquitous with speed and efficiency. While many different templating engines and languages exist in web development, mustache crosses support for many different languages including PHP and JavaScript. Many times on a project, a point arrives when the project grows larger than the initial thought or intention. Walls are run into and hurdles to slow down work get in the way. Embedding the language, simple strings of communication, into your code is something many projects succeed well at, unfortunately. Once languages lives in the code, the difficulties to altering to a new language increase exponentially. In fact, adding a language becomes such a large project, that it stymies growth and becomes a large feature if not entirely scrapped; whereas it should just be part of the initial design. A unique solution to this that I found though is using the mustache templating language to make the localization process much easier.

Mustache is a very simplistic templating language, and that makes it powerful. It limits the ability to get crazy with embedding logic into templates, forcing the business layer to be more robust and modular. In the most basic fashion, mustache garners the name from the use of {{ }} as the delimters for variable morphing. Adding in a few other principles; {{#name}} … {{/name}} will loop through an array or object (Mustache deals primarily with Arrays and Objects depending on the language it’s utilized in); {{^name}} … {{/name}} for when something is false or undefined; and {{>name}} for embedding another template directly into the current one, as a partial. Don’t let mustache’s name fool you, the delimiters can be changed. In fact, %%name%% could be just as valid, if that is set as the delimiter option.

So here’s the trick; the unique solution alluded to previously. Run mustache twice. The first time, can occur at any moment in time, preferably during a build process of the code, to limit the compile time of mustache (which will add up). The scenario goes like this. A template is made, not unlike this one:

<span>[[ title ]]</span> {{#set}} 
<a href="url" title="[[ title ]]">[[ url ]]</a> {{/set}}

Notice all of the funkyness!
The first run through mustache, the delimiters change to [[ ]] allowing the template to pass in the language you would like to be placed into the template. This file is then saved in a path that is accessible via the language you embedded. Something like /templates/en/mytemplate.html vs. /templates/es/mytemplate.html. Each language will have it’s own template. Then once, the mustache is ready for use in the app, the language template is used according to the language chosen. The final template is ready and looks more like this:

<span>Click this ad for $</span> {{#set}} 
<a href="url" title="I'm an ad!"> Click Me!</a> {{/set}}

This process can be taken further, like applying a much more efficient mustache template file to the front end, using Twtiter-made HoganJS. There are many other dynamic things you can accomplish by running Mustache more than once, feel free to come up with them, just share them when you do!