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


February 01, 2012


Twitter Open Source Summit
January, 31, 2012


February 01, 2012

Other Decks in Technology


  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!