Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 5dc1495f05
Fetching contributors…

Cannot retrieve contributors at this time

196 lines (107 sloc) 10.558 kb
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>mustache, hogan, handlebars | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="I have been working quite a bit with node and have had a chance to use Handlebars quite frequently. While it is an implementation of Mustache, it &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/mustache.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/twittering-with-d3.html" title="Twittering with D3">&#x276C;</a>
<a class="next" href="/desirable.html" title="desirable">&#x276D;</a>
</nav>
<header>
<time datetime="2012-01-01T10:05:00-08:00" pubdate><span class='month'>Jan</span> <span class='day'>01</span> <span class='year'>2012</span></time>
<h1 class="entry-title"><a href="/mustache.html">mustache, hogan, handlebars</a></h1>
</header>
<div class="entry-content"><p>I have been working quite a bit with <a href="http://nodejs.org">node</a> and have had a chance to use <a href="http://handlebarsjs.com">Handlebars</a> quite frequently. While it is an implementation of <a href="http://mustache.github.com">Mustache</a>, it goes a bit further in providing some helpers like <code>if</code>/<code>each</code>/<code>list</code>/<code>with</code> etc along with the ability to register custom helpers you need. Since then, I have heard about <a href="http://twitter.github.com/hogan.js/">Hogan</a> which is almost equivalent but not. I wanted to just write down what I have discovered while investigating these.</p>
<h3>Mustache</h3>
<p>Mustache is a logic-less templating language that has found implementation in various languages, including Ruby, Python, PHP, C++ and JavaScript. The Official JavaScript implementation is called <a href="https://github.com/janl/mustache.js">mustache.js</a>.</p>
<p>Mustache.js does not compile the templates ahead of time. As a result it is significantly slower than the other two implementations of Mustache. Mustache also <a href="http://jsbin.com/afasot/7/">strips white spaces from your template</a> (thnx <a href="https://twitter.com/jdalton">@jdalton</a> - note the github urls for these libs seem to 404 occassionally).</p>
<h3>Handlebars</h3>
<p>Handlebars.js provides an implementation of Mustache with some extra features.</p>
<p>The biggest feature is that the templates are compiled before use. This means, the template is not parsed right when the template needs to be applied, but rather parsed as <code>Handlebars.compile(&lt;template source&gt;)</code> first and data is then passed to this compiled template for rendering. This speeds up the <a href="http://jsperf.com/t-bench2/7">rendering of data significantly compared to Mustache</a>.</p>
<p>Handlebars.js, contrary to Mustache&#8217;s philosophy of being logic-less, also provides some basic extensions to make it easy to manipulate the data that is used on the templates. You can also register helpers that can do more manipulations of data like so:</p>
<pre><code>Handlebars.registerHelper('hyphenate', function(tag) {
return tag.split(' ').join('-');
});
</code></pre>
<p>So, if you want one of the input data objects to render differently, you don&#8217;t have to add a new object representing the new rendering (or manipulate the rendered output afterwards). You can simply work with the helper to change based on the input.</p>
<h3>Hogan</h3>
<p>Hogan.js is a library that is a straightforward implementation of mustache. Like Handlebars, Hogan is also compiled ahead of data being sent to render which makes it faster than Mustache. But unlike Handlebars, Hogan does not provide any extra features.</p>
<p>Hogan.js seems to have better performance on <strong>most</strong> browsers. Hogan is a great alternative to Mustache.js for minimalists who simply want a template to use and nothing more.</p>
<h3>What about others?</h3>
<p>I was most taken in by Mustache, which is why I did this research to see what are the best Mustache implementations out there. But there are certainly other JavaScript template options available (including one provided by <a href="http://documentcloud.github.com/underscore/">underscore</a>).</p>
<p><a href="http://tbranyen.com/">Tim Branyen</a> is working on <a href="http://combyne.github.com/">Combyne</a> which is similar to Mustache but provides additional features that are similar to those found in <a href="http://liquidmarkup.org/">Liquid</a>.</p>
<p><a href="https://github.com/adammark/">Adam Mark</a> has <a href="https://github.com/adammark/Markup.js">Markup.js</a> out, which is similar to mustache in some ways, but works on non-IE browsers. In addition it provides <a href="https://github.com/adammark/Markup.js/tree/master/src/pipes">piping out of the box</a> and has a low footprint (1.8K). However, I do not like the syntax for piping argument (<code>&gt;</code>), nor the ambiguous list piping. It doesn&#8217;t precompile templates either, but seems to have some ideas on working with language strings. Definitely worth a look.</p>
<h3>What do I use?</h3>
<p>I use Handlebars. Mainly, the performance boost of Hogan does not seem that significant for me given the opportunities of using helpers for simple data manipulation. My typical use cases seem to always have some client-side data manipulation that hogan does not provide for.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2012-01-01T10:05:00-08:00" pubdate><span class='month'>Jan</span> <span class='day'>01</span> <span class='year'>2012</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2012-01-01-mustache.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar"
src="http://a2.twimg.com/profile_images/1696865113/me_normal"
height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/mustache.html';
var disqus_identifier = 'http://nimbupani.com/mustache.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.