Hogan.js

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!