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
入門 バックアップ
ryuichi1208
18
6.5k
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
490
[JAWS-UG GameTech] 第6回 各種事例紹介_18TRIPにおけるAWSサービスを活用した負荷テスト・障害テスト
naoto_yasuda
0
140
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
290
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
250
業務ヒアリングと知識の呪い
tamai_63
0
250
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
200
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
3
680
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
150
UE5の雑多なテク
ryuichikawano
0
350
Product Utilization of Large Language Models Starting Today
ymatsuwitter
3
1.3k
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
290
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
What's in a price? How to price your products and services
michaelherold
243
11k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Six Lessons from altMBA
skipperchong
26
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Facilitating Awesome Meetings
lara
49
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Designing Experiences People Love
moore
138
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
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