/
mustache.html
195 lines (107 loc) · 10.3 KB
/
mustache.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!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 …">
<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">❬</a>
<a class="next" href="/desirable.html" title="desirable">❭</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(<template source>)</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’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’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>></code>), nor the ambiguous list piping. It doesn’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>