Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hogan.js
Search
sayrer
February 01, 2012
Technology
2
1k
Hogan.js
Twitter Open Source Summit
January, 31, 2012
sayrer
February 01, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
480
10分でわかるfreeeのQA
freee
0
230
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
260
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
AWS アーキテクチャクイズ
yuu26
2
700
どう買う?Azure
kuniteru
1
190
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Scaling GitHub
holman
456
140k
A Tale of Four Properties
chriscoyier
150
22k
Transcript
Hogan.js Twitter Open Source Summit January 31, 2012
@sayrer
Agenda
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}}
Why Mustache? •Similar to HTML, easy to edit •Mock data
as JSON files •Programmers not required
Designer
Language Support •Mustache.rb •Mustache.java •Mustache.js...
Problems •Performance •Runtime compilation •Forked
Choices •Work on Mustache.js •Dust.js •Handlebars.js •or...
Hogan.js •Compile on the server •Parser API •Performance
At Runtime var s = "some {{example}} text"; var template
= Hogan.compile(s); template.render({example: "foo"}); "some foo 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"
IE7 Performance
with iPhone 5
with Firefox 3.6
with Chrome 17
Uses at Twitter •Tweet embedding •Bootstrap build process •and soon,
Twitter.com
twitter.github.com/hogan.js Find us online: twitter.com/sayrer twitter.com/fat github.com/twitter/hogan.js Thanks!