Versioning, Test Driven Development and Continuous Integration: how to setup up a stable javascript continuous integration environment and why you need it. Through a real life example, it explains all the benefits of having real control over javascript codebase and analyses developer and webapps needs and 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
http://joind.in/3354

3. Hello, who’s speaking?

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

5. Hello, who’s speaking?
Marco Cedaro
@cedmax
They said I am a...
Frontend Cowboy
Nicola Vitto

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

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

8. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
Platform Software Developer at
Yoox Group, currently in
charge of js architecture
development

9. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
Platform Software Developer at
Yoox Group, currently in
charge of js architecture
development
Frontend Meetup organizer
with From The Front

10. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
Platform Software Developer at
Yoox Group, currently in
charge of js architecture
development
Frontend Meetup organizer
with From The Front
and a javascript pervert

11. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
1. Disclaimer

12. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
1. Disclaimer

13. DISCLAIMER
Always code as if the guy who ends up
maintaining your code will be a violent
psychopath who knows where you live
Martin Golding

14. REAL DISCLAIMER
Javascript is not jQuery
Let’s say it all together: “Javascript is not jQuery”
What do you mean?
I mean that Javascript is not just something you find
online, cut and paste in a <script> just before the end
of the </body>

15. Not jQuery’s fault
jQuery is extremely powerful
but...WITH GREAT POWER THERE
MUST ALSO COME - - GREAT
RESPONSABILITY! *
* original sentence from 1962 first spiderman story

16. The right tool in wrong hands
but who cares? as long as interaction is held by:
designers
that aren’t exactly aware of what they are doing
backend developers
even worse: they mostly don’t even care about what’s
happening clientside as long as everything works

17. Not a “merchant of complexity”
we don’t need just to let stuff work
we don’t need complexity either
we need a strategy to let code be
maintainable and reusable

18. is it about simplicity?
it isn't
there’s a lot of people who hides their ignorance behind
simplicity
we have to claim our role in development
roadmap and business strategy, because...

19. Javascript is a serious business

20. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
2.You Need a Strategy

21. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
2.You Need a Strategy

22. YOU NEED A STRATEGY
What's the use of running if you are
not on the right road
German proverb

23. YOU NEED A STRATEGY
Why do you need a strategy?
you need a strategy because best practices and
design patterns are the same in a 4 guys based
company as well as in a large corporate.

24. It doesn’t really matter if you are working at facebook,
soundcloud or by yourself in a small office.
How many people code?

25. A real life example
Small Web Agency
1 designer, 2 developers and a
lot of small website with low
maintenance rate.

26. The designer
introduces a slider on 5
websites:
”it’s cool on apple store”.
The developer gets a jQuery
plugin online
a SLIDER’s Story

27. The designer
introduces a slider on 5 Major release of the
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
a SLIDER’s Story

28. The designer Oh damn! There’s no
introduces a slider on 5 Major release of the
mouse wheel
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?
a SLIDER’s Story

29. Am I the only one or
there’s something wrong?

30. Just a spoonful of sugar...
We need to manage
codebase just in one
place
We need to be able to
continue
development without
regression
We need to use stable
versions of our libraries

31. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
3. Continuous Integration

32. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
3. Continuous Integration

33. Continuous Integration
A software development practice where members of
a team integrate their work frequently.
Each integration is verified by an automated build to
detect integration errors as quickly as possible.
Martin Fowler
CI is about the fundamentals. If we don’t focus on the
fundamentals we’ll be forced to perform low-level
tasks later, usually at the most inconvenient times
Paul Duvall, Continuous Integration

34. I Build So Consistently

35. I Build So Consistently
identify

36. I Build So Consistently
build
identify

37. I Build So Consistently
build
identify
share

38. I Build So Consistently
build
identify
share make it continuous

39. How does this fit our
needs?

40. codebase just in one place
setup an isolated repository for reused libraries
share the code through a CI process
resolve dependency on websites

41. continue development
without regression
validate the code
run unit test against errors (both coding and logic)
version the shared code against interface changes

42. stable versions
use a declared semantic versioning
use a file system based pattern:
//jsRepo/dist/yourscript-1.0.0/yourscript.js
//jsRepo/dist/yourscript-1.0.0.js
never modify already released versions
increase version number instead

43. Unit & Functional an overview

44. Unit & Functional an overview

45. Unit & Functional an overview

46. Unit & Functional an overview

47. Unit & Functional an overview
is it red? is it a 4x2 block? is the roof red?
is it made to fit is there a porch?
well other block? is there a door?

48. Unit vs Functional
test consistency
control
test cross interaction against execution test
over
browser between external time integration
codebase
libraries changes

49. Test Driven Development

50. You will, eventually..

51. Everyone should be happy

52. KISS
Keep it Simple & Smart
Don’t over-engineer it: you will eventually regret every
single useless complexity you will introduce

53. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
4. Choose Your Tools

54. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
4. Choose Your Tools

55. CHOOSE YOUR TOOLS
A man cannot be too careful in the
choice of his enemies
Oscar Wilde

56. Another Neat Tool
Simply saying the documentation sucks
doesn't do any good
Larry V. Streepy - Ant Mailing List 06.06.2001

