Dos and Don'ts for Backbone Applications
LUMBAR SUPPORTBrad DunbarThursday, May 31, 12
View Slide
Thursday, May 31, 12
NEW STUFFThursday, May 31, 12
$ AND AJAXThursday, May 31, 12
$ AND AJAXBackbone.$ = qweryThursday, May 31, 12
$ AND AJAXBackbone.$ = qweryBackbone.ajax = reqwestThursday, May 31, 12
$ AND AJAXBackbone.$ = qweryBackbone.ajax = reqwestBackbone._ = wnderscoreThursday, May 31, 12
$ AND AJAXBackbone.$ = qweryBackbone.ajax = reqwestBackbone._ = wnderscoreridicwlowsThursday, May 31, 12
$EL$(this.el)this.$elthis.setElement(...)Thursday, May 31, 12
WAITmodel.save(..., {wait: true})Thursday, May 31, 12
SPACE SEPARATED EVENTScollection.on(‘add remove reset’, ...)model.trigger(‘stuff nonsense’, ...)view.model.off(‘foo bar’, ...)Thursday, May 31, 12
OFFthis.model.off(null, null, this)Thursday, May 31, 12
CHANGE TRACKINGmodel.changed“change:attr” (Even with silent!)nested changesThursday, May 31, 12
_.TEMPLATEThursday, May 31, 12
_.TEMPLATEDebuggingThursday, May 31, 12
_.TEMPLATEDebuggingStack Traces with Line NumbersThursday, May 31, 12
_.TEMPLATEDebuggingStack Traces with Line NumbersSpeedThursday, May 31, 12
LITTLE THINGSThursday, May 31, 12
DOS AND DON’TSThursday, May 31, 12
DON’T REFERENCE ELEMENTSBY CLASSthis.$(‘.dropdown’);Thursday, May 31, 12
DO USE DATA ATTRIBUTESthis.$(‘[data-dropdown]’)Thursday, May 31, 12
DON’T REPLACE ELEMENTSview = new View()this.$(‘p’).replaceWith(view.el)Thursday, May 31, 12
DO USE EXISTING DOMELEMENTSnew View({el: this.$(‘p’)})Thursday, May 31, 12
DON’T SPECIFY TAGNAMEBackbone.View.extend({ tagName: ‘p’ })Thursday, May 31, 12
DON’T REUSE VIEWSnew MyView({el: this.$(‘...’)})Thursday, May 31, 12
DO REUSE DOM ELEMENTS(SAFELY)view.setElement(...)Thursday, May 31, 12
DO BE CAREFUL WITHINNERHTMLvar p = document.createElement(‘p’)p.innerHTML = ‘\o/’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 CONTEXTSmodel.on(‘change’, this.change, this)Thursday, May 31, 12
DO DESTROY VIEWSThursday, May 31, 12
DO DESTROY VIEWSthis.model.off(null, null, this)Thursday, May 31, 12
DO DESTROY VIEWSthis.model.off(null, null, this)this.collection.off(null, null, this)Thursday, May 31, 12
DO WRAP ROUTER#ROUTEAuthorizationClean Up Old ViewsThursday, May 31, 12
KEEP ROUTE HANDLERSSIMPLEFetch DataCreate ViewsClean Up Old ViewsThursday, May 31, 12
DO WRAP BACKBONE.SYNCBackbone.sync = function(...) { ... };Thursday, May 31, 12
DON’T PREVENTCONSISTENT EVENTSmodel.on(‘change:attr’, function(){ ... })Thursday, May 31, 12
DO USE CUSTOM OPTIONSmodel.set({key: ‘value’}, {stuff: ‘nonsense’})Thursday, May 31, 12
DON’T USE MUTABLEATTRIBUTESmodel.set({created_at: new Date()})moment(model.get(‘created_at’)).add(...)Thursday, May 31, 12
DO FIRE CUSTOM DOMEVENTSthis.$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
Track Unique ModelsThursday, May 31, 12
Track Unique ModelsMaintain Model RelationshipsThursday, May 31, 12
Track Unique ModelsMaintain Model Relationshipspathable.github.com/supermodelThursday, May 31, 12
ZOMBIE MODELSCreate New ModelCreate the Same ModelState Doesn’t Match!Thursday, May 31, 12
NEEDED INFORMATIONvar post = new Post({id: 1})var comment = new Comment({id: 2, post_id: 1})Thursday, May 31, 12
PARSING BOILERPLATEthis.author = new User(resp.author)delete resp.authorthis.comments = new Comments(resp.comments)delete resp.commentsThursday, May 31, 12
LAZY LOADINGuser.groups()group.users()Thursday, May 31, 12
HTML SEMANTICS ANDFRONT END ARCHITECTURENicolas GallagherThursday, May 31, 12
Testable (Isolated) ViewsHTML InterfaceRender/Cleanup ConventionsThursday, May 31, 12
THANKS!@braddunbarThursday, May 31, 12
herumi
eiki
isaoshimizu
elcuervo
line_developers_tw
yokawasa
n1ru4l
igsr5
kazumax55
kazukihayase
riru
mixi_engineers
jnunemaker
myddelton
samanthasiow
hatefulcrawdad
eileencodes
dougneiner
3n
akmur
mclloyd
chriscoyier
keathley
sachag