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

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

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

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

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

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

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

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

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

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

1. Disclaimer 2. You Need a Strategy 3. Continuous Integration 4. Choose Your Tools 5. The Environment 6. In The Wild 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

I Build So Consistently build identify

I Build So Consistently build identify share

I Build So Consistently build identify share make it continuous

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

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

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

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

THE ENVIRONMENT I like boring things Andy Warhol

Javascript Repository / dist libs src tools build.xml

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

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

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

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 var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC += <ul id="foo"><li></li><li></li></ul> */ }, tearDown: function(){ } }); Code var slider;

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;

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

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

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

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

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 Javascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5 on browser

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

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

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

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

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

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

YOOX Launch & Learn - Javascript as a programming language

YOOX Launch & Learn - Javascript as a programming language

More Related Content

What's hot

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

Recently uploaded

YOOX Launch & Learn - Javascript as a programming language

Editor's Notes