57. Another Neat Tool
Simply saying the documentation sucks
doesn't do any good
Larry V. Streepy - Ant Mailing List 06.06.2001
He was right: 10 years later ANT documentation still sucks but ANT is a solid
choice in build automation configuration.

58. ANT
XML driven: simple and straightforward
a standard
there are a lot of implementations and plugins
every tool in this presentation is easily capable to be used
in Ant build process

59. ANT - Alternatives
There are a lot of valuable Ant alternatives.
Choose the one that fits better your needs

60. Code Base:
CODE QUALITY VALIDATOR
UNIT TEST RUNNER
Websites:
DEPENDENCY RESOLVER
CODE MINIFIER

61. Code Base:
JSLINT
JS TEST DRIVER
Websites:
DEPENDENCY RESOLVER
CODE MINIFIER

62. JsLint
javascript execution often runs into silent errors due to its
bad parts (ref. Javascript the Good Parts, Crockford) and Lint, most of
times, avoids those problems
and, most of all, you can have full control on how code is
written in the team

63. JS Test Driver
Js Test Driver is the most complete javascript unit test runner
available
external api integration
jasmine and qunit as well as its own api
test report
console return and junit compatible report
smooth integration
both locally and on a build machine

64. How does it work?
It runs a server
opens browsers
runs test suites
retrieves results on the console
creates a JUnit report

65. Pitfalls?
testing asynchronous execution is a mess

66. Sinon.js
a standalone javascript library with unit test utilities
fake server
manage server response in order to test ajax interaction
fake timer
in order to test timeouts, intervals, animation callbacks...
spy, stub & mock
in order to make advanced assertions on object interaction

67. JS Test Driver - Alternatives #1
Env.JS
a javascript DOM implementation in javascript engines: it is
possible to fake browser execution and run unit tests.
PROS: really fast, easily integrated in build
CONS: it is all fake

68. JS Test Driver - Alternatives #2
PhantomJS
It is a minimalistic, headless, WebKit-based, JavaScript-driven tool
upon which is possible to build unit test.
PROS: fast, integrable in build, real browser engine
CONS: only WebKit

69. JS Test Driver - Alternatives #3
TestSwarm
It is a John Resig’s project of Distributed Continuous Integration
released in 2009 as an official Mozilla Labs project (not
anymore).
PROS: replaces all tools in a all-in-one solution, not only js
test driver
CONS: it's in alpha since 2009

70. JS Test Driver - Alternatives #4
Yeti
it stands for Yahoo Easy Test Interface and it is a very promising
unit test runner, potentially the most suitable alternative.
PROS: a real, stable alternative
CONS: strictly tied to YUI framework test and build on
node.js (a mess on windows: it requires cygwin)

71. Code Base:
JSLINT
JS TEST DRIVER
Websites:
DEPENDENCY RESOLVER
CODE MINIFIER

72. Code Base:
JSLINT
JS TEST DRIVER
Websites:
APACHE IVY
YUI COMPRESSOR

73. Apache Ivy
Ivy is a simple, powerful and well documented dependency
manager
It has a full integration in ANT build system
and, again, it’s really simple, especially if you keep a file system
based versioning.

74. Ivy Alternatives
Is there any alternative?
I haven’t found anything simple enough to compete with Ivy
straightforwardness: the other solutions I’ve found drove
me nuts

75. Yui Compressor
we don’t really need Yui Compressor to set up our
environment, but why should we publish uncompressed js for
our websites?
I don’t want to introduce the performance topic but if you
do... DON’T

76. Yui Compressor Alternatives
Packer is quite powerful in terms of filesize, but it introduces
processing time lag
Google Closure in simple mode is similar to yui (except for
the fact that yui is more consolidated in time), in advanced
mode is unsafe to use if you are not exactly aware of what
kind of optimization your code will pass through
Uglify has good points but it’s build upon node.js (again on
windows is a mess) and, as for closure, you’d better know
what will happen to your code

77. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
5. The Environment

78. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
5. The Environment

79. THE ENVIRONMENT
I like boring things
Andy Warhol

80. Javascript Repository

81. Javascript Repository
/
dist
libs
src
tools
build.xml

82. Javascript Repository
/
dist
libs
src
tools
build.xml
/tools/
jslint
JsTestDriver-1.3.1

83. Javascript Repository
/ /src/
dist form-validator
libs slider
src src
tools slider.js
build.xml test
slider.test.js
/tools/
jsTestDriver.conf
jslint
version.prop
JsTestDriver-1.3.1
twitter-widget
...

84. Javascript Repository
/libs/
jquery-1.5.1.min.js
sinon-1.0.0.js
/ /src/
dist form-validator
libs slider
src src
tools slider.js
build.xml test
slider.test.js
/tools/
jsTestDriver.conf
jslint
version.prop
JsTestDriver-1.3.1
twitter-widget
...

85. Javascript Repository
/libs/
jquery-1.5.1.min.js
sinon-1.0.0.js
/ /src/
dist form-validator
libs slider
src src
tools slider.js
build.xml test
slider.test.js
/tools/
jsTestDriver.conf
jslint
version.prop
JsTestDriver-1.3.1
twitter-widget
...

