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
320
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
120
I2C basics with Arduino
mulderp
0
210
Sharing hardware with JavaScript
mulderp
1
190
Arduino October meetup
mulderp
0
110
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
850
Minimum Viable Interactions
mulderp
3
570
Arduino July Meetup
mulderp
0
93
Other Decks in Programming
See All in Programming
A New Era of Testing
mannodermaus
2
520
実践!難読化ガイド
mitchan
0
220
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
140
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
はじめてみよう量子プログラミング
itokoichi01
0
220
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
840
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
280
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Building Your Own Lightsaber
phodgson
101
6k
The Invisible Side of Design
smashingmag
296
50k
What the flash - Photography Introduction
edds
67
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Become a Pro
speakerdeck
PRO
22
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
We Have a Design System, Now What?
morganepeng
48
7.1k
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