ninja prototyping with templating frameworks
Post on 18-Oct-2014
1.427 views
DESCRIPTION
Slides from my talk @ MetaRefresh 2012 (http://metarefresh.in/2012/) on Front End Prototyping with Templates. Covers the general philosophy of Prototyping, Advantages of using a templating framework, how to choose the right framework and a couple of simple examples on how to use logic-less templating frameworks like mustache, handlebars, dust etc.TRANSCRIPT
with Templating Engines
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 1
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 2
udaymsabout.me/udayms
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 3
Prototyping
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 4
Making ideas and designs REAL
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 5
Quick
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 6
Iterative
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 7
Pixel Perfect
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 8
Real Data
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 9
Complete Flows
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 10
Small & Portable
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 11
Almost ‘Production Quality’
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 12
How?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 13
Templating Frameworks
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 14
WTF is that?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 15
Frameworks that allow bring in science to FE Development
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 16
There are server side ones and client side ones.
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 17
Let’s talk client side Templates
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 18
Focus on Logic-less Templates
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 19
Why?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 20
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 21
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 22
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 23
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 24
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 25
Let’s take a simple example
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 26
Template<div>
<span> {{first_name}} </span><span> {{second_name}} </span><br/><span> {{city}} </span>
</div>
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 27
JSON {“first_name” : “Uday”,“second_name” : “Shankar”,“city” : “Bangalore”
}
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 28
Compiled HTML
<div>
<span> Uday </span><span> Shankar </span><br/><span> Bangalore </span>
</div>
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 29
Rendered Output
Uday ShankarBangalore
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 30
Looks like too much work to print three words?
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 31
Template<h1> {{heading}} </h1>
<ul>
{{#tweeters}}
<li>{{name}} [@{{twitter_handle}}]</li>
{{/tweeters}}
</ul>
<h2> {{hashtag}} </h2>
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 32
JSON{
“heading” : “I follow them…”,“tweeters” : [
{“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”
}
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 33
Compiled HTML
<h1> I follow them… </h1>
<ul><li>Harish [@hsivaram]</li><li>Amit [@amit_pande}}]</li><li>Snook [@snookca]</li><li>Mrinal [@mrinal]</li><li>Sudar [@sudarmuthu]</li>
</ul>
<h2> #metarefresh </h2>
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 34
Rendered Output
I follow them…• Harish [@hsivaram]• Amit [@amit_pande}}]• Snook [@snookca]• Mrinal [@mrinal]• Sudar [@sudarmuthu]
#metarefresh
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 35
Wait! There’s more… Lot more!
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 36
mustache.github.com
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 37
handlebarsjs.com
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 38
akdubya.github.com/dustjs
{dust}
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 39
Many out there!
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….)
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 40
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 41
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 42
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 43
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 44
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 45
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 46
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 47
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 48
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 49
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 50
Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 51
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
{dust}
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 52
April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 53
Questions?