YOOX Launch & Learn - Javascript as a programming language

Javascript As A
Programming Language

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

Hello, who’s speaking?

Marco Cedaro
@cedmax


Marco Cedaro
@cedmax

They said I am a...
Frontend Cowboy
Nicola Vitto


Marco Cedaro
@cedmax

They said I am a...
Frontend Cowboy
Nicola Vitto
Javascript Pervert
Roberto Felter


Marco Cedaro
@cedmax

They said I am a...
Frontend Cowboy
Nicola Vitto
Javascript Pervert
Roberto Felter
Perfect Stranger
basically anyone else


Marco Cedaro
@cedmax

Actually I am:

still a Platform Software
Developer at Yoox Group,
currently in charge of js
architecture development


Marco Cedaro
@cedmax

Actually I am:


Frontend Meetup organizer
with From The Front


Marco Cedaro
@cedmax

Actually I am:


Frontend Meetup organizer
with From The Front
and a javascript pervert

1. Disclaimer 2. You Need a Strategy 3. Continuous Integration

4. Choose Your Tools 5. The Environment 6. In The Wild

1. Disclaimer

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

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 ﬁnd
online, cut and paste in a <script> just before the end
of the </body>

Not jQuery’s fault

jQuery is extremely powerful

but...WITH GREAT POWER THERE
MUST ALSO COME - - GREAT
RESPONSABILITY! *

* original sentence from 1962 ﬁrst spiderman story

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

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

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

Javascript is a serious business

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

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

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



2.You Need a Strategy

YOU NEED A STRATEGY

What's the use of running if you are
not on the right road
German proverb

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.

It doesn’t really matter if you are working at facebook,
soundcloud or by yourself in a small ofﬁce.

How many people code?

A real life example

Small Web Agency

1 designer, 2 developers and a
lot of small website with low
maintenance rate.

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

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

a SLIDER’s Story

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 ﬁx has been
released, they have to change should they ask for support
The developer gets a jQuery 5 ﬁles in 5 different projects. or should they change the
plugin online library by themself?

a SLIDER’s Story

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

Just a spoonful of sugar...

manage codebase just in
one place

continue development
without regression

use stable versions of our
libraries



3. Continuous Integration

Continuous Integration

A software development practice where members of
a team integrate their work frequently.
Each integration is veriﬁed 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

I Build So Consistently

identify

build

identify

build

identify

share

build

identify

share make it continuous

How does this ﬁt our
needs?

codebase just in one place

setup an isolated repository for reusable libraries
share the code through a CI process
resolve dependency on websites

continue development
without regression

validate the code
run tests against errors (both coding and logic)
version the shared code against interface changes

stable versions

use a declared semantic versioning
use a ﬁle 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

Unit & Functional an overview

is it red? is it a 4x2 block? is the roof red?
is it made to ﬁt is there a porch?
well other block? is there a door?

Unit vs Functional

test
consistency
test cross interaction control
against execution test
browser between over
external time integration
issues different codebase
changes
libraries

an advice

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



4. Choose Your Tools

CHOOSE YOUR TOOLS

A man cannot be too careful in the
choice of his enemies
Oscar Wilde

Another Neat Tool

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

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 conﬁguration.

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

ANT - Alternatives

It's plenty of valuable Ant alternatives.
Choose the one that ﬁts better your needs

Code Base:
UNIT TEST RUNNER

Websites:
DEPENDENCY RESOLVER

Code Base:
JS TEST DRIVER

Websites:
DEPENDENCY RESOLVER

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

How does it work?

It runs a server
opens browsers
runs test suites
retrieves results on the console
creates a report in JUnit format

Pitfalls?

testing asynchronous execution is a mess

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

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.

Code Base:
JS TEST DRIVER

Websites:
APACHE IVY

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 ﬁle system
based versioning.

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



5. The Environment

THE ENVIRONMENT

I like boring things
Andy Warhol

Javascript Repository

/
dist
libs
src
tools
build.xml


/
dist
libs
src
tools
build.xml

/tools/
jslint
JsTestDriver-1.3.1


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

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

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

Test
var test = new TestCase("Slider.test", {
setUp: function(){

},
tearDown: function(){

}
});

Code
var slider;

Test
setUp: function(){
/*:DOC += <ul id="foo"><li></li><li></li></ul> */
},

}
});

Code
var slider;

Test
setUp: function(){
},
testSliderIsAPlugin: function(){
var test = function(){
$("slidable").slider();
};
assertNoException(test);
},

}
});

Code
var slider;

Test
setUp: function(){
},
testSliderIsAPlugin: function(){
var test = function(){
$("slidable").slider();
};
assertNoException(test);
},

}
});

Code
(function($){
$.fn.slider = function(){};
}(jQuery));

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

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

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

Website Solution

/
css
img
inc
scripts
.htaccess
index.php

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

<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



6. In The Wild

IN THE WILD

In the wild, there is no health care.
Dwight Schrute (the ofﬁce)

so? what is it about?

control & knowledge

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

LOOKING FORWARD

Javascript had several springs
buzzwords: DHTML before and Ajax after
big frameworks: from Prototype+Scriptaculous to jQuery
future: HTML5

LOOKING FORWARD

future: HTML5
on browser

LOOKING FORWARD

future: HTML5
on browser
then there’s a brand new world on server: node.js,
noSQL databases (couchdb, mongodb..)

LOOKING FORWARD

the further we look at,
the more control we need

LOOKING FORWARD

javascript is a programming language

LOOKING FORWARD


javascript is a serious business.

LOOKING FORWARD


javascript is a serious business.
and, most of all...

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

YOOX Launch & Learn - Javascript as a programming language

YOOX Launch & Learn - Javascript as a programming language

Recommended

More Related Content

What's hot (20)

Similar to YOOX Launch & Learn - Javascript as a programming language (20)

Recently uploaded (20)

YOOX Launch & Learn - Javascript as a programming language

Editor's Notes