Lumbar Support

Dos and Don'ts for Backbone Applications

Transcript

1. LUMBAR SUPPORT Brad Dunbar Thursday, May 31, 12
2. Thursday, May 31, 12
3. Thursday, May 31, 12
4. NEW STUFF Thursday, May 31, 12
5. $ AND AJAX Thursday, May 31, 12
6. $ AND AJAX Backbone.$ = qwery Thursday, May 31, 12
7. $ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Thursday, May 31, 12
8. $ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._ = wnderscore Thursday, May 31, 12
9. $ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._ = wnderscore ridicwlows Thursday, May 31, 12
10. $EL $(this.el) this.$el this.setElement(...) Thursday, May 31, 12
11. WAIT model.save(..., {wait: true}) Thursday, May 31, 12
12. SPACE SEPARATED EVENTS collection.on(‘add remove reset’, ...) model.trigger(‘stuff nonsense’, ...) view.model.off(‘foo bar’, ...) Thursday, May 31, 12
13. OFF this.model.off(null, null, this) Thursday, May 31, 12
14. CHANGE TRACKING model.changed “change:attr” (Even with silent!) nested changes Thursday, May 31, 12
15. _.TEMPLATE Thursday, May 31, 12
16. _.TEMPLATE Debugging Thursday, May 31, 12
17. _.TEMPLATE Debugging Stack Traces with Line Numbers Thursday, May 31, 12
18. _.TEMPLATE Debugging Stack Traces with Line Numbers Speed Thursday, May 31, 12
19. LITTLE THINGS Thursday, May 31, 12
20. DOS AND DON’TS Thursday, May 31, 12
21. DON’T REFERENCE ELEMENTS BY CLASS this.$(‘.dropdown’); Thursday, May 31, 12
22. DO USE DATA ATTRIBUTES this.$(‘[data-dropdown]’) Thursday, May 31, 12
23. DON’T REPLACE ELEMENTS <p class=‘awesome’></p> view = new View() this.$(‘p’).replaceWith(view.el) Thursday, May 31, 12
24. DO USE EXISTING DOM ELEMENTS <p class=‘awesome’></p> new View({el: this.$(‘p’)}) Thursday, May 31, 12
25. DON’T SPECIFY TAGNAME Backbone.View.extend({ tagName: ‘p’ }) Thursday, May 31, 12
26. DON’T REUSE VIEWS new MyView({el: this.$(‘...’)}) Thursday, May 31, 12
27. DO REUSE DOM ELEMENTS (SAFELY) view.setElement(...) Thursday, May 31, 12
28. 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
29. DON’T _.BINDALL _.bindAll(this) Thursday, May 31, 12
30. DO USE EVENT CONTEXTS model.on(‘change’, this.change, this) Thursday, May 31, 12
31. DO DESTROY VIEWS Thursday, May 31, 12
32. DO DESTROY VIEWS this.model.off(null, null, this) Thursday, May 31, 12
33. DO DESTROY VIEWS this.model.off(null, null, this) this.collection.off(null, null, this) Thursday, May 31, 12
34. DO WRAP ROUTER#ROUTE Authorization Clean Up Old Views Thursday, May 31, 12
35. KEEP ROUTE HANDLERS SIMPLE Fetch Data Create Views Clean Up Old Views Thursday, May 31, 12
36. DO WRAP BACKBONE.SYNC Backbone.sync = function(...) { ... }; Thursday, May 31, 12
37. DON’T PREVENT CONSISTENT EVENTS model.on(‘change:attr’, function(){ ... }) Thursday, May 31, 12
38. DO USE CUSTOM OPTIONS model.set({key: ‘value’}, {stuff: ‘nonsense’}) Thursday, May 31, 12
39. DON’T USE MUTABLE ATTRIBUTES model.set({created_at: new Date()}) moment(model.get(‘created_at’)).add(...) Thursday, May 31, 12
40. DO FIRE CUSTOM DOM EVENTS this.$el.trigger(‘dropdown:hide’) Thursday, May 31, 12
41. DO WHITELIST _.pick(this.attributes, ‘only’, ‘relevant’, ‘attributes’) _.extend(this, _.pick(options, ‘specific’, ‘options’)) Thursday, May 31, 12
42. Thursday, May 31, 12
43. Track Unique Models Thursday, May 31, 12
44. Track Unique Models Maintain Model Relationships Thursday, May 31, 12
45. Track Unique Models Maintain Model Relationships pathable.github.com/supermodel Thursday, May 31, 12
46. ZOMBIE MODELS Create New Model Create the Same Model State Doesn’t Match! Thursday, May 31, 12
47. NEEDED INFORMATION var post = new Post({id: 1}) var comment = new Comment({id: 2, post_id: 1}) Thursday, May 31, 12
48. PARSING BOILERPLATE this.author = new User(resp.author) delete resp.author this.comments = new Comments(resp.comments) delete resp.comments Thursday, May 31, 12
49. LAZY LOADING user.groups() group.users() Thursday, May 31, 12
50. HTML SEMANTICS AND FRONT END ARCHITECTURE Nicolas Gallagher Thursday, May 31, 12
51. Testable (Isolated) Views HTML Interface Render/Cleanup Conventions Thursday, May 31, 12
52. THANKS! @braddunbar Thursday, May 31, 12