Cincinnati JS on 12/14/2011

This talk is a mash-up talk of "I'm afraid of JavaScript" and "Jasmine Enhancers".
Want JavaScript help or training? Contact us at http://test-double.com

Transcript

1. I'm afraid! of JavaScript
2. Ahoy! new friend
3. @searls
4. http://test-double.com
5. every developer FEAR shares a secret
6. ...my code sucks? WHAT IF
7. AND WE COPE POORLY
8. stupid things we do: we pair less often we share less often we change less 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. as we talk! about JavaScript
17. STAGE 1
18. model STAGE 2
19. model view STAGE 2
20. model view dumping ground STAGE 2
21. STAGE 3
22. STAGE 3
23. STAGE 3
24. STAGE 3
25. STAGE 3
26. YOUR PAIR
27. YOUR PAIR GRABS A CARD
28. 
    
    
    
      
    
      
       
     
    
     
    
    
    
29. so you say, “let’s use JavaScript!”
30. but your pair’s all like
32. she says, “Start with the simplest thing that could possibly work!”
33. !== simplest
34. !== simplest easiest
35. !== simplest
36. !== simplest most familiar
37. !== simplest
38. !== simplest calling a server to sort an array & render HTML for you
43. so simple!‚
44. WHAT GOOD ARE YOUR SERVERS?
45. security persisting data analytics model behavior HTML templating routing users proxying UI events things servers are great at
46. security persisting data analytics proxying things servers are great at
47. model behavior HTML templating routing users UI events but it’s simpler when the client handles
49. DON’T PANIC
50. YOU’VE GOT THIS
51. model behavior HTML templating routing users UI events
52. model behavior HTML templating routing users UI events
53. jasmine
54. describe()
55. it()
56. expect().toBe()
57. expect().not.toBe()
58. beforeEach()
62. run it yourself! http://is.gd/logic1 describe('CallList', function() { });
63. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { }); });
64. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { context("moving up C", function() { }); }); });
65. run it yourself! http://is.gd/logic1 describe('CallList', function() { describe("#moveUp", function() { context("moving up C", function() { it("places it above B", function() { }); }); }); });
66. 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() { }); }); }); });
67. 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() { }); }); }); });
68. 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']); }); }); }); });
69. run it yourself! http://is.gd/logic1
70. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ });
71. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ moveUp: function(item) { } });
72. run it yourself! http://is.gd/logic1 window.CallList = Backbone.Model.extend({ moveUp: function(item) { this.set({items: ['A','C','B']}); } });
73. run it yourself! http://is.gd/logic1
74. 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() { }); }); });
75. 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() { }); }); }); });
76. 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() { }); }); }); });
77. 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']); }); }); }); });
78. run it yourself! http://is.gd/logic2
79. run it yourself! http://is.gd/logic2 window.CallList = Backbone.Model.extend({ moveUp: function(item) { var items = this.get('items'); } });
80. 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; } });
81. 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]); } });
82. run it yourself! http://is.gd/logic2
83. 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() { }); }); });
84. 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() { }); }); }); });
85. 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() { }); }); }); });
86. 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']); }); }); }); });
87. run it yourself! http://is.gd/logic3
88. run it yourself! http://is.gd/logic3
89. 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]); } });
90. 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]); } } });
91. run it yourself! http://is.gd/logic3
92. model behavior HTML templating routing users UI events
93. model behavior HTML templating routing users UI events
94. backbone
95. view model 00 00
96. view model 00 00 UI Event Occurs! “click .move-up”
97. view model 00 00 this.model.moveUp(‘C’)
98. view model 00 00 this.set({ items:[‘A’,’C’,’B’] });
99. view model 00 00 Model Event Fired! “change:items”
100. view model 00 00 change:items bound! this.render()
101. view model 00 00
102. view model 00 00 01
103. and now you know backbone!
104. run it yourself! http://is.gd/view1 describe "CallListView", ->
105. HOLD THE ☎
106. CoffeeScript
107. function(){}
109. ->
110. () {} ;
112. optional
113. this.foo
115. @foo
116. employee.group.department.company.yuck
117. employee.group.department.company.yuck TypeError: 'undefined' is not an object
118. employee.group.department.company.yuck
119. ?. enter the existential operator
120. employee?.group?.department?.company?.yuck
121. employee?.group?.department?.company?.yuck now, merely “undefined”
122. employee?.group?.department?.company?.yuck now, merely “undefined” It’s Demeter-tastic!
123. run it yourself! http://is.gd/view1 describe "CallListView", -> describe "events", ->
124. run it yourself! http://is.gd/view1 describe "CallListView", -> describe "events", -> it "binds to up-arrow clicks", ->
125. 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'
126. run it yourself! http://is.gd/view1
127. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View
128. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp"
129. run it yourself! http://is.gd/view1
130. run it yourself! http://is.gd/view1
131. run it yourself! http://is.gd/view1 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" moveUp: ->
132. run it yourself! http://is.gd/view1
133. jasmine spies
134. spyOn(object,‘method’)
135. spyOn(object,‘method’) jasmine.createSpy(‘method’)
136. spyOn(object,‘method’) jasmine.createSpy(‘method’) jasmine.createSpyObj(‘Name’,[‘method1’,‘method2’])
137. stubbing
138. spyOn(panda,‘isHappy’)
139. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true)
140. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true) panda.isHappy()
141. spyOn(panda,‘isHappy’) panda.isHappy.andReturn(true) panda.isHappy() returns true
142. verifying
143. spyOn(panda,‘feed’)
144. spyOn(panda,‘feed’) panda.feed()
145. spyOn(panda,‘feed’) expect(panda.feed).toHaveBeenCalled() panda.feed()
146. 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", ->
147. 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", ->
148. 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", ->
149. 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
150. 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", ->
151. 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'
152. run it yourself! http://is.gd/view2
153. run it yourself! http://is.gd/view2 class CallListView extends Backbone.View events: "click .up-arrow": "moveUp" moveUp: (e) -> @model.moveUp $(e.target).text()
154. run it yourself! http://is.gd/view2
155. HTML templating model behavior routing users UI events
156. HTML templating model behavior routing users UI events
157. 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", ->
158. 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')
159. 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
160. 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')
161. 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')
162. 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')
163. run it yourself! http://is.gd/template1
164. 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()
165. 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()))
166. run it yourself! http://is.gd/template1
167. routing users HTML templating model behavior UI events
168. routing users HTML templating model behavior UI events
169. router
170. class AppRouter extends Backbone.Router routes: “call-list”: “callList” callList: -> new CallListView(model: new CallList).render()
171. $ -> window.router = new AppRouter(); Backbone.history.start();
172. $ -> window.router = new AppRouter(); Backbone.history.start(); http://yourapp.dev/#call-list
173. $ -> window.router = new AppRouter(); Backbone.history.start(); http://yourapp.dev/#call-list router.navigate('call-list',true)
174. phew.
175. jasmine enhancers
176. jasmine-given https://github.com/searls/jasmine-given
177. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’)
178. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given
179. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given When
180. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given When Then
181. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() Given When Then
182. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() When -> @result = @subject.press() Given When Then
183. beforeEach -> @subject = new Button() @result = @subject.press() it “goes ‘ohhh yeah’” expect(@result).toBe(‘ohhh yeah’) Given -> @subject = new Button() When -> @result = @subject.press() Then -> @result == “ohhh yeah” Given When Then
185. When -> @config = createConfig()
186. When -> @config = createConfig() Then -> @config.url == "http://moore.chris"
187. When -> @config = createConfig() Then -> @config.url == "http://moore.chris" Then -> @config.name == "Peter Kananen"
188. When -> @config = createConfig() Then -> @config.url == "http://moore.chris" Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens"
189. When -> @config = createConfig() Then -> @config.url == "http://moore.chris" Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens" Then -> @config.bestDnDFriend == "James Smith"
190. When -> @config = createConfig() Then -> @config.url == "http://moore.chris" Then -> @config.name == "Peter Kananen" Then -> @config.bestMochaFriend == "Josh Owens" Then -> @config.bestDnDFriend == "James Smith"
191. When -> @config = createConfig() Then( -> @config.url == "http://moore.chris") .Then( -> @config.name == "Peter Kananen") .Then( -> @config.bestMochaFriend == "Josh Owens") .Then( -> @ config.bestDnDFriend == "James Smith")
192. When -> @config = createConfig() Then( -> @config.url == "http://moore.chris") .Then( -> @config.name == "Peter Kananen") .Then( -> @config.bestMochaFriend == "Josh Owens") .Then( -> @ config.bestDnDFriend == "James Smith")
193. jasmine-jquery https://github.com/velesin/jasmine-jquery
194. $button = $(‘.win’);
195. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span>
196. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toExist()
197. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toExist() expect($button).toHaveAttr("id","yay")
198. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toExist() expect($button).toHaveAttr("id","yay") expect($button).toHaveId("yay")
199. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toBe('span.hidden') expect($button).toExist() expect($button).toHaveAttr("id","yay") expect($button).toHaveId("yay")
200. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toBe('span.hidden') expect($button).toExist() expect($button).toHaveAttr("id","yay") expect($button).toHaveText("Winning") expect($button).toHaveId("yay")
201. $button = $(‘.win’); <span id="yay" class="win hidden">Winning</span> expect($button).toBe('span.hidden') expect($button).toExist() expect($button).toHaveAttr("id","yay") expect($button).toHaveText("Winning") expect($button).toHaveId("yay") expect($button).toHaveClass("hidden")
202. jasmine-fixture https://github.com/searls/jasmine-fixture
204. $foo = inject('foo')
205. $foo = inject('foo') <div class="foo"></div>
206. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar')
207. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar') <div class="foo"><div class="bar"></div></div>
208. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar') <div class="foo"><div class="bar"></div></div> $input = $bar.inject(el: 'input', id: 'woot').val(42)
209. $foo = inject('foo') <div class="foo"></div> $bar = $foo.inject('bar') <div class="foo"><div class="bar"></div></div> $input = $bar.inject(el: 'input', id: 'woot').val(42) <div...><div...><input id="woot" value="42"/></div></div>
210. jasmine-stealth https://github.com/searls/jasmine-stealth
211. spyOn(model,'get')
212. spyOn(model,'get') model.get.andReturn('123-456-7890')
213. spyOn(model,'get') model.get.andReturn('123-456-7890') model.get.andReturn('foo@bar.com')
214. spyOn(model,'get') model.get.andReturn('123-456-7890') model.get.andReturn('foo@bar.com') model.get('email') #=> foo@bar.com
215. spyOn(model,'get') model.get.andReturn('123-456-7890') model.get.andReturn('foo@bar.com') model.get('phone') #=> foo@bar.com model.get('email') #=> foo@bar.com
216. spyOn(model,'get')
217. spyOn(model,'get') model.get.when('phone').thenReturn('123-456-7890')
218. spyOn(model,'get') model.get.when('phone').thenReturn('123-456-7890') model.get.when('email').thenReturn('foo@bar.com')
219. spyOn(model,'get') model.get.when('phone').thenReturn('123-456-7890') model.get.when('email').thenReturn('foo@bar.com') model.get('phone') #=> 123-456-7890
220. spyOn(model,'get') model.get.when('phone').thenReturn('123-456-7890') model.get.when('email').thenReturn('foo@bar.com') model.get('phone') #=> 123-456-7890 model.get('email') #=> foo@bar.com
221. jasmine-headless-webkit http://johnbintz.github.com/jasmine-headless-webkit/
222. command-line runner
225. guard rocks
226. github.com/searls +I’ll help!
227. @searls +I’ll help!
228. searls@gmail.com +I’ll help!
229. •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