Tweet
Tweet

Slide 1

Slide 1 text

Hogan.js Twitter Open Source Summit January 31, 2012

Slide 2

Slide 2 text

@sayrer

Slide 3

Slide 3 text

Agenda

Slide 4

Slide 4 text

What is Mustache? {{#showform}} Label {{{some_markup}}} {{#i18n}}Check me out{{/i18n}} Submit {{/showform}}

Slide 5

Slide 5 text

Why Mustache? •Similar to HTML, easy to edit •Mock data as JSON files •Programmers not required

Slide 6

Slide 6 text

Designer

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Problems •Performance •Runtime compilation •Forked

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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"

Slide 13

Slide 13 text

IE7 Performance

Slide 14

Slide 14 text

with iPhone 5

Slide 15

Slide 15 text

with Firefox 3.6

Slide 16

Slide 16 text

with Chrome 17

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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