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
1.1k
Hogan.js
Twitter Open Source Summit
January, 31, 2012
sayrer
February 01, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
ChatGPTを使ったブログ執筆と校正の実践テクニック/登壇資料(井田 献一朗)
hacobu
1
160
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
310
GitLab SelfManagedをCodePipelineのソースに設定する/SetGitLabSelfManagedtoCodePipeline
norihiroishiyama
1
120
信頼性を支えるテレメトリーパイプラインの構築 / Building Telemetry Pipeline with OpenTelemetry
ymotongpoo
9
5k
プロダクト開発、インフラ、コーポレート、そしてAIとの共通言語としての Terraform / Terraform as a Common Language for Product Development, Infrastructure, Corporate Engineering, and AI
yuyatakeyama
6
1.6k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
消し忘れリソースゼロへ!私のResource Explorer活用法
cuorain
0
140
生成AIを活用した機能を、顧客に提供するまでに乗り越えた『4つの壁』
toshiblues
1
210
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
private spaceについてあれこれ調べてみた
operando
1
160
Windows Server 2025 へのアップグレードではまった話
tamaiyutaro
2
260
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
130
Featured
See All Featured
Thoughts on Productivity
jonyablonski
68
4.4k
Fireside Chat
paigeccino
34
3.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Music & Morning Musume
bryan
46
6.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
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!