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
610
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
技術同人誌をMCP Serverにしてみた
74th
0
270
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
190
ReadMoreTextView
fornewid
1
460
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
300
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
230
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
330
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Writing Fast Ruby
sferik
628
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Thoughts on Productivity
jonyablonski
69
4.7k
Facilitating Awesome Meetings
lara
54
6.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Side Projects
sachag
455
42k
GitHub's CSS Performance
jonrohan
1031
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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