Hogan.js

440d092ddf3e2c8e0c8c18eb12b36a0d?s=47 sayrer
February 01, 2012

 Hogan.js

Twitter Open Source Summit
January, 31, 2012

440d092ddf3e2c8e0c8c18eb12b36a0d?s=128

sayrer

February 01, 2012
Tweet

Transcript

  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,

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