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
Autify Company Deck
autifyhq
2
44k
TLSから見るSREの未来
atpons
2
310
本当にわかりやすいAIエージェント入門
segavvy
1
400
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
CDK Vibe Coding Fes
tomoki10
1
630
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
microCMSではじめるAIライティング
himaratsu
0
150
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How GitHub (no longer) Works
holman
314
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
179
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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