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
Lumbar Support
Search
braddunbar
May 31, 2012
Technology
10
2.5k
Lumbar Support
Dos and Don'ts for Backbone Applications
braddunbar
May 31, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
製造業の会計システムをDDDで開発した話
caddi_eng
2
600
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
0
100
プラクティスの名前は言わない方がいい / Not to mention the name of the practice
3l4l5
8
3.4k
リポジトリをまるっとAIに食わせるRepomixの話
yamadashy
0
230
Cline を知ると世界が広がった(だが、俺は Claude for Desktop で行く)
nassy20
3
190
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
4
330
心に火を灯すヒントは自分の中にある/The clue to lighting a fire in your heart is within you.
bitkey
1
130
EMの仕事、あるいは顧客価値創出のアーキテクト
radiocat
0
120
RF問の対策をした話
bata_24
0
140
Amazon Bedrock GenUハンズオン座学資料 #1 GenU環境で生成AIを体験してみよう
tsukuboshi
0
240
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.3k
コンテナ上シェル悪用の話とPure Bashでcurlが作れた話
ryotosaito
2
390
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.3k
For a Future-Friendly Web
brad_frost
176
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Thoughts on Productivity
jonyablonski
69
4.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
A Philosophy of Restraint
colly
203
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
306
31k
GitHub's CSS Performance
jonrohan
1030
460k
Bash Introduction
62gerente
611
210k
Transcript
LUMBAR SUPPORT Brad Dunbar Thursday, May 31, 12
Thursday, May 31, 12
Thursday, May 31, 12
NEW STUFF Thursday, May 31, 12
$ AND AJAX Thursday, May 31, 12
$ AND AJAX Backbone.$ = qwery Thursday, May 31, 12
$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Thursday,
May 31, 12
$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._
= wnderscore Thursday, May 31, 12
$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._
= wnderscore ridicwlows Thursday, May 31, 12
$EL $(this.el) this.$el this.setElement(...) Thursday, May 31, 12
WAIT model.save(..., {wait: true}) Thursday, May 31, 12
SPACE SEPARATED EVENTS collection.on(‘add remove reset’, ...) model.trigger(‘stuff nonsense’, ...)
view.model.off(‘foo bar’, ...) Thursday, May 31, 12
OFF this.model.off(null, null, this) Thursday, May 31, 12
CHANGE TRACKING model.changed “change:attr” (Even with silent!) nested changes Thursday,
May 31, 12
_.TEMPLATE Thursday, May 31, 12
_.TEMPLATE Debugging Thursday, May 31, 12
_.TEMPLATE Debugging Stack Traces with Line Numbers Thursday, May 31,
12
_.TEMPLATE Debugging Stack Traces with Line Numbers Speed Thursday, May
31, 12
LITTLE THINGS Thursday, May 31, 12
DOS AND DON’TS Thursday, May 31, 12
DON’T REFERENCE ELEMENTS BY CLASS this.$(‘.dropdown’); Thursday, May 31, 12
DO USE DATA ATTRIBUTES this.$(‘[data-dropdown]’) Thursday, May 31, 12
DON’T REPLACE ELEMENTS <p class=‘awesome’></p> view = new View() this.$(‘p’).replaceWith(view.el)
Thursday, May 31, 12
DO USE EXISTING DOM ELEMENTS <p class=‘awesome’></p> new View({el: this.$(‘p’)})
Thursday, May 31, 12
DON’T SPECIFY TAGNAME Backbone.View.extend({ tagName: ‘p’ }) Thursday, May 31,
12
DON’T REUSE VIEWS new MyView({el: this.$(‘...’)}) Thursday, May 31, 12
DO REUSE DOM ELEMENTS (SAFELY) view.setElement(...) Thursday, May 31, 12
DO BE CAREFUL WITH INNERHTML var p = document.createElement(‘p’) p.innerHTML
= ‘<b>\o/</b>’ var b = p.childNodes[0] p.innerHTML = ‘’ console.log(b.innerHTML) Thursday, May 31, 12
DON’T _.BINDALL _.bindAll(this) Thursday, May 31, 12
DO USE EVENT CONTEXTS model.on(‘change’, this.change, this) Thursday, May 31,
12
DO DESTROY VIEWS Thursday, May 31, 12
DO DESTROY VIEWS this.model.off(null, null, this) Thursday, May 31, 12
DO DESTROY VIEWS this.model.off(null, null, this) this.collection.off(null, null, this) Thursday,
May 31, 12
DO WRAP ROUTER#ROUTE Authorization Clean Up Old Views Thursday, May
31, 12
KEEP ROUTE HANDLERS SIMPLE Fetch Data Create Views Clean Up
Old Views Thursday, May 31, 12
DO WRAP BACKBONE.SYNC Backbone.sync = function(...) { ... }; Thursday,
May 31, 12
DON’T PREVENT CONSISTENT EVENTS model.on(‘change:attr’, function(){ ... }) Thursday, May
31, 12
DO USE CUSTOM OPTIONS model.set({key: ‘value’}, {stuff: ‘nonsense’}) Thursday, May
31, 12
DON’T USE MUTABLE ATTRIBUTES model.set({created_at: new Date()}) moment(model.get(‘created_at’)).add(...) Thursday, May
31, 12
DO FIRE CUSTOM DOM EVENTS this.$el.trigger(‘dropdown:hide’) Thursday, May 31, 12
DO WHITELIST _.pick(this.attributes, ‘only’, ‘relevant’, ‘attributes’) _.extend(this, _.pick(options, ‘specific’, ‘options’))
Thursday, May 31, 12
Thursday, May 31, 12
Track Unique Models Thursday, May 31, 12
Track Unique Models Maintain Model Relationships Thursday, May 31, 12
Track Unique Models Maintain Model Relationships pathable.github.com/supermodel Thursday, May 31,
12
ZOMBIE MODELS Create New Model Create the Same Model State
Doesn’t Match! Thursday, May 31, 12
NEEDED INFORMATION var post = new Post({id: 1}) var comment
= new Comment({id: 2, post_id: 1}) Thursday, May 31, 12
PARSING BOILERPLATE this.author = new User(resp.author) delete resp.author this.comments =
new Comments(resp.comments) delete resp.comments Thursday, May 31, 12
LAZY LOADING user.groups() group.users() Thursday, May 31, 12
HTML SEMANTICS AND FRONT END ARCHITECTURE Nicolas Gallagher Thursday, May
31, 12
Testable (Isolated) Views HTML Interface Render/Cleanup Conventions Thursday, May 31,
12
THANKS! @braddunbar Thursday, May 31, 12