How to setup up a stable javascript continuous integration environment and why you need it. Through a real life example, the talk explains all the benefits of having a development process that brings real control over javascript codebase. A deep analysis of developer and webapps needs and of the tools that fit those requirements.

1. Javascript As A
Programming Language

2. IS
Javascript As A
Programming Language
Versioning, Test Driven Development & Continuous Integration

3. IS
Javascript As A
Programming Language
Versioning, Test Driven Development & Continuous Integration

4. Hello, who’s speaking?

5. Hello, who’s speaking?
Marco Cedaro
@cedmax

6. Hello, who’s speaking?
Marco Cedaro
@cedmax
They said I am a...
Frontend Cowboy
Nicola Vitto Jr.
Javascript Pervert
Roberto Felter
Perfect Stranger
basically anyone else

7. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
a Frontend Developer at
Spreaker.com

8. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
a Frontend Developer at
Spreaker.com
a conference organizer
with From The Front

9. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
a Frontend Developer at
Spreaker.com
a conference organizer
with From The Front
and a javascript pervert

10. Bologna, Italy

11. something in common with
Robert Nyman

12. something in common with
Robert Nyman

13. I believe I can fly

14. I believe I can fly

15. I believe I can fly
Be brave. Take risks.
Nothing can substitute
experience.
Paulo Coelho

16. once upon a time

17. once upon a time
we had no control

18. once upon a time
we had no control
javascript was the land of the brave

19. once upon a time
we had no control
javascript was the land of the brave
we were fearless and unconscious

20. once upon a time
we had no control
javascript was the land of the brave
we were fearless and unconscious
we were proud of being like that

21. just like them

22. kitty hawk

23. but life goes on

24. once upon a time
web engineer
had a very bad
opinion of us

25. but it wasn't fair

26. but it wasn't fair
we didn't have IDEs & tools they did

27. but it wasn't fair
we didn't have IDEs & tools they did
actually it was our own fault

28. but it wasn't fair
we didn't have IDEs & tools they did
actually it was our own fault
we were not ready

29. but it wasn't fair
we didn't have IDEs & tools they did
actually it was our own fault
we were not ready
and javascript was neither

30. but, again, life goes on...

31. ...and on...

32. and on..

33. it's not about the language itself

34. GREAT POWERS...

35. Frontend developers
have to claim their role
in development roadmap and
business strategy

36. Javascript is a serious business

37. how serious?

38. less bandwidth and
server load loading
resources and content
when needed
something we can achieve

39. less bandwidth and
performance boosts
server load loading
that can lead to better
resources and content
conversion rates
when needed
something we can achieve

40. less bandwidth and
performance boosts cross platform
server load loading
that can lead to better development: less
resources and content
conversion rates maintenance costs
when needed
something we can achieve

41. less bandwidth and
performance boosts cross platform
server load loading
that can lead to better development: less
resources and content
conversion rates maintenance costs
when needed
money

42. how serious?

43. this serious

44. what's missing?

45. what's missing?

46. what's missing?
If I had nine of my fingers
missing I wouldn't type any
slower.
Mitch Hedberg

47. IDEs & Tools

48. the attitude

49. a strategy

50. The designer
introduces a slider on
some websites:
”it’s cool on apple store”.
The developer gets a jQuery
plugin online
the small web agency

51. The designer
introduces a slider on Major release of the
some websites: most used browser.
”it’s cool on apple store”. A small fix has been
released, they have to change
The developer gets a jQuery 5 files in 5 different projects.
plugin online
the small web agency

52. The designer Oh damn! There’s no
introduces a slider on Major release of the
mouse wheel
some websites: most used browser.
integration!
”it’s cool on apple store”. A small fix has been
released, they have to change should they ask for support
The developer gets a jQuery 5 files in 5 different projects. or should they change the
plugin online library by themself?
the small web agency

53. am I the only one or there’s
something wrong?

