Upgrade to Pro — share decks privately, control downloads, hide ads and more …


440d092ddf3e2c8e0c8c18eb12b36a0d?s=47 sayrer
February 01, 2012


Twitter Open Source Summit
January, 31, 2012



February 01, 2012


  1. Hogan.js Twitter Open Source Summit January 31, 2012

  2. @sayrer

  3. Agenda

  4. What is Mustache? {{#showform}} <form> <label>Label</label> {{{some_markup}}} <label class="checkbox"> <input

    type="checkbox"> {{#i18n}}Check me out{{/i18n}} </label> <button class="{{class}}">Submit</button> </form> {{/showform}}
  5. Why Mustache? •Similar to HTML, easy to edit •Mock data

    as JSON files •Programmers not required
  6. Designer

  7. Language Support •Mustache.rb •Mustache.java •Mustache.js...

  8. Problems •Performance •Runtime compilation •Forked

  9. Choices •Work on Mustache.js •Dust.js •Handlebars.js •or...

  10. Hogan.js •Compile on the server •Parser API •Performance

  11. At Runtime var s = "some {{example}} text"; var template

    = Hogan.compile(s); template.render({example: "foo"}); "some foo text"
  12. Compiled var s = "some {{example}} text"; var template =

    Hogan.compile(s); function(c,p,i){ var _ = this; _.b(i=i||""); _.b("some "); _.b(_.v(_.f("example",c,p,0))); _.b(" text"); return _.fl(); } "some foo text"
  13. IE7 Performance

  14. with iPhone 5

  15. with Firefox 3.6

  16. with Chrome 17

  17. Uses at Twitter •Tweet embedding •Bootstrap build process •and soon,

  18. twitter.github.com/hogan.js Find us online: twitter.com/sayrer twitter.com/fat github.com/twitter/hogan.js Thanks!