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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
130
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Using AI Tools Around Software Development
inouehi
0
1.2k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
Gleamという選択肢
comamoca
6
740
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
200
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
170
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
Benchmark
sysong
0
230
エンジニア向け採用ピッチ資料
inusan
0
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
190
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Faster Mobile Websites
deanohume
307
31k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bash Introduction
62gerente
614
210k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
How to Ace a Technical Interview
jacobian
277
23k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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