Slides of the talk I did at fronteers 2011 jam session on Oct 5th 2011. Here I will briefly introduce the mustache template engine and how to use it for front-end templating.

1. Templating with your {{mustache}} (js)
Fronteers Jam Session - Oct, 5th 2011

2. Who
And BEEEER

3. Rendering

4. Rendering

5. Rendering

6. Rendering
Expensive!

7. Rendering
Expensive!

8. Rendering
Expensive!
Hard!

9. Rendering
Expensive!
Hard!

10. Rendering
Expensive!
Hard!
Front

11. Rendering
Expensive!
Hard!
Front Back

12. {{mustache}}
what
Made by Used by
etc...
Logic-less
Framework-agnostic
Shared templates (front/back end)

13. {{mustache}}
what
Implementations for Javascript,
Ruby, Python, PHP, C++, Clojure,
Java, Scala etc...
Simple!
Fast!! Really fast!
...but unfortunately not as fast as a neutrino

14. {{mustache}}
what
Implementations for Javascript,
Ruby, Python, PHP, C++, Clojure,
Java, Scala etc...
Simple!
Fast!! Really fast!
...but unfortunately not as fast as a neutrino

15. {{mustache}}
how
Simple! Really? Yes!
var user = { {{tag}}
first_name : “David”,
Object
last_name : “Gilmour”
}
var tpl = “<p>Hello, {{first_name}} {{last_name}}!</p>” Template
var html = Mustache.to_html(tpl, user); the magiccc
“<p>Hello, David Gilmour!</p>”

16. {{mustache}}
how
{{#inStock}}
inStock : function(){ /*...*/ return true; } ..render if true
{{/inStock}}
{{#guitars}}
guitars : [“ibanez”, “music man”, “gibson”] {{.}}
{{/guitars}}
guitars : [{ name : “music man jpx”, strings:7}, ...]
{{#guitars}}
{{name}} {{strings}}
{{^guitars}} {{/guitars}}
guitars : [] exactly! No guitars!
{{/guitars}}
to_unescape : “Me&You” {{{to_unescape}}}

17. {{mustache}}
how
wait...

18. {{mustache}}
how
wait...

19. {{mustache}}
how
wait...
...is it THAT simple?

20. {{mustache}}
how
wait...
...is it THAT simple?
Mustache.to_html(template, view, partials)

21. {{mustache}}
how
wait...
...is it THAT simple?
Mustache.to_html(template, view, partials)
...let’s take a look at some ‘real life’ examples

22. {{mustache}}
Fast! Really? Yes! Js is fast!
data taken from “Mustache in the Front, Mustache in the Back” talk
by Patrick Ewing - twitter developer - (@hoverbird)

23. {{mustache}}
Fast! Really? Yes! Js is fast!
Rendering time
HAML ERB {{rb}} jQuery tpl {{JS}}
data taken from “Mustache in the Front, Mustache in the Back” talk
by Patrick Ewing - twitter developer - (@hoverbird)

24. {{mustache}}
Fast! Really? Yes! Js is fast!
Rendering time
HAML ERB {{rb}} jQuery tpl {{JS}}
data taken from “Mustache in the Front, Mustache in the Back” talk
by Patrick Ewing - twitter developer - (@hoverbird)

25. {{mustache}}
Fast! Really? Yes! Js is fast!
Rendering time
HAML ERB {{rb}} jQuery tpl {{JS}}
data taken from “Mustache in the Front, Mustache in the Back” talk
by Patrick Ewing - twitter developer - (@hoverbird)

26. References
https://github.com/janl/mustache.js
https://github.com/stecb/mustachejs-examples

27. THANKS
@stecb