Ninja Prototyping with Templating Frameworks

Ninja Prototyping with Templating Frameworks

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.

2f890006636505e78f8f38d68ca46859?s=128

Uday Shankar

April 23, 2012
Tweet

Transcript

  1. with Templating Engines April 23, 2012 twitter: udayms | linkedin:

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

    udayms | about.me: udayms 2 udayms about.me/udayms
  3. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 3 Prototyping
  4. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 4 Making ideas and designs REAL
  5. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 5 Quick
  6. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 6 Iterative
  7. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 7 Pixel Perfect
  8. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 8 Real Data
  9. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 9 Complete Flows
  10. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 10 Small & Portable
  11. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 11 Almost ‘Production Quality’
  12. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 12 How?
  13. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 13 Templating Frameworks
  14. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 14 WTF is that?
  15. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 15 Frameworks that allow bring in science to FE Development
  16. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 16 There are server side ones and client side ones.
  17. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 17 Let’s talk client side Templates
  18. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 18 Focus on Logic-less Templates
  19. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 19 Why?
  20. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

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

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

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

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

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

    udayms | about.me: udayms 25 Let’s take a simple example
  26. 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>
  27. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 27 JSON { “first_name” : “Uday”, “second_name” : “Shankar”, “city” : “Bangalore” }
  28. 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>
  29. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 29 Rendered Output Uday Shankar Bangalore
  30. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 30 Looks like too much work to print three words?
  31. 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>
  32. 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” }
  33. 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>
  34. 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
  35. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 35 Wait! There’s more… Lot more!
  36. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 36 mustache.github.com
  37. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 37 handlebarsjs.com
  38. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

    udayms | about.me: udayms 38 akdubya.github.com/dustjs {dust}
  39. 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….)
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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}
  52. April 23, 2012 twitter: udayms | linkedin: udayms | facebook:

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

    udayms | about.me: udayms 53 Questions?