Ninja Prototyping with Templating Frameworks

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 udayms about.me/udayms

udayms | about.me: udayms 3 Prototyping

udayms | about.me: udayms 4 Making ideas and designs REAL

udayms | about.me: udayms 5 Quick

udayms | about.me: udayms 6 Iterative

udayms | about.me: udayms 7 Pixel Perfect

udayms | about.me: udayms 8 Real Data

udayms | about.me: udayms 9 Complete Flows

udayms | about.me: udayms 10 Small & Portable

udayms | about.me: udayms 11 Almost ‘Production Quality’

udayms | about.me: udayms 12 How?

udayms | about.me: udayms 13 Templating Frameworks

udayms | about.me: udayms 14 WTF is that?

udayms | about.me: udayms 15 Frameworks that allow bring in science to FE Development

udayms | about.me: udayms 16 There are server side ones and client side ones.

udayms | about.me: udayms 17 Let’s talk client side Templates

udayms | about.me: udayms 18 Focus on Logic-less Templates

udayms | about.me: udayms 19 Why?

udayms | about.me: udayms 20

udayms | about.me: udayms 25 Let’s take a simple example

udayms | about.me: udayms 26 Template <div> <span> {{first_name}} </span> <span> {{second_name}} </span> <br/> <span> {{city}} </span> </div>

udayms | about.me: udayms 27 JSON { “first_name” : “Uday”, “second_name” : “Shankar”, “city” : “Bangalore” }

udayms | about.me: udayms 28 Compiled HTML <div> <span> Uday </span> <span> Shankar </span> <br/> <span> Bangalore </span> </div>

udayms | about.me: udayms 29 Rendered Output Uday Shankar Bangalore

udayms | about.me: udayms 30 Looks like too much work to print three words?

udayms | about.me: udayms 31 Template <h1> {{heading}} </h1> <ul> {{#tweeters}} <li>{{name}} [@{{twitter_handle}}]</li> {{/tweeters}} </ul> <h2> {{hashtag}} </h2>

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” }

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>

udayms | about.me: udayms 34 Rendered Output I follow them… • Harish [@hsivaram] • Amit [@amit_pande}}] • Snook [@snookca] • Mrinal [@mrinal] • Sudar [@sudarmuthu] #metarefresh

udayms | about.me: udayms 35 Wait! There’s more… Lot more!

udayms | about.me: udayms 36 mustache.github.com

udayms | about.me: udayms 37 handlebarsjs.com

udayms | about.me: udayms 38 akdubya.github.com/dustjs {dust}

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….)

udayms | about.me: udayms 40 Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐more

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

udayms | about.me: udayms 53 Questions?

Ninja Prototyping with Templating Frameworks

Ninja Prototyping with Templating Frameworks

More Decks by Uday Shankar

Other Decks in Technology

Featured

Transcript