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.
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...
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
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
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
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
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
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
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)
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
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;
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));
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...