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
Backbone and Handlebars
Search
mulderp
March 12, 2014
Programming
3
400
Backbone and Handlebars
A small overview on the MV* pattern with Backbone.js and Handlebars
mulderp
March 12, 2014
Tweet
Share
More Decks by mulderp
See All by mulderp
Node.js for Embedded Systems
mulderp
1
2.8k
Nodebotsday
mulderp
1
130
I2C basics with Arduino
mulderp
0
220
Sharing hardware with JavaScript
mulderp
1
210
Arduino October meetup
mulderp
0
120
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
900
Minimum Viable Interactions
mulderp
3
620
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
290
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
NPOでのDevinの活用
codeforeveryone
0
870
ニーリーにおけるプロダクトエンジニア
nealle
0
890
Goで作る、開発・CI環境
sin392
0
260
Porting a visionOS App to Android XR
akkeylab
0
660
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
980
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Designing for Performance
lara
610
69k
Done Done
chrislema
184
16k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Practical Orchestrator
shlominoach
189
11k
Transcript
Backbone and Handlebars Patrick Mulder @mulpat
library vs� frameworks�
what browsers� do� Coast by opera
pixels and� events� http://dribbble.com/shots/1043933-Listacular-UI?list=show&tag=todo_list
DOM vs� State�
DOM http://www.flickr.com/photos/sifter/245803295/ State http://www.flickr.com/photos/lcisa/4713485911/
Where change� happens�
MV*
basic� idea� http://amix.dk/blog/post/19615 user
Views State Updates Server Sync Changes UI Events DOM Templates
Backbone MV*� Keys Values
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
http://pipefishbook.com/editor/ To be released at github, inspired by Andrei Kashcha
Better� rendering �
Backbone + handlebars
Handlebars� // simple attributes {{title}} // repitition {{#each movies}} <div>{{title}}</div>
{{/each}} // conditionals {{#if currentUser}} <div>{{ privateStuff }}</div> {{/if}} // customHelpers {{#renderStars 5}}
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Thorax�
Getting Started� <script src="./thorax-combined.js"></script> Results in Jquery, Underscore, Backbone, Handlebars
Hint:
CollectionView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}} Also
supports filtering
Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>
model lookup� someEvent: function(ev) { var target = $(ev.currentTarget); var
model = target.model(); // change model ... }
events� var listView = new Thorax.View({ el: "#movies", events: {
collection: { reset: function(ev) { // automatic bound } } } }
subviews� <div class="header"> {{view header}} </div>
itemFilter: function (model) { if (active) { return model.get('genre') ===
active; } else { return true; } } Supports filtering�
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Brewing� matters� http://www.flickr.com/photos/visitflanders/6328705484/
|-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!
|-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
commonjs� � http://www.flickr.com/photos/0lhe/4450998512/
RequireJS�
Bower Yeoman
None
Demo time� http://www.flickr.com/photos/tronixstuff/5268597956/
Data Binding� http://www.flickr.com/photos/johnbostock/3356341586/
Backbone.Stickit�
Let‘s discuss mulderp@github mulpat@twitter thinkingonthinking.com