Sustainable Software with Jasmine via Cory Flanigan and Justin Searls

Transcript

1. Sustainable Software
2. Who uses JavaScript?
3. Who’s familiar with Test-Driven Development?
4. Who has code that’s difficult to change?
5. pain points
6. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to pain points
7. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to pain points
8. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to pain points
9. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to pain points
10. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to which leads to
11. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours which leads to
12. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours which leads to
13. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours which leads to
14. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours which leads to
15. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours but we value
16. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital but we value
17. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital but we value
18. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital but we value
19. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital but we value
20. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital our values are compromised
21. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital takes too long for finished features to get into production documentation slows progress; key people become bottlenecks communication cost slows down implementation wastes money & good-will; exacerbates quality issues our values are compromised
22. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital takes too long for finished features to get into production documentation slows progress; key people become bottlenecks communication cost slows down implementation wastes money & good-will; exacerbates quality issues our values are compromised
23. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital takes too long for finished features to get into production documentation slows progress; key people become bottlenecks communication cost slows down implementation wastes money & good-will; exacerbates quality issues our values are compromised
24. adding new code breaks existing functionality intent & value of the code is unclear HTML & JavaScript become codependent it takes longer to add a new feature than it used to manual regression testing, change control processes rely on documentation, original authors to retain knowledge developers and designers closely coordinate each change hiring more people, working longer hours shipping features to users constantly avoiding commitments to non-critical concerns minimizing time to turn ideas into reality getting the most out of each infusion of capital takes too long for finished features to get into production documentation slows progress; key people become bottlenecks communication cost slows down implementation wastes money & good-will; exacerbates quality issues our values are compromised
25. vicious cycle more bugs communication drag higher carrying cost slower delivery
26. vicious cycle more bugs communication drag higher carrying cost slower delivery more indirection
27. vicious cycle more bugs communication drag higher carrying cost slower delivery less feedback more indirection
28. vicious cycle more bugs communication drag higher carrying cost slower delivery more overtime less feedback more indirection
29. vicious cycle more bugs communication drag higher carrying cost slower delivery more overtime less feedback greater risk more indirection
30. what if? new code didn’t risk breaking existing functionality? all code was sufficiently documented as it was developed? code was modular enough to survive UI changes, multiple client platforms? adding new features became easier over time?
31. what if? new code didn’t risk breaking existing functionality? all code was sufficiently documented as it was developed? code was modular enough to survive UI changes, multiple client platforms? adding new features became easier over time?
32. what if? new code didn’t risk breaking existing functionality? all code was sufficiently documented as it was developed? code was modular enough to survive UI changes, multiple client platforms? adding new features became easier over time?
33. what if? new code didn’t risk breaking existing functionality? all code was sufficiently documented as it was developed? code was modular enough to survive UI changes, multiple client platforms? adding new features became easier over time?
34. virtuous cycle fewer bugs more autonomy easier to change more rapid delivery
35. virtuous cycle fewer bugs more autonomy easier to change more rapid delivery more confidence
36. virtuous cycle fewer bugs more autonomy easier to change more rapid delivery greater value more confidence
37. virtuous cycle fewer bugs more autonomy easier to change more rapid delivery more balance greater value more confidence
38. virtuous cycle fewer bugs more autonomy easier to change more rapid delivery more balance greater value less risk more confidence
39. 1. sketch it I want to go to there!
40. 1. sketch it 2. spike it I want to go to there!
41. 1. sketch it 2. spike it 3. spec it I want to go to there!
42. draw it
43. make it work
44. throw it away
45. spec it
46. build it to last
47. refactor it
48. let’s see an example
49. in your spike, suppose you used
50. $('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('<div>New Task!</div>'); });
51. how might we spec adding tasks?
52. describe('#addTask', function(){ it('appends a div'); });
53. describe('#addTask', function(){ it('appends a div', function(){ expect($container).toContain('div'); }); });
55. describe('#addTask', function(){ it('appends a div', function(){ var $container = $('<div></div>'); expect($container).toContain('div'); }); });
57. describe('#addTask', function(){ it('appends a div', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toContain('div'); }); });
59. window.addTask = function(){ this.append('<div></div>'); }; describe('#addTask', function(){ it('appends a div', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toContain('div'); }); });
61. describe('#addTask', function(){ it('appends a div', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toContain('div'); }); it('includes a default text label', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toHaveText('New Task!'); }); });
63. window.addTask = function(){ this.append('<div>New Task!</div>'); }; describe('#addTask', function(){ ... it('includes a default text label', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toHaveText('New Task!'); }); });
65. describe('#addTask', function(){ it('appends a div', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toContain('div'); }); it('includes a default text label', function(){ var $container = $('<div></div>'); addTask.call($container); expect($container).toHaveText('New Task!'); }); });
66. describe('#addTask', function(){ var $container; beforeEach(function(){ $container = $('<div></div>'); addTask.call($container); }); it('appends a div', function(){ expect($container).toContain('div'); }); it('includes a default text label', function(){ expect($container).toHaveText('New Task!'); }); });
67. describe('#addTask', function(){ var $container; beforeEach(function(){ $container = $('<div></div>'); addTask.call($container); }); it('appends a div', function(){ expect($container).toContain('div'); }); it('includes a default text label', function(){ expect($container).toHaveText('New Task!'); }); }); jasmine-jquery http://is.gd/jasminejquery
68. how might we spec event binding?
69. describe('#clicker', function(){ it('triggers the event handler', function(){ expect(handler).toHaveBeenCalledWith(event); }); });
71. describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); expect(handler).toHaveBeenCalledWith(event); }); });
73. describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); expect(handler).toHaveBeenCalledWith(event); }); });
75. describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(handler).toHaveBeenCalledWith(event); }); });
77. var clicker = function(selector, whenClicked){ }; describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(handler).toHaveBeenCalledWith(event); }); });
79. var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { whenClicked(e); }); }; describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(handler).toHaveBeenCalledWith(event); }); });
81. var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { whenClicked(e); }); }; describe('#clicker', function(){ ... it('prevents default browser behavior', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(event.preventDefault).toHaveBeenCalled(); }); });
83. var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { e.preventDefault(); whenClicked(e); }); }; describe('#clicker', function(){ ... it('prevents default browser behavior', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(event.preventDefault).toHaveBeenCalled(); }); });
85. describe('#clicker', function(){ it('triggers the event handler', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(handler).toHaveBeenCalledWith(event); }); it('prevents default browser behavior', function(){ var handler = jasmine.createSpy('handles clicks'); var event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('<div class="my-button"></div>'); clicker('.my-button',handler); $('.my-button').trigger(event); expect(event.preventDefault).toHaveBeenCalled(); }); });
86. describe('#clicker',function(){ var handler, event; beforeEach(function(){ handler = jasmine.createSpy('handles clicks'); event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('<div class="my-button"></div>'); }); context('when you click the button',function(){ beforeEach(function(){ clicker('.my-button',handler); $('.my-button').trigger(event); }); it('triggers the event handler',function(){ expect(handler).toHaveBeenCalledWith(event); }); it('prevents default browser behavior',function(){ expect(event.preventDefault).toHaveBeenCalled(); }); }); });
88. describe('#clicker',function(){ var handler, event; beforeEach(function(){ handler = jasmine.createSpy('handles clicks'); event = $.Event('click'); spyOn(event,'preventDefault'); $.jasmine.inject('<div class="my-button"></div>'); }); context('when you click the button',function(){ beforeEach(function(){ clicker('.my-button',handler); $('.my-button').trigger(event); }); it('triggers the event handler',function(){ expect(handler).toHaveBeenCalledWith(event); }); it('prevents default browser behavior',function(){ expect(event.preventDefault).toHaveBeenCalled(); }); it('binds `this` to the jQuery result object',function(){ expect(handler.mostRecentCall.object).toBe('.my-button'); }); }); });
90. var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { e.preventDefault(); whenClicked.call($(this),e); }); }; describe('#clicker', function(){ ... context('when you click the button',function(){ ... it('binds `this` to the jQuery result object',function(){ expect(handler.mostRecentCall.object).toBe('.my-button'); }); }); });
92. our new production code
93. window.addTask = function(){ this.append('<div>New Task!</div>'); }; var clicker = function(selector, whenClicked){ $(selector).live('click',function(e) { e.preventDefault(); whenClicked.call($(this),e); }); }; clicker('.add-task', addTask);
94. $('.add-task').live('click',function(e) { e.preventDefault(); $(this).append('<div>New Task!</div>'); });
95. Taking the next step
96. try jasmine https://try-jasmine.heroku.com
97. http://try-jasmine.heroku.com
98. download jasmine http://is.gd/downloadjasmine
100. try jasmine-rails https://github.com/searls/jasmine-rails
103. learn more about test-driven development http://is.gd/tddbook
104. ask us questions and we’ll try to help
105. thank you! searls@gmail.com Boulder UX, Boulder, CO September 12, 2011 @searls seeflanigan@gmail.com @seeflanigan Thanks to Brandon Keepers (@bkeepers) for the Keynote template! find this talk at http://is.gd/jasmineux