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
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
320
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
From here to resilience - a travel guide
ufried
1
160
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
390
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
720
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
140
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.2k
1Q86
kawaguti
PRO
2
180
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Web development in the modern age
philhawksworth
203
10k
Gamification - CAS2011
davidbonilla
77
4.6k
Building Your Own Lightsaber
phodgson
100
5.7k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
We Have a Design System, Now What?
morganepeng
43
6.8k
Making Projects Easy
brettharned
109
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
The Language of Interfaces
destraynor
151
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
82
44k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
What's new in Ruby 2.0
geeforr
338
31k
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!