54. The client-side
architecture has been
built on the most
known and supported
framework
2006
the big corp

55. The client-side Everything seems to be
architecture has been fine, except that the
built on the most well known framework
known and supported was being replaced by a
framework powerful new one
2006 2008 - 2010
the big corp

56. The client-side Everything seems to be They were forced to
architecture has been fine, except that the change the whole
built on the most well known framework codebase at once to
known and supported was being replaced by a reduce maintenance
framework powerful new one and development costs
2006 2008 - 2010 2011
the big corp

57. here we are again

58. attitude, strategy...

59. ...and foresight

60. WARNING!

61. continuous integration

62. continuous integration

63. continuous integration
A software development
practice where members of a
team integrate their work
frequently [...] to detect
integration errors as quickly
as possible.
Martin Fowler

64. I Build So Consistently

65. I Build So Consistently
identify

66. I Build So Consistently
write a build
script
identify

67. I Build So Consistently
write a build
script
identify
share

68. I Build So Consistently
write a build
script
identify
make it
share continuous

69. How can we take
advantages from a
continuous integration
process?

70. rationalize your workflow

71. deploy stable versions

72. Separate the codebase

73. unit test your code

74. basically

75. basically

76. basically
ie7

77. choose your tools

78. choose your tools

79. choose your tools
A man cannot be too careful
in the choice of his enemies
Oscar Wilde

81. JS HI NT

82. a code quality tool

83. a code quality tool
like Douglas Crockford's JSLint

84. a code quality tool
like Douglas Crockford's JSLint
but

85. a code quality tool
like Douglas Crockford's JSLint
but
customizable

86. a tool for stupid?

87. S HI NT
J

88. R IV ER
ST D
TE T
JS H IN
JS

89. once upon a time

90. jsTestDriver

91. jsTestDriver
works from console

92. jsTestDriver
works from console
runs a server

93. jsTestDriver
works from console
runs a server
opens browsers

94. jsTestDriver
works from console
runs a server
opens browsers
runs test suites

95. jsTestDriver
works from console
runs a server
opens browsers
runs test suites
retrieves results in console

96. build server

97. build server

98. build server

99. how does testing works?

100. have you seen Lost?

101. how does it work?

102. write a test
how does it work?

103. write a test let it fail
how does it work?

104. write a test let it fail write the code
how does it work?

105. write a test let it fail write the code
run the test
again
how does it work?

106. write a test let it fail write the code
run the test refactor
again
how does it work?

107. the environment

108. It's the browser, baby

109. It's the browser, baby

110. Unit testing is
supposed to test a
single atomic “unit” of
functionality without
dependencies on
anything else
The curious case of
Javascript unit testing

111. Unit testing is
This is where you start
supposed to test a
to run into serious
single atomic “unit” of
dependency problems
functionality without
due to the interrelation
dependencies on
with HTML and CSS
anything else
The curious case of
Javascript unit testing

112. Unit testing is What do you test?
This is where you start
supposed to test a Usually how the user
to run into serious
single atomic “unit” of interface responds to
dependency problems
functionality without user input.
due to the interrelation
dependencies on Actually, the realm of
with HTML and CSS
anything else functional testing
The curious case of
Javascript unit testing

113. keep it real

114. keep it real

115. keep it real
To all my homies working
on the 9 to 5
Shaggy

116. #140bytes

117. I used to work with these guys

118. _$ = (function() {
var registered = {};
return {
! ! pub: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, h; (h = handlers[i]); i++){
! ! ! ! ! h.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! sub: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

119. _$ = (function() {
var registered = {};
return {
! ! pub: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, h; (h = handlers[i]); i++){
! ! ! ! ! h.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! sub: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

120. _$.sub("customEvent", function(obj) {
! //DO STUFF
});
_$.pub("customEvent");
_$.pub("customEvent", { prop : "value" });

121. _$.sub("customEvent", function(obj) {
! //DO STUFF
});
_$.pub("customEvent");
_$.pub("customEvent", { prop : "value" });

122. _$.sub("customEvent", function(obj) {
! //DO STUFF
});
_$.pub("customEvent");
_$.pub("customEvent", { prop : "value" });

123. _$ = (function() {
var registered = {};
return {
! ! pub: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, h; (h = handlers[i]); i++){
! ! ! ! ! h.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! sub: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

124. _$ = (function (_) {
! return {
! ! pub: function(a, b, c, d) {
! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
! ! },
! ! sub: function(a, b) {
! ! ! (_[a] || (_[a] = [])).push(b)
! ! }
! }
})({})

125. _$ = (function (_) {
! return {
! ! pub: function(a, b, c, d) {
! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
! ! },
! ! sub: function(a, b) {
! ! ! (_[a] || (_[a] = [])).push(b)
! ! }
tes
! }
})({})
#140 by

126. _$ = (function() {
var registered = {};
return {
! ! pub: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, h; (h = handlers[i]); i++){
! ! ! ! ! h.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! sub: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

127. _$ = (function (_) {
! return {
! ! pub: function(a, b, c, d) {
! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
! ! },
! ! sub: function(a, b) {
! ! ! (_[a] || (_[a] = [])).push(b)
! ! }
tes
! }
})({})
#140 by

128. _$ = (function() {
var registered = {};
return {
! ! pub: function(event, memo) {
! ! ! if (registered[event] instanceof Array){
! ! ! ! var handlers = [].concat(registered[event]);
! ! ! ! for (var i=0, h; (h = handlers[i]); i++){
! ! ! ! ! h.call(this, memo);
! ! ! ! }
! ! ! }
! ! },
! ! sub: function(event, handler) {
! ! ! if (typeof registered[event] === "undefined"){
! ! ! ! registered[event] = [];
! ! ! }
! ! ! registered[event].push(handler);
! ! }
};
})();

129. _$ = (function (_) {
! return {
! ! pub: function(a, b, c, d) {
! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
! ! },
! ! sub: function(a, b) {
! ! ! (_[a] || (_[a] = [])).push(b)
! ! }
tes
! }
})({})
#140 by

130. _$ = (function (_) {
! return {
! ! pub: function(a, b, c, d) {
! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)
! ! },
! ! sub: function(a, b) {
! ! ! (_[a] || (_[a] = [])).push(b)
! ! }
tes
! }
})({})
#140 by

131. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

132. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

133. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

134. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

135. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

136. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

137. [...]
testPub: function(){! !
! ! var a = 0;!
! ! _$.sub('testNotify', function(){ a = 1; });
! ! _$.pub('testNotify');
! ! assertEquals(1, a);
! },
! ! !
! testNotifyWithMemo: function(){!!
! ! var a = 0 ;!
! ! _$.sub('testNotify', function(memo){
! ! ! ! a = memo.test;
! ! });
! ! _$.pub('testNotify', {test: 1});
! ! assertEquals(1, a);
! },
[...]

138. easy, uh?

139. you will, eventually

140. R IV ER
ST D
TE T
JS H IN
JS

141. .JS R
ON I VE
S IN D R
ST
TE T
JS H IN
JS

142. a mock library

143. SPIES
a function that records
arguments, return
value, the value of this
and exception thrown
(if any) for all its calls.
a mock library

144. SPIES STUBS
a function that records functions (spies) with
arguments, return pre-programmed
value, the value of this behavior.
and exception thrown
(if any) for all its calls.
a mock library

145. SPIES STUBS MOCKS
a function that records functions (spies) with functions (spies) with
arguments, return pre-programmed pre-programmed
value, the value of this behavior. behavior (stubs) as well
and exception thrown as pre-programmed
(if any) for all its calls. expectations.
a mock library

146. [...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SysyemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

147. SPY
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

148. SPY
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

149. SPY
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

150. SPY
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

151. STUB
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

152. STUB
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

153. STUB
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

154. STUB
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
! ! !
! testMyLibLoggedNotLogged: function(){!!
! ! var stub = sinon.stub(User, 'isLogged');!
! ! stub.returns(true);
! ! //DO STUFF && ASSERTIONS
! ! stub.returns(false);
! ! //DO STUFF && ASSERTIONS
! },
[...]

155. MOCK
[...]
testMyLibRegistersToSystemOnEvent: function(){! !
! ! var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! assertTrue(spy.calledWith('SystemOn'));
! },
[...]

156. MOCK
[...]
//testMyLibRegistersToSystemOnEvent: function(){! !
! ! //var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! //assertTrue(spy.calledWith('SysyemOn'));
! //},
!
! testMyLibRegistersToSystemOnEvent: function(){! !
! ! var mock = sinon.mock(_$);
! ! mock.expect('watch').calledWith('SysyemOn');
! ! //DO STUFF TO INIT YOUR LIB
! ! mock.verify();
! },
[...]

157. MOCK
[...]
//testMyLibRegistersToSystemOnEvent: function(){! !
! ! //var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! //assertTrue(spy.calledWith('SysyemOn'));
! //},
!
! testMyLibRegistersToSystemOnEvent: function(){! !
! ! var mock = sinon.mock(_$);
! ! mock.expect('watch').calledWith('SysyemOn');
! ! //DO STUFF TO INIT YOUR LIB
! ! mock.verify();
! },
[...]

158. MOCK
[...]
//testMyLibRegistersToSystemOnEvent: function(){! !
! ! //var spy = sinon.spy(_$, 'watch');!
! ! //DO STUFF TO INIT YOUR LIB
! ! //assertTrue(spy.calledWith('SysyemOn'));
! //},
!
! testMyLibRegistersToSystemOnEvent: function(){! !
! ! var mock = sinon.mock(_$);
! ! mock.expect('watch').calledWith('SysyemOn');
! ! //DO STUFF TO INIT YOUR LIB
! ! mock.verify();
! },
[...]

159. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

160. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

161. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

162. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

163. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

164. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

165. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

166. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

167. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

168. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

169. AJAX CALL
[...]
testOnSuccessCallback: function(){! !
var server = sinon.useFakeServer();
server.respondWith("GET", "/art/12/comments.json",
[200, {"Content-Type":"application/json"},
"[{ id:12, text:'Hello'}]"]);
! ! var spy = sinon.spy();
! ! myLib.getCommentsFor("/art/12", spy);
! ! server.respond();
! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));
! },
[...]

170. .JS R
ON I VE
S IN D R
ST
TE T
JS H IN
JS

171. E SS OR
PR
OM S
Y U I C .J
S ON I VE R
IN D R
ST
TE T
JS H IN
JS

172. Everyone should be happy

173. in the wild

174. in the wild

175. IN THE WILD
In the wild, there is
no health care.
Dwight Schrute (the office)

176. drawbacks
at the beginning

177. cost of change

178. LOOKING FORWARD

179. LOOKING FORWARD

180. LOOKING FORWARD

181. LOOKING FORWARD

182. LOOKING FORWARD

183. LOOKING FORWARD
the further we look at,
the more control we need

184. LOOKING FORWARD
the further we look at,
the more control we need

185. LOOKING FORWARD
the further we look at,
the more control we need
let's get ready

186. LOOKING FORWARD
the further we look at,
the more control we need
let's get ready
javascript is a programming language

187. LOOKING FORWARD
the further we look at,
the more control we need
let's get ready
javascript is a programming language
javascript is a serious business.

188. LOOKING FORWARD
the further we look at,
the more control we need
let's get ready
javascript is a programming language
javascript is a serious business.
and, most of all...

189. javascript kicks asses

190. javascript kicks asses
any question?
http://spkr8.com/t/8718
http://cedmax.com
@cedmax