Render your web withMustache     Template engine       SWT Tech Share / @khasathan
{{{syntax}}  Mustache             2
“The Logic-less templates”                             3
Mustache●Template engine / render engine●Lack of any logic statement like if … else●Compatible with popular Javascript Fra...
Languages/Platforms support ●Ruby          ● Java      ● ActionScript ●Javascript    ● .Net      ● Scala ●Python        ● ...
Why use?Before I tell you why we use templates enginecompare this example ...                                             ...
Data model{    "name" : "korkeat",    "username" : "khasathan",    "url" : "http://khasathan.in.th"    "programming" :    ...
… And we expect result as ...<h1>Profile of korkeat</h1><p>Username: khasathan</p><p>Url: http://khasathan.in.th</p><ul>  ...
Without template enginevar html = ;html += <h1>Profile of  + DATA_MODEL.name + </h1>;html += <p>Username: + DATA_MODEL.use...
… want to say the magic word!!                                 10
With template enginevar tmpl =     <h1>Profile of {{name}}</h1>    <p>Username: {{username}}</p>    <p>Url: {{url}}</p>   ...
12
How it works             compile              outputData model             template            markup                     ...
Benefits● Seperate markup from code (MVC approach)● Re-use code. DRY (Dont repeat yourself)● Good for maintain● Code is pr...
What else ...● Javascript   ● Handlebars   ● Dust.js   ● EJS● PHP   ● Smarty    ...                  15
… and more more more formany languages / platforms                             16
{Make me happy when coding!                             17
Resources● http://mustache.github.com● http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mus  tache-js● http:...
Upcoming SlideShare
Loading in...5
×

Mustache

1,581

Published on

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

No Downloads
Views
Total Views
1,581
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×