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.6k
Lumbar Support
Dos and Don'ts for Backbone Applications
braddunbar
May 31, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
エンジニア向け技術スタック情報
kauche
1
250
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
300
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
240
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
160
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
250
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A Tale of Four Properties
chriscoyier
160
23k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing for Performance
lara
609
69k
Speed Design
sergeychernyshev
32
1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Being A Developer After 40
akosma
90
590k
Navigating Team Friction
lara
187
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
We Have a Design System, Now What?
morganepeng
53
7.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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