I'm Afraid of JavaScript

Transcript

1. I’M AFRAID OF JAVASCRIPT
2. AHOY FRIEND!
3. @searls
4. every developer FEAR shares a secret
5. ...my code sucks? WHAT IF
6. BUT WE COPE POORLY
7. stupid things we do: we pair less often we share less often we change less often
8. we defer too often stupid things we do: we defend too often we deflect too often
10. say it with me: “My Code Sucks”
11. say it with me: “My Code Sucks” sometimes
12. say it with me: “My Code Sucks” maybe
13. say it with me: “My Code Sucks” if you say so
14. SO FIGHT THE FEAR
15. and fail PROUDLY
16. JavaScript! as we talk
17. just throw away classes & interfaces strong typing most keywords ORACLE (or MS) JAVASCRIPT IS BASICALLY JAVA (OR C#)
18. JAVASCRIPT IS BASICALLY JAVA (OR C#) and then add 1st class functions object literals tons of gotchas healthy open source libs
19. CoffeeScript! as we talk
20. just throw away mixins & modules method_missing def and end easy debugging COFFEESCRIPT IS BASICALLY RUBY (OR PYTHON)
21. and then add list comprehension object literals existential operator huge install base COFFEESCRIPT IS BASICALLY RUBY (OR PYTHON)
22. YOUR PAIR
23. YOUR PAIR GRABS A CARD
24. 
    
    
    
      
    
      
       
     
    
     
    
    
    
25. so you say, “let’s use JavaScript!”
26. but your pair’s all like
28. she says, “Start with the simplest thing that could possibly work!”
29. !== simplest easiest
30. !== simplest most familiar
31. !== simplest calling a server to sort an array & render HTML for you
36. so simple!‚
37. WHAT GOOD ARE YOUR SERVERS?
38. security persisting data analytics model behavior HTML templating routing users proxying UI events things servers are great at
39. security persisting data analytics proxying things servers are great at
40. model behavior HTML templating routing users UI events it’s simpler when the client handles
42. DON’T PANIC
43. YOU’VE GOT THIS
44. model behavior HTML templating routing users UI events
45. jasmine
46. describe()
47. it()
48. expect().toBe()
49. expect().not.toBe()
50. beforeEach()
54. run it yourself! http://is.gd/logic1 describe('CallList', function() { });
55. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { }); });
56. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { context("moving up C", function() { }); }); });
57. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { context("moving up C", function() { it("places it above B", function() { }); }); }); });
58. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { it("places it above B", function() { }); }); }); });
59. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { beforeEach(function() { subject.moveUp('C'); }); it("places it above B", function() { }); }); }); });
60. run it yourself! http://is.gd/logic1 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() { beforeEach(function() { subject.moveUp('C'); }); it("places it above B", function() { expect(subject.get('items')).toEqual(['A','C','B']); }); }); }); });
61. run it yourself! http://is.gd/logic1
62. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ });
63. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ moveUp: function(item) { } });
64. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ moveUp: function(item) { this.set({items: ['A','C','B']}); } });
65. run it yourself! http://is.gd/logic1
66. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { }); }); });
67. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { it("places B above A", function() { }); }); }); });
68. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { beforeEach(function() { subject.moveUp('B'); }); it("places B above A", function() { }); }); }); });
69. run it yourself! http://is.gd/logic2 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() { beforeEach(function() { subject.moveUp('B'); }); it("places B above A", function() { expect(subject.get('items')).toEqual(['B','A','C']); }); }); }); });
70. run it yourself! http://is.gd/logic2
71. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); } });
72. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); var index = _(items).indexOf(item) - 1; } });
73. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); var index = _(items).indexOf(item) - 1; items.splice(index,2,item,items[index]); } });
74. run it yourself! http://is.gd/logic2
75. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { }); }); });
76. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { it("leaves the items as they were", function() { }); }); }); });
77. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { beforeEach(function() { subject.moveUp('A'); }); it("leaves the items as they were", function() { }); }); }); });
78. run it yourself! http://is.gd/logic3 describe('CallList', function() { var subject; beforeEach(function() { subject = new CallList({items: ['A','B','C']}); }); describe("#moveUp", function() { context("moving up C", function() {...}); context("moving up B", function() {...}); context("moving up A", function() { beforeEach(function() { subject.moveUp('A'); }); it("leaves the items as they were", function() { expect(subject.get('items')).toEqual(['A','B','C']); }); }); }); });
79. run it yourself! http://is.gd/logic3
80. run it yourself! http://is.gd/logic3
81. run it yourself! http://is.gd/logic3 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); var index = _(items).indexOf(item) - 1; items.splice(index,2,item,items[index]); } });
82. run it yourself! http://is.gd/logic3 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); var index = _(items).indexOf(item) - 1; if(index >= 0) { items.splice(index,2,item,items[index]); } } });
83. run it yourself! http://is.gd/logic3
84. model behavior HTML templating routing users UI events
85. backbone
86. view model 00 00 UI Event Occurs! “click .move-up”
87. view model 00 00 this.model.moveUp(‘C’)
88. view model 00 00 this.set({ items:[‘A’,’C’,’B’] });
89. view model 00 00 Model Event Fired! “change:items”
90. view model 00 00 change:items bound! this.render()
91. view model 00 00 01
92. and now you know backbone!
93. run it yourself! http://is.gd/view1 describe "CallListView", ->
94. HOLD THE ☎
95. CoffeeScript
96. function(){}
97. ->
98. () {} ;
99. optional
100. this.foo
101. @foo
102. employee.group.department.company.yuck
103. employee.group.department.company.yuck TypeError: 'undefined' is not an object
104. ?. enter the existential operator
105. employee?.group?.department?.company?.yuck
106. employee?.group?.department?.company?.yuck now, merely “undefined”
107. employee?.group?.department?.company?.yuck now, merely “undefined” It’s Demeter-tastic!
108. run it yourself! http://is.gd/view1 describe "CallListView", -> describe "events", ->
109. run it yourself! http://is.gd/view1 describe "CallListView", -> describe "events", -> it "binds to up-arrow clicks", ->
110. run it yourself! http://is.gd/view1 describe "CallListView", -> beforeEach -> @subject = new CallListView describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp'
111. run it yourself! http://is.gd/view1
112. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View
113. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp"
114. run it yourself! http://is.gd/view1
115. run it yourself! http://is.gd/view1
116. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" moveUp: ->
117. run it yourself! http://is.gd/view1
118. jasmine spies
119. spyOn(object,‘method’)
120. spyOn(object,‘method’) jasmine.createSpy(‘method’)
121. spyOn(object,‘method’) jasmine.createSpy(‘method’) jasmine.createSpyObj(‘Name’,[‘method1’,‘method2’])
122. stubbing
123. spyOn(panda,‘isHappy’)
124. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true)
125. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true) panda.isHappy()
126. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true) panda.isHappy() returns true
127. verifying
128. spyOn(panda,‘feed’)
129. spyOn(panda,‘feed’) panda.feed()
130. spyOn(panda,‘feed’) expect(panda.feed).toHaveBeenCalled() panda.feed()
131. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @subject = new CallListView describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> it "tells the model to move up the arrow's text", ->
132. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> it "tells the model to move up the arrow's text", ->
133. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') it "tells the model to move up the arrow's text", ->
134. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') it "tells the model to move up the arrow's text", -> jasmine-fixture https://github.com/searls/jasmine-fixture
135. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') @subject.moveUp target: $upArrow[0] it "tells the model to move up the arrow's text", ->
136. run it yourself! http://is.gd/view2 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> it "binds to up-arrow clicks", -> expect(@subject.events).toEqual "click .up-arrow": 'moveUp' describe "#moveUp", -> beforeEach -> $upArrow = $(@subject.el).inject('up-arrow').text('C') @subject.moveUp target: $upArrow[0] it "tells the model to move up the arrow's text", -> expect(@model.moveUp).toHaveBeenCalledWith 'C'
137. run it yourself! http://is.gd/view2
138. run it yourself! http://is.gd/view2 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" moveUp: (e) -> @model.moveUp $(e.target).text()
139. run it yourself! http://is.gd/view2
140. HTML templating model behavior routing users UI events
141. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", ->
142. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
143. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar') jasmine-jquery https://github.com/velesin/jasmine-jquery
144. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
145. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> @model = jasmine.createSpyObj('CallList',['bind','moveUp','toJSON']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @model.toJSON.andReturn foo: "bar" @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
146. run it yourself! http://is.gd/template1 describe "CallListView", -> beforeEach -> $template = inject('<script id="call-list-template" type="text/html"></script>') $template.html('HTML <b>for</b> <%= foo %>') @model = jasmine.createSpyObj('CallList',['bind','moveUp','toJSON']) @subject = new CallListView model: @model describe "events", -> ... describe "#moveUp", -> ... describe "#render", -> beforeEach -> @model.toJSON.andReturn foo: "bar" @subject.render() it "renders the template with the model's JSON", -> expect($(@subject.el)).toHaveHtml('HTML <b>for</b> bar')
147. run it yourself! http://is.gd/template1
148. run it yourself! http://is.gd/template1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" initialize: -> @template = _.template($('#call-list-template').html()) moveUp: (e) -> @model.moveUp $(e.target).text()
149. run it yourself! http://is.gd/template1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" initialize: -> @template = _.template($('#call-list-template').html()) moveUp: (e) -> @model.moveUp $(e.target).text() render: -> $(@el).html(@template(@model.toJSON()))
150. run it yourself! http://is.gd/template1
151. routing users HTML templating model behavior UI events
152. router
153. class AppRouter extends Backbone.Router routes: “call-list”: “callList” callList: -> new CallListView(model: new CallList).render()
154. $ -> window.router = new AppRouter(); Backbone.history.start();
155. $ -> window.router = new AppRouter(); Backbone.history.start(); http://yourapp.dev/#call-list
156. $ -> window.router = new AppRouter(); Backbone.history.start(); http://yourapp.dev/#call-list router.navigate('call-list',true)
157. phew.
158. PARTING GIFTS!
159. jasmine helpers jQuery Spec’n https://github.com/velesin/jasmine-jquery HTML Inject’n https://github.com/searls/jasmine-fixture Conditional Stub’n https://github.com/searls/jasmine-stealth Given-When-Then’n https://github.com/searls/jasmine-given
160. code helpers Underscore.js http://documentcloud.github.com/underscore extend.js https://github.com/searls/extend.js Date.js http://www.datejs.com Underscore.string http://epeli.github.com/underscore.string/
161. Runner/CI Helpers jasmine-headless-webkit http://johnbintz.github.com/jasmine-headless-webkit/ jasmine-maven-plugin http://searls.github.com/jasmine-maven-plugin/ jasmine-gem https://github.com/pivotal/jasmine-gem jasmine-rails https://github.com/searls/jasmine-rails
162. github.com/searls +I’ll help!
163. @searls +I’ll help!
164. searls@gmail.com +I’ll help!
165. •g l e e * for the color scheme •clafouti for the despair statue •SteveFE for the pouting girl •ifollowtherabbit for another color scheme •mokra for the jaw-dropped baby •Epicality for the third color scheme credits