Ninja Prototyping with Templating Frameworks

with Templating
Engines

April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 1

udayms
about.me/udayms


Prototyping


Making
ideas and
designs
REAL

Quick


Iterative


Pixel Perfect


Real Data


Complete
Flows


Small &
Portable


Almost
‘Production
Quality’

How?


Templating
Frameworks


WTF is that?


Frameworks that
allow bring in
science to FE
Development


There are
server side
ones and client
side ones.


Let’s talk
client side
Templates


Focus on
Logic-less
Templates


Why?


Let’s take a
simple example


<div>

Template <span> {{first_name}} </span>
<span> {{second_name}} </span>
<br/>
<span> {{city}} </span>

</div>


JSON
{
“first_name” : “Uday”,
“second_name” : “Shankar”,
“city” : “Bangalore”
}


Compiled <div>

<span> Uday </span>

HTML
<span> Shankar </span>
<br/>
<span> Bangalore </span>

</div>


Rendered
Output
Uday Shankar
Bangalore


Looks like too much
work to print three
words?

<h1> {{heading}} </h1>

<ul>

Template
{{#tweeters}}

<li>{{name}} [@{{twitter_handle}}]</li>

{{/tweeters}}

</ul>

<h2> {{hashtag}} </h2>


{
“heading” : “I follow them…”,
“tweeters” : [

JSON
{“name”: “Harish”,“twit_handle”: “hsivaram”},
{“name”: “Amit”,“twit_handle”: “amit_pande”},
{“name”: “Snook”,“twit_handle”: “snookca”},
{“name”: “Mrinal”,“twit_handle”: “mrinal”},
{“name”: “Sudar”,“twit_handle”: “sudarmuthu”},
],
“hashtag”: “#metarefresh”
}


<h1> I follow them… </h1>

Compiled <ul>
<li>Harish [@hsivaram]</li>
<li>Amit [@amit_pande}}]</li>

HTML
<li>Snook [@snookca]</li>
<li>Mrinal [@mrinal]</li>
<li>Sudar [@sudarmuthu]</li>

</ul>

<h2> #metarefresh </h2>


Rendered
I follow them…
• Harish [@hsivaram]
• Amit [@amit_pande}}]

Output
• Snook [@snookca]
• Mrinal [@mrinal]
• Sudar [@sudarmuthu]

#metarefresh


Wait! There’s
more… Lot
more!

mustache.github.com


handlebarsjs.com


{dust}
akdubya.github.com/dustjs


underscore.js, Jade, haml-js, jQote2, doT, Stencil, Parrot, Eco, EJS, jQuery templates, node-
asyncEJS, mustache, dust.js, handlebars, Google Closure Templates, Nun, Mu, kite., jazz, jshtml,
jm, jsdom, Liquor, Coffeekup, CoffeeMug, bliss, DryKup, plates, shift, whiskers, node-dom,
stencil, node-jst, tpl, TwigJs, Templ8, PURE, JinJs (and more….)

Many out
there!

Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more


{dust}
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more


Questions?


Ninja Prototyping with Templating Frameworks

More Related Content

More from Uday Shankar (17)

Recently uploaded (20)

Ninja Prototyping with Templating Frameworks