Mustache

1,921 views
1,768 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,921
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mustache

  1. 1. Render your web withMustache Template engine SWT Tech Share / @khasathan
  2. 2. {{{syntax}} Mustache 2
  3. 3. “The Logic-less templates” 3
  4. 4. Mustache●Template engine / render engine●Lack of any logic statement like if … else●Compatible with popular Javascript Framework ● Client side - Jquery, YUI, Dojo ● Server side – Node.js 4
  5. 5. Languages/Platforms support ●Ruby ● Java ● ActionScript ●Javascript ● .Net ● Scala ●Python ● Android ● Clojure ●Erlang ● C++ ● Fantom ●PHP ● Go ● CoffeeScript ●Perl ● Lua ●D ●Objective-C ● Ooc ● Node.js 5
  6. 6. Why use?Before I tell you why we use templates enginecompare this example ... 6
  7. 7. Data model{ "name" : "korkeat", "username" : "khasathan", "url" : "http://khasathan.in.th" "programming" : ["Java","PHP","Python"]} 7
  8. 8. … And we expect result as ...<h1>Profile of korkeat</h1><p>Username: khasathan</p><p>Url: http://khasathan.in.th</p><ul> <li>Java</li> <li>PHP</li> <li>Python</li></ul> 8
  9. 9. Without template enginevar html = ;html += <h1>Profile of + DATA_MODEL.name + </h1>;html += <p>Username: + DATA_MODEL.username +</p>;html += <p>Url: + DATA_MODEL.url +</p>;html += <ul>;for(lang in DATA_MODEL.programming) { html += <li>+ lang +</li>;}html += </ul>;console.log(html); 9
  10. 10. … want to say the magic word!! 10
  11. 11. With template enginevar tmpl = <h1>Profile of {{name}}</h1> <p>Username: {{username}}</p> <p>Url: {{url}}</p> <ul> {{#programming}} <li>{{.}}</li> {{/programming}} </ul>;var html = Mustache.to_html(tmpl, DATA_MODEL);console.log(html); 11
  12. 12. 12
  13. 13. How it works compile outputData model template markup 13
  14. 14. Benefits● Seperate markup from code (MVC approach)● Re-use code. DRY (Dont repeat yourself)● Good for maintain● Code is pretty <3 14
  15. 15. What else ...● Javascript ● Handlebars ● Dust.js ● EJS● PHP ● Smarty ... 15
  16. 16. … and more more more formany languages / platforms 16
  17. 17. {Make me happy when coding! 17
  18. 18. Resources● http://mustache.github.com● http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mus tache-js● http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-th e-mustache-template-library● https://github.com/dmolsen/Detector/wiki/Templating-with-Detector -&-Mustache-Tutorial 18

×