SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
Render your web with

Mustache     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 Framework


  ● Client side - Jquery, YUI, Dojo


  ● Server side – Node.js




                                                4
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
Why use?
Before I tell you why we use templates engine
compare this example ...




                                                6
Data model
{
    "name" : "korkeat",
    "username" : "khasathan",
    "url" : "http://khasathan.in.th"
    "programming" :
      ["Java","PHP","Python"]
}




                                       7
… 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
Without template engine
var 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
… want to say the magic word!!




                                 10
With template engine
var 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
How it works



             compile              output



Data model             template            markup


                                                13
Benefits
● Seperate markup from code (MVC approach)
● Re-use code. DRY (Don't repeat yourself)


● Good for maintain


● Code is pretty <3




                                             14
What else ...
● Javascript
   ● Handlebars


   ● Dust.js


   ● EJS


● PHP


   ● Smarty


    ...
                  15
… and more more more for
many 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://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

Contenu connexe

En vedette (7)

Smartt presentation
Smartt presentationSmartt presentation
Smartt presentation
 
Smarty
SmartySmarty
Smarty
 
How to Use PHP Smarty Template
How to Use PHP Smarty TemplateHow to Use PHP Smarty Template
How to Use PHP Smarty Template
 
PHPTAL with CakePHP
PHPTAL with CakePHPPHPTAL with CakePHP
PHPTAL with CakePHP
 
Smarty Template Engine
Smarty Template EngineSmarty Template Engine
Smarty Template Engine
 
Opsiyonlar
OpsiyonlarOpsiyonlar
Opsiyonlar
 
Smarty
SmartySmarty
Smarty
 

Similaire à Mustache

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausWomen in Technology Poland
 
2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratiehcderaad
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATIONkrutitrivedi
 
Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Matthew Barlocker
 
Optimizing Drupal Performance. Tips and Tricks
Optimizing Drupal Performance. Tips and TricksOptimizing Drupal Performance. Tips and Tricks
Optimizing Drupal Performance. Tips and TricksTimur Kamanin
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPPaul Redmond
 
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...Alessandro Molina
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
 
Ez platform meetup, madrid 21 marzo 2018 english
Ez platform meetup, madrid 21 marzo 2018   englishEz platform meetup, madrid 21 marzo 2018   english
Ez platform meetup, madrid 21 marzo 2018 englishcrevillo
 
Drupal performance and scalability
Drupal performance and scalabilityDrupal performance and scalability
Drupal performance and scalabilityTwinbit
 

Similaire à Mustache (20)

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
 
2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie2014 11 20 Drupal 7 -> 8 test migratie
2014 11 20 Drupal 7 -> 8 test migratie
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
NodeJS
NodeJSNodeJS
NodeJS
 
More about PHP
More about PHPMore about PHP
More about PHP
 
Introduce Django
Introduce DjangoIntroduce Django
Introduce Django
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATION
 
Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1Your First Scala Web Application using Play 2.1
Your First Scala Web Application using Play 2.1
 
Optimizing Drupal Performance. Tips and Tricks
Optimizing Drupal Performance. Tips and TricksOptimizing Drupal Performance. Tips and Tricks
Optimizing Drupal Performance. Tips and Tricks
 
Php
PhpPhp
Php
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Lightweight web frameworks
Lightweight web frameworksLightweight web frameworks
Lightweight web frameworks
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHP
 
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
 
Php
PhpPhp
Php
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
Ez platform meetup, madrid 21 marzo 2018 english
Ez platform meetup, madrid 21 marzo 2018   englishEz platform meetup, madrid 21 marzo 2018   english
Ez platform meetup, madrid 21 marzo 2018 english
 
Dust.js
Dust.jsDust.js
Dust.js
 
Drupal performance and scalability
Drupal performance and scalabilityDrupal performance and scalability
Drupal performance and scalability
 
JavaScripts & jQuery
JavaScripts & jQueryJavaScripts & jQuery
JavaScripts & jQuery
 

Mustache

  • 1. Render your web with Mustache Template engine SWT Tech Share / @khasathan
  • 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. 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. Why use? Before I tell you why we use templates engine compare this example ... 6
  • 7. Data model { "name" : "korkeat", "username" : "khasathan", "url" : "http://khasathan.in.th" "programming" : ["Java","PHP","Python"] } 7
  • 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. Without template engine var 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. … want to say the magic word!! 10
  • 11. With template engine var 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
  • 13. How it works compile output Data model template markup 13
  • 14. Benefits ● Seperate markup from code (MVC approach) ● Re-use code. DRY (Don't repeat yourself) ● Good for maintain ● Code is pretty <3 14
  • 15. What else ... ● Javascript ● Handlebars ● Dust.js ● EJS ● PHP ● Smarty ... 15
  • 16. … and more more more for many languages / platforms 16
  • 17. { Make me happy when coding! 17
  • 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