Ninja Prototyping with Templating Frameworks

1,631 views

Published on

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.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,631
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Ninja Prototyping with Templating Frameworks

  1. 1. with Templating EnginesApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 1
  2. 2. udayms about.me/udaymsApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 2
  3. 3. PrototypingApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 3
  4. 4. Makingideas anddesignsREALApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 4
  5. 5. QuickApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 5
  6. 6. IterativeApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 6
  7. 7. Pixel PerfectApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 7
  8. 8. Real DataApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 8
  9. 9. CompleteFlowsApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 9
  10. 10. Small &PortableApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 10
  11. 11. Almost‘ProductionQuality’April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 11
  12. 12. How?April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 12
  13. 13. TemplatingFrameworksApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 13
  14. 14. WTF is that?April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 14
  15. 15. Frameworks thatallow bring inscience to FEDevelopmentApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 15
  16. 16. There areserver sideones and clientside ones.April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 16
  17. 17. Let’s talkclient sideTemplatesApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 17
  18. 18. Focus onLogic-lessTemplatesApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 18
  19. 19. Why?April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 19
  20. 20. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 20
  21. 21. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 21
  22. 22. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 22
  23. 23. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 23
  24. 24. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 24
  25. 25. Let’s take asimple exampleApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 25
  26. 26. <div>Template <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 26
  27. 27. JSON { “first_name” : “Uday”, “second_name” : “Shankar”, “city” : “Bangalore” }April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 27
  28. 28. Compiled <div> <span> Uday </span>HTML <span> Shankar </span> <br/> <span> Bangalore </span> </div>April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 28
  29. 29. RenderedOutput Uday Shankar BangaloreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 29
  30. 30. Looks like too muchwork to print threewords?April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 30
  31. 31. <h1> {{heading}} </h1> <ul>Template {{#tweeters}} <li>{{name}} [@{{twitter_handle}}]</li> {{/tweeters}} </ul> <h2> {{hashtag}} </h2>April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 31
  32. 32. { “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” }April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 32
  33. 33. <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>April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 33
  34. 34. Rendered I follow them… • Harish [@hsivaram] • Amit [@amit_pande}}]Output • Snook [@snookca] • Mrinal [@mrinal] • Sudar [@sudarmuthu] #metarefreshApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 34
  35. 35. Wait! There’smore… Lotmore!April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 35
  36. 36. mustache.github.comApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 36
  37. 37. handlebarsjs.comApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 37
  38. 38. {dust} akdubya.github.com/dustjsApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 38
  39. 39. 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 outthere!April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 39
  40. 40. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 40
  41. 41. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 41
  42. 42. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 42
  43. 43. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 43
  44. 44. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 44
  45. 45. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 45
  46. 46. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 46
  47. 47. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 47
  48. 48. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 48
  49. 49. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 49
  50. 50. Source: http://engineering.linkedin.com/frontend/client‐side‐templating‐throwdown‐mustache‐handlebars‐dustjs‐and‐moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 50
  51. 51. {dust} http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-moreApril 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 51
  52. 52. April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 52
  53. 53. Questions?April 23, 2012 twitter: udayms | linkedin: udayms | facebook: udayms | about.me: udayms 53

×