jsDay - Javascript as a programming language

Javascript As A Programming Language

IS Javascript As A Programming Language Versioning, Test Driven Development & Continuous Integration http://joind.in/3354

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: Platform Software Developer at Yoox Group, currently in charge of js architecture development

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

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

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 we have to claim our role in development roadmap and business strategy, because...

Javascript is a serious business

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

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 reused libraries share the code through a CI process resolve dependency on websites

continue development without regression validate the code run unit test 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 control test cross interaction against execution test over browser between external time integration codebase libraries changes

KISS 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 There are a lot of valuable Ant alternatives. Choose the one that ﬁts better your needs

Code Base: CODE QUALITY VALIDATOR UNIT TEST RUNNER Websites: DEPENDENCY RESOLVER CODE MINIFIER

Code Base: JSLINT JS TEST DRIVER Websites: DEPENDENCY RESOLVER CODE MINIFIER

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

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 JUnit report

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

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

JS Test Driver - Alternatives #3 TestSwarm It is a John Resig’s project of Distributed Continuous Integration released in 2009 as an ofﬁcial 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

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)

Code Base: JSLINT JS TEST DRIVER Websites: APACHE IVY YUI COMPRESSOR

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: the other solutions I’ve found drove me nuts

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

Yui Compressor Alternatives Packer is quite powerful in terms of ﬁlesize, 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

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

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)

what is it about? control & knowledge

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

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

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

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

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

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

Massimiliano Davoli Alberto Brandolini Francesco Fullone Luca Lischetti Rocco Curcio Matteo Gazziola

jsDay - Javascript as a programming language

More Related Content

What's hot

Similar to jsDay - Javascript as a programming language

Recently uploaded

jsDay - Javascript as a programming language

Editor's Notes