1. Javascript As A
Programming Language

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

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:
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...

19. Javascript is a serious business

20. What's relying
on javascript?

21. What's relying
on javascript?
performance
↓
user experience
↓
conversion
↓
money

22. What's relying
on javascript?

23. What's relying
on javascript?
ajax interaction
↓
less bandwith & server load
↓
less infractucture costs
↓
money

24. What's relying
on javascript?

25. What's relying
on javascript?
cross platform animation
↓
less tecnologies
↓
less code duplication
↓
money

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

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

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

40. I Build So Consistently

41. I Build So Consistently
identify

42. I Build So Consistently
build
identify

43. I Build So Consistently
build
identify
share

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

45. How does this fit our
needs?

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

49. Unit & Functional an overview

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

52. Test Driven Development

53. You will, eventually..

54. Everyone should be happy

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

67. Pitfalls?
testing asynchronous execution is a mess

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

76. THE ENVIRONMENT
I like boring things
Andy Warhol

77. Javascript Repository

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

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

80. 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
...

81. 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
...

82. 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
...

83. 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

84. Let's code

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;

88. JS Test Driver in action

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

91. JS Test Driver in action

92. 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
...

93. 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
...

94. Test Ajax Call
var test = new TestCase("mylib.test", {
testAjaxCallSuccess: function(){
var server = sinon.useFakeServer();
server.respondWith("GET", "/some/article/comments.json",
[200, {"Content-Type":"application/json"},
'[{ id:12, comment:"Hello"}]']);
var callback = sinon.spy();
myLib.getCommentsFor("/some/article", callback);
server.respond();
assert(callback.calledWith([{ id:12, comment:"Hello"}]));
server.restore();
}
});

95. Test Ajax Timeout
var test = new TestCase("mylib.test", {
testAjaxCallTimeout: function(){
var server = sinon.useFakeServer();
server.respondWith("GET", "/some/article/comments.json",
[200, {"Content-Type":"application/json"},
'[{ id:12, comment:"Hello"}]']);
var timeoutCallback = sinon.spy();
var clock = sinon.useFakeTimers();
myLib.getCommentsFor("/some/article", function(){},
{onTimeout: timeoutCallback,
timeout:2500});
clock.tick(2500);
assert(timeoutCallback.called());
server.restore();
}
});

96. Website Solution

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

98. 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

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

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

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

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

107. so? what is it about?
control & knowledge

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

118. javascript kicks asses

119. javascript is money

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

121. One last word..