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:
still a Platform Software
Developer at Yoox Group,
currently in charge of js
architecture development
9. Hello, who’s speaking?
Marco Cedaro
@cedmax
Actually I am:
still a 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:
still a 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
Front end developers have to claim their
role in development roadmap and business
strategy, because...
26. 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
27. 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
28. YOU NEED A STRATEGY
What's the use of running if you are
not on the right road
German proverb
29. 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.
30. It doesn’t really matter if you are working at facebook,
soundcloud or by yourself in a small office.
How many people code?
31. A real life example
Small Web Agency
1 designer, 2 developers and a
lot of small website with low
maintenance rate.
32. 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
33. 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
34. 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
36. Just a spoonful of sugar...
manage codebase just in
one place
continue development
without regression
use stable versions of our
libraries
37. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
3. Continuous Integration
38. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
3. Continuous Integration
39. 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
46. codebase just in one place
setup an isolated repository for reusable libraries
share the code through a CI process
resolve dependency on websites
47. continue development
without regression
validate the code
run tests against errors (both coding and logic)
version the shared code against interface changes
48. 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
50. 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?
51. Unit vs Functional
test
consistency
test cross interaction control
against execution test
browser between over
external time integration
issues different codebase
changes
libraries
55. an advice
Keep it Simple & Smart
Don’t over-engineer it: you will eventually regret every
single useless complexity you will introduce
56. 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
57. 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
58. CHOOSE YOUR TOOLS
A man cannot be too careful in the
choice of his enemies
Oscar Wilde
59. Another Neat Tool
Simply saying the documentation sucks
doesn't do any good
Larry V. Streepy - Ant Mailing List 06.06.2001
60. 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.
61. 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
62. ANT - Alternatives
It's plenty of valuable Ant alternatives.
Choose the one that fits better your needs
63. Code Base:
UNIT TEST RUNNER
Websites:
DEPENDENCY RESOLVER
64. Code Base:
JS TEST DRIVER
Websites:
DEPENDENCY RESOLVER
65. 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
66. How does it work?
It runs a server
opens browsers
runs test suites
retrieves results on the console
creates a report in JUnit format
68. 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
69. JS Test Driver - Alternatives
Env.JS
a javascript DOM implementation in javascript engines: it is
possible to fake browser execution and run unit tests.
Yeti
it stands for Yahoo Easy Test Interface and it is a very promising
unit test runner, potentially the most suitable alternative.
70. Code Base:
JS TEST DRIVER
Websites:
DEPENDENCY RESOLVER
71. Code Base:
JS TEST DRIVER
Websites:
APACHE IVY
72. 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.
73. Ivy Alternatives
Is there any alternative?
I haven’t found anything simple enough to compete with Ivy
straightforwardness: other solutions (ie. maven) drove me
nuts
74. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
5. The Environment
75. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration
4. Choose Your Tools 5. The Environment 6. In The Wild
5. The Environment
85. Test
var test = new TestCase("Slider.test", {
setUp: function(){
},
tearDown: function(){
}
});
Code
var slider;
86. Test
var test = new TestCase("Slider.test", {
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},
tearDown: function(){
}
});
Code
var slider;
87. 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;
89. 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;
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
(function($){
$.fn.slider = function(){};
}(jQuery));
108. Inversion of control freakness 1
2
I am not a control freak.
Gain control and then leave to the
machine the responsibility to check
everything; focus on knowledge.
1) Inspired (and I mean copied) by http://blog.jonathanoliver.com/ - Inversion of Control Freak:
Dependency Injection, Domain-Driven Design, Test-Driven Development techniques
2) actually I am
109. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5
110. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5
111. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5
on browser
112. LOOKING FORWARD
Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5
on browser
then there’s a brand new world on server: node.js,
noSQL databases (couchdb, mongodb..)
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
115. LOOKING FORWARD
the further we look at,
the more control we need
javascript is a programming language
116. LOOKING FORWARD
the further we look at,
the more control we need
javascript is a programming language
javascript is a serious business.
117. 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...