Templating with your {{mustache}} (js)                      Fronteers Jam Session - Oct, 5th 2011
Who  And BEEEER
Rendering
Rendering
Rendering
RenderingExpensive!
RenderingExpensive!
RenderingExpensive!     Hard!
RenderingExpensive!     Hard!
Rendering        Expensive!             Hard!Front
Rendering           Expensive!                Hard!Front   Back
{{mustache}}                                   whatMade by         Used by                          etc...Logic-lessFramew...
{{mustache}}                                                       what   Implementations for Javascript,Ruby, Python, PHP...
{{mustache}}                                                       what   Implementations for Javascript,Ruby, Python, PHP...
{{mustache}}                                                            how                 Simple! Really? Yes!var user =...
{{mustache}}                                                               how                                            ...
{{mustache}}               how  wait...
{{mustache}}               how  wait...
{{mustache}}                        how      wait......is it THAT simple?
{{mustache}}                                           how              wait...  ...is it THAT simple?Mustache.to_html(tem...
{{mustache}}                                                          how              wait...  ...is it THAT simple?Musta...
{{mustache}}Fast! Really? Yes! Js is fast! data taken from “Mustache in the Front, Mustache in the Back” talk         by P...
{{mustache}}                  Fast! Really? Yes! Js is fast!Rendering time                 HAML             ERB           ...
{{mustache}}                  Fast! Really? Yes! Js is fast!Rendering time                 HAML             ERB           ...
{{mustache}}                  Fast! Really? Yes! Js is fast!Rendering time                 HAML             ERB           ...
Referenceshttps://github.com/janl/mustache.jshttps://github.com/stecb/mustachejs-examples
THANKS@stecb
Upcoming SlideShare
Loading in …5
×

Templating with your {{mustache}}js

107,899 views

Published on

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.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
107,899
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
72
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Templating with your {{mustache}}js

    1. Templating with your {{mustache}} (js) Fronteers Jam Session - Oct, 5th 2011
    2. Who And BEEEER
    3. Rendering
    4. Rendering
    5. Rendering
    6. RenderingExpensive!
    7. RenderingExpensive!
    8. RenderingExpensive! Hard!
    9. RenderingExpensive! Hard!
    10. Rendering Expensive! Hard!Front
    11. Rendering Expensive! Hard!Front Back
    12. {{mustache}} whatMade by Used by etc...Logic-lessFramework-agnosticShared 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>” Templatevar 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. Referenceshttps://github.com/janl/mustache.jshttps://github.com/stecb/mustachejs-examples
    27. THANKS@stecb

    ×