86. basepath: ../..
server: http://127.0.0.1:9876
load:
- libs/sinon-1.0.0.js
- libs/jquery-1.5.1.min.js
- src/slider/src/slider.js
- src/slider/test/slider.test.js
JsTestDriver.conf

87. Let's code

88. Test
var test = new TestCase("Slider.test", {
setUp: function(){
},
tearDown: function(){
}
});
Code
var slider;

89. Test
var test = new TestCase("Slider.test", {
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},
tearDown: function(){
}
});
Code
var slider;

90. Test
var test = new TestCase("Slider.test", {
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},
testSliderIsAPlugin: function(){
var test = function(){
$("slidable").slider();
};
assertNoException(test);
},
tearDown: function(){
}
});
Code
var slider;

91. JS Test Driver in action

92. Test
var test = new TestCase("Slider.test", {
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},
testSliderIsAPlugin: function(){
var test = function(){
$("slidable").slider();
};
assertNoException(test);
},
tearDown: function(){
}
});
Code
var slider;

93. Test
var test = new TestCase("Slider.test", {
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},
testSliderIsAPlugin: function(){
var test = function(){
$("slidable").slider();
};
assertNoException(test);
},
tearDown: function(){
}
});
Code
(function($){
$.fn.slider = function(){};
}(jQuery));

94. JS Test Driver in action

95. Javascript Repository
/libs/
jquery-1.5.1.min.js
sinon-1.0.0.js
/ /src/
dist form-validator
libs slider
src src
tools slider.js
build.xml test
slider.test.js
/tools/
jsTestDriver.conf
jslint
version.prop
JsTestDriver-1.3.1
twitter-widget
...

96. Javascript Repository
/dist/ /libs/
form-validator-1.0.0 jquery-1.5.1.min.js
form-validator-1.1.0 sinon-1.0.0.js
slider-1.0.0
/ /src/
dist slider.min.js form-validator
libs twitter-widget-1.0.0
slider
src twitter-widget-1.0.1
src
tools twitter-widget-2.0.0 slider.js
build.xml ... test
slider.test.js
/tools/
jsTestDriver.conf
jslint
version.prop
JsTestDriver-1.3.1
twitter-widget
...

97. Website Solution

98. Website Solution
/
css
img
inc
scripts
.htaccess
index.php

99. Website Solution
/scripts/
public
/
css src
img tools
inc apache-ivy-2.2.0
scripts yui-compressor-2.4.6
.htaccess ivy-settings.xml
index.php mywebapp.xml
ivy.xml

100. Website Solution
/scripts/
public
/
css src
img tools
inc apache-ivy-2.2.0
scripts yui-compressor-2.4.6
.htaccess ivy-settings.xml
index.php mywebapp.xml
ivy.xml

101. <ivysettings>
<settings defaultResolver="JSResolver"/>
<resolvers>
<url name="JSResolver" checkmodified="true">
<artifact
pattern="//jsRepo/dist/[module]-[revision]/[module].js"
/>
</url>
</resolvers>
<caches
defaultCacheDir="${basedir}/.artifacts"
artifactPattern="[organization]/[module]-[revision].js"
/>
<property
name="ivy.artifactproperty.name"
value="[organization].[module]"
/>
<property
name="ivy.artifactproperty.value"
value="[organization]/[module]-[revision].js"
/>
</ivysettings>

102. <ivy-module version="2.0">
<info organisation="libs" module="myWebSite" />
<dependencies>
<dependency org="libs" name="slider" rev="1.0.0"/>
<dependency org="libs" name="twitter-widget" rev="2.0.0"/>
<dependency org="libs" name="form-validator" rev="1.1.0"/>
</dependencies>
</ivy-module>
ivy.xml

103. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
6. In The Wild

104. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
6. In The Wild

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

106. what is it about?
control & knowledge

107. Inversion of control freakness
I am not a control freak.
Gain control and then leave to the
machine the responsibility to check
everything; focus on knowledge.
* Inspired (and I mean copied) by http://blog.jonathanoliver.com/ - Inversion of Control Freak:
Dependency Injection, Domain-Driven Design, Test-Driven Development techniques

108. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5 and the microjs framework era

109. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5 and the tiny super focused framework era

110. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5 and the tiny super focused framework era
on browser

111. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5 and the tiny super focused framework era
on browser
then there’s a brand new world on server: node.js,
noSQL databases (couchdb, mongodb..)

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

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

114. LOOKING FORWARD
the further we look at,
the more control we need
javascript is a programming language

115. LOOKING FORWARD
the further we look at,
the more control we need
javascript is a programming language
javascript is a serious business.

116. LOOKING FORWARD
the further we look at,
the more control we need
javascript is a programming language
javascript is a serious business.
and, most of all...

117. javascript kicks asses

118. marco@fromthefront.it
https://github.com/cedmax
@cedmax

119. One last word..

121. Massimiliano Davoli
Alberto Brandolini
Francesco Fullone
Luca Lischetti
Rocco Curcio
Matteo Gazziola