Generally speaking, a Template system can be used to separate output formatting specifications, which govern the appearance and location of output text and data elements, from the executable logic which prepares the data and makes decisions about what appears in the output.

Most template systems (e.g. PHP, smarty, Razor...) feature in fact a full scripting engine within the template content.
It allows powerful constructs like variable assignment or conditional statements in the middle of the HTML content. It makes it easy to modify the look of an application within the template system exclusively, without having to modify any of the underlying "application logic". They do so, however, at the cost of separation, turning the templates themselves into part of the application logic.

Mustache inherits from Google's ctemplate library, and is used in many famous applications, including the "main" Google web search, or the Twitter web site.
The Mustache template system leans strongly towards preserving the separation of logic and presentation, therefore ensures a perfect MVC design, and ready to consume SOA services.

Mustache is intentionally constrained in the features it supports and, as a result, applications tend to require quite a bit of code to instantiate a template: all the application logic will be defined within the Controller code, not in the View source.
This may not be to everybody's tastes. However, while this design limits the power of the template language, it does not limit the power or flexibility of the template system. This system supports arbitrarily complex text formatting.

Finally, Mustache is designed with an eye towards efficiency. Template instantiation is very quick, with an eye towards minimizing both memory use and memory fragmentation. As a result, it sounds like a perfect template system for our mORMot framework.

Mustache principles

There are two main parts to the Mustache template system:

  1. Templates (which are plain text files);
  2. Data dictionaries (aka Context).

For instance, given the following template:

<h1>{{header}}</h1>

{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li><a href="{{url}}">{{name}}</a></li>
{{/link}}
{{/items}}

{{#empty}}
<p>The list is empty.</p>
{{/empty}}

and the following data context:

{
  "header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": true
}

The Mustache engine will render this data as such:

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>
<p>The list is empty.</p>

In fact, you did not see any "if" nor "for" loop in the template, but Mustache conventions make it easy to render the supplied data as the expected HTML output. It is up to the MVC Controller to render the data as expected by the template, e.g. for formatting dates or currency values.

Next article will detail the Mustache syntax itself.
Stay tuned!