Hogan.js

Twitter Open Source Summit
January, 31, 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, Twitter.com
18. twitter.github.com/hogan.js Find us online: twitter.com/sayrer twitter.com/fat github.com/twitter/hogan.js Thanks!