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
2025新卒研修・Webアプリケーションセキュリティ #弁護士ドットコム
bengo4com
3
9.6k
オブザーバビリティ文化を組織に浸透させるには / install observability culture
mackerelio
0
350
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7.2k
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
350
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
9
490
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
330
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
0
830
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
20k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Become a Pro
speakerdeck
PRO
29
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Practical Orchestrator
shlominoach
190
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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