Mustache (template system)

Mustache
Initial release 2009 (2009)
Repository
Edit this at Wikidata
License MIT
Website mustache.github.io/,%20http://mustache.github.io/

Mustache is a simple web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, Common Lisp, D, Dart, Delphi, Erlang, Fantom, Go, Haskell, Io, Java, JavaScript, Julia, Lua, .NET, Objective-C, OCaml, Perl, PHP, Pharo, Python, R, Racket, Ruby, Rust, Scala, Smalltalk, Swift, Tcl, CFEngine and XQuery.

Mustache is described as a "logic-less" system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and lambdas.

It is named "Mustache" because of heavy use of curly braces ,{ }, that resemble a sideways moustache.

Mustache is used mainly for mobile and web applications.[1][2]

History and principles

Mustache-1 was inspired by ctemplate and et,[3] and started as a GitHub distribution at the end of 2009. A first version of the template engine was implemented with Ruby, running YAML template texts. The (preserved) main principles were:

The input data can be a class, so input data can be characterized as an MVC-view. The Mustache template does nothing but reference methods in the (input data) view.[3] All the logic, decisions, and code is contained in this view, and all the markup (ex. output XML) is contained in the template. In an MVP context: input data is from MVP-presenter, and the Mustache template is the MVP-view.

Examples

The simplest template:

Hello {{name}}

Template with section tag:

{{#x}}
Some text
{{/x}}

Here, when x is a Boolean value then the section tag acts like an if conditional, but when x is an array then it acts like a foreach loop.

Template that is not escaped:

{{&body}}

Here, if body contains HTML, it won't be escaped.

Technical details

Syntax highlighting is available in Vim, Emacs,[4] TextMate, Coda and Atom.

The Mustache templates support is built into many web application frameworks (ex. CakePHP). The support in JavaScript includes both client-side programming with many popular JavaScript libraries and Ajax frameworks like jQuery, Dojo and YUI, as well as server-side JavaScript using Node.js and CommonJS.

Specification and implementations

There are many Mustache Engine implementations available, and all of them meet a common specification (see external links) — that for final users results in the common syntax.

As of March 2011, the last SPEC_VERSION was 1.1.2.[5]

All Mustache Engines, in the v1.X architecture, have a render method, a Mustache_Compiler class and a Parser class.

Variations and Derivatives

Mustache inspired numerous JavaScript template libraries which forked from the original simplicity to add certain functionality or use.

Handlebars

Handlebars.js is self-described as:

Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.[6]

Handlebars is currently one of the most popular GitHub/NPM packages with (as of this date) over 5.3 Million downloads in the last month. (Which surpasses the popularity of even Mustache (at 824K[7] downloads last month) or more often discussed libraries such as: Angular.js (620K[8]), React (2.6M[9]) or Backbone.js (615K[10]).

Handlebars differs from its predecessor in that:

  • Helpers: Within Block Expressions (which are called sections in Mustache) Helpers can allow custom functionality through explicit user-written code for that block. While in Mustache, the spec determines the functionality of sections with less customizability.
  • Nested Paths (Mustache only allows Simple paths, whereas Handlebars supports greater nesting of objects). Allowing for:[11]
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>

Using the context:

var context = {
  title: "How handlebars makes writing templates easier",
  author: {
    id: 47,
    name: "An author Name"
  },
  body: "Handlebars is a bit easier for simple things."
};

Where as the same in Mustache would require either a block of that nested object or flattening context and thus would be:[12]

<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
{{! or: }}
{{#author}}
  <h2>By {{name}}</h2>
{{/author}}

And a few other functionalities mostly related to making usage easier.

References

  1. ↑ "Smashing Mobile Web Development", G. Avola and J. Raasch, 2012. ISBN 9781118348123.
  2. ↑ "Functional Programming Applied to Web Development Templates", J. Cady, 2011. MS Project Report.
  3. 1 2 https://github.com/defunkt/mustache/blob/master/README.md
  4. ↑ http://web-mode.org
  5. ↑ "Changes". Mustache. GitHub. March 20, 2011.
  6. ↑ wykatz, NPM. "html+handlebars NPM". html+handlebars NPM package details. Node Package Manager. Retrieved 20 December 2016.
  7. ↑ janl, NPM. "Mustache NPM". Mustache NPM package details. NPM. Retrieved 20 December 2016.
  8. ↑ NPM, petebd. "Angular NPM". Angular NPM package details. NPM. Retrieved 20 December 2016.
  9. ↑ "React NPM". React NPM package details. Node Package Manager. Retrieved 20 December 2016.
  10. ↑ NPM, jridgewell. "Backbone NPM". Backbone NPM package details. NPM. Retrieved 20 December 2016.
  11. ↑ Katz, Yehuda. "html+handlebars.js: Minimal Templating Language". html+handlebars Official Documentation. html+handlebars.js. Retrieved 20 December 2016.
  12. ↑ Lehnardt, Jan. "Mustache". Mustache Official Documentation. Mustache. Retrieved 20 December 2016.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.