Lumbar Support - Speaker Deck

Slide 1

Slide 1 text

LUMBAR SUPPORT Brad Dunbar Thursday, May 31, 12

Slide 2

Slide 2 text

Thursday, May 31, 12

Slide 3

Slide 3 text

Thursday, May 31, 12

Slide 4

Slide 4 text

NEW STUFF Thursday, May 31, 12

Slide 5

Slide 5 text

$ AND AJAX Thursday, May 31, 12

Slide 6

Slide 6 text

$ AND AJAX Backbone.$ = qwery Thursday, May 31, 12

Slide 7

Slide 7 text

$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Thursday, May 31, 12

Slide 8

Slide 8 text

$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._ = wnderscore Thursday, May 31, 12

Slide 9

Slide 9 text

$ AND AJAX Backbone.$ = qwery Backbone.ajax = reqwest Backbone._ = wnderscore ridicwlows Thursday, May 31, 12

Slide 10

Slide 10 text

$EL $(this.el) this.$el this.setElement(...) Thursday, May 31, 12

Slide 11

Slide 11 text

WAIT model.save(..., {wait: true}) Thursday, May 31, 12

Slide 12

Slide 12 text

SPACE SEPARATED EVENTS collection.on(‘add remove reset’, ...) model.trigger(‘stuff nonsense’, ...) view.model.off(‘foo bar’, ...) Thursday, May 31, 12

Slide 13

Slide 13 text

OFF this.model.off(null, null, this) Thursday, May 31, 12

Slide 14

Slide 14 text

CHANGE TRACKING model.changed “change:attr” (Even with silent!) nested changes Thursday, May 31, 12

Slide 15

Slide 15 text

_.TEMPLATE Thursday, May 31, 12

Slide 16

Slide 16 text

_.TEMPLATE Debugging Thursday, May 31, 12

Slide 17

Slide 17 text

_.TEMPLATE Debugging Stack Traces with Line Numbers Thursday, May 31, 12

Slide 18

Slide 18 text

_.TEMPLATE Debugging Stack Traces with Line Numbers Speed Thursday, May 31, 12

Slide 19

Slide 19 text

LITTLE THINGS Thursday, May 31, 12

Slide 20

Slide 20 text

DOS AND DON’TS Thursday, May 31, 12

Slide 21

Slide 21 text

DON’T REFERENCE ELEMENTS BY CLASS this.$(‘.dropdown’); Thursday, May 31, 12

Slide 22

Slide 22 text

DO USE DATA ATTRIBUTES this.$(‘[data-dropdown]’) Thursday, May 31, 12

Slide 23

Slide 23 text

DON’T REPLACE ELEMENTS

view = new View() this.$(‘p’).replaceWith(view.el) Thursday, May 31, 12

Slide 24

Slide 24 text

DO USE EXISTING DOM ELEMENTS

new View({el: this.$(‘p’)}) Thursday, May 31, 12

Slide 25

Slide 25 text

DON’T SPECIFY TAGNAME Backbone.View.extend({ tagName: ‘p’ }) Thursday, May 31, 12

Slide 26

Slide 26 text

DON’T REUSE VIEWS new MyView({el: this.$(‘...’)}) Thursday, May 31, 12

Slide 27

Slide 27 text

DO REUSE DOM ELEMENTS (SAFELY) view.setElement(...) Thursday, May 31, 12

Slide 28

Slide 28 text

DO BE CAREFUL WITH INNERHTML var p = document.createElement(‘p’) p.innerHTML = ‘\o/’ var b = p.childNodes[0] p.innerHTML = ‘’ console.log(b.innerHTML) Thursday, May 31, 12

Slide 29

Slide 29 text

DON’T _.BINDALL _.bindAll(this) Thursday, May 31, 12

Slide 30

Slide 30 text

DO USE EVENT CONTEXTS model.on(‘change’, this.change, this) Thursday, May 31, 12

Slide 31

Slide 31 text

DO DESTROY VIEWS Thursday, May 31, 12

Slide 32

Slide 32 text

DO DESTROY VIEWS this.model.off(null, null, this) Thursday, May 31, 12

Slide 33

Slide 33 text

DO DESTROY VIEWS this.model.off(null, null, this) this.collection.off(null, null, this) Thursday, May 31, 12

Slide 34

Slide 34 text

DO WRAP ROUTER#ROUTE Authorization Clean Up Old Views Thursday, May 31, 12

Slide 35

Slide 35 text

KEEP ROUTE HANDLERS SIMPLE Fetch Data Create Views Clean Up Old Views Thursday, May 31, 12

Slide 36

Slide 36 text

DO WRAP BACKBONE.SYNC Backbone.sync = function(...) { ... }; Thursday, May 31, 12

Slide 37

Slide 37 text

DON’T PREVENT CONSISTENT EVENTS model.on(‘change:attr’, function(){ ... }) Thursday, May 31, 12

Slide 38

Slide 38 text

DO USE CUSTOM OPTIONS model.set({key: ‘value’}, {stuff: ‘nonsense’}) Thursday, May 31, 12

Slide 39

Slide 39 text

DON’T USE MUTABLE ATTRIBUTES model.set({created_at: new Date()}) moment(model.get(‘created_at’)).add(...) Thursday, May 31, 12

Slide 40

Slide 40 text

DO FIRE CUSTOM DOM EVENTS this.$el.trigger(‘dropdown:hide’) Thursday, May 31, 12

Slide 41

Slide 41 text

DO WHITELIST _.pick(this.attributes, ‘only’, ‘relevant’, ‘attributes’) _.extend(this, _.pick(options, ‘speciﬁc’, ‘options’)) Thursday, May 31, 12

Slide 42

Slide 42 text

Thursday, May 31, 12

Slide 43

Slide 43 text

Track Unique Models Thursday, May 31, 12

Slide 44

Slide 44 text

Track Unique Models Maintain Model Relationships Thursday, May 31, 12

Slide 45

Slide 45 text

Track Unique Models Maintain Model Relationships pathable.github.com/supermodel Thursday, May 31, 12

Slide 46

Slide 46 text

ZOMBIE MODELS Create New Model Create the Same Model State Doesn’t Match! Thursday, May 31, 12

Slide 47

Slide 47 text

NEEDED INFORMATION var post = new Post({id: 1}) var comment = new Comment({id: 2, post_id: 1}) Thursday, May 31, 12

Slide 48

Slide 48 text

PARSING BOILERPLATE this.author = new User(resp.author) delete resp.author this.comments = new Comments(resp.comments) delete resp.comments Thursday, May 31, 12

Slide 49

Slide 49 text

LAZY LOADING user.groups() group.users() Thursday, May 31, 12

Slide 50

Slide 50 text

HTML SEMANTICS AND FRONT END ARCHITECTURE Nicolas Gallagher Thursday, May 31, 12

Slide 51

Slide 51 text

Testable (Isolated) Views HTML Interface Render/Cleanup Conventions Thursday, May 31, 12

Slide 52

Slide 52 text

THANKS! @braddunbar Thursday, May 31, 12