Paris Web - Javascript as a programming language

Javascript As AProgramming Language

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

Hello, who’s speaking?

Hello, who’s speaking? Marco Cedaro @cedmax

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

Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com

Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com a conference organizer with From The Front

Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: a Frontend Developer at Spreaker.com a conference organizer with From The Front and a javascript pervert

Bologna, Italy

something in common with Robert Nyman

I believe I can ﬂy

I believe I can ﬂy Be brave. Take risks.Nothing can substitute experience. Paulo Coelho

once upon a time

once upon a timewe had no control

once upon a timewe had no control javascript was the land of the brave

once upon a timewe had no control javascript was the land of the brave we were fearless and unconscious

once upon a timewe had no control javascript was the land of the brave we were fearless and unconscious we were proud of being like that

just like them

kitty hawk

but life goes on

once upon a timeweb engineer had a very badopinion of us

but it wasnt fair

but it wasnt fairwe didnt have IDEs & tools they did

but it wasnt fairwe didnt have IDEs & tools they did actually it was our own fault

but it wasnt fairwe didnt have IDEs & tools they did actually it was our own fault we were not ready

but it wasnt fairwe didnt have IDEs & tools they did actually it was our own fault we were not ready and javascript was neither

but, again, life goes on...

...and on...

and on..

its not about the language itself

GREAT POWERS...

Frontend developershave to claim their rolein development roadmap and business strategy

Javascript is a serious business

how serious?

less bandwidth and server load loadingresources and content when needed something we can achieve

less bandwidth and performance boosts server load loading that can lead to betterresources and content conversion rates when needed something we can achieve

less bandwidth and performance boosts cross platform server load loading that can lead to better development: lessresources and content conversion rates maintenance costs when needed something we can achieve

less bandwidth and performance boosts cross platform server load loading that can lead to better development: lessresources and content conversion rates maintenance costs when needed money

how serious?

this serious

whats missing?

whats missing?If I had nine of my ﬁngersmissing I wouldnt type any slower. Mitch Hedberg

IDEs & Tools

the attitude

a strategy

The designer introduces a slider on some websites:”it’s cool on apple store”.The developer gets a jQuery plugin online the small web agency

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

The designer Oh damn! There’s no introduces a slider on Major release of the mouse wheel some 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 supportThe developer gets a jQuery 5 ﬁles in 5 different projects. or should they change the plugin online library by themself? the small web agency

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

The client-sidearchitecture has been built on the mostknown and supported framework 2006 the big corp

The client-side Everything seems to bearchitecture has been ﬁne, except that the built on the most well known frameworkknown and supported was being replaced by a framework powerful new one 2006 2008 - 2010 the big corp

The client-side Everything seems to be They were forced toarchitecture has been ﬁne, except that the change the whole built on the most well known framework codebase at once toknown and supported was being replaced by a reduce maintenance framework powerful new one and development costs 2006 2008 - 2010 2011 the big corp

here we are again

attitude, strategy...

...and foresight

WARNING!

continuous integration

continuous integration A software development practice where members of a team integrate their work frequently [...] to detect integration errors as quickly as possible. Martin Fowler

I Build So Consistently

I Build So Consistentlyidentify

I Build So Consistently write a build scriptidentify

I Build So Consistently write a build scriptidentify share

I Build So Consistently write a build scriptidentify make it share continuous

How can we take advantages from acontinuous integration process?

rationalize your workﬂow

deploy stable versions

Separate the codebase

unit test your code

basically

basically ie7

choose your tools

choose your toolsA man cannot be too carefulin the choice of his enemies Oscar Wilde

JS HI NT

a code quality tool

a code quality toollike Douglas Crockfords JSLint

a code quality toollike Douglas Crockfords JSLint but

a code quality toollike Douglas Crockfords JSLint but customizable

a tool for stupid?

S HI NTJ

R IV ER ST D TE TJS H IN JS

once upon a time

jsTestDriver

jsTestDriverworks from console

jsTestDriverworks from console runs a server

jsTestDriverworks from console runs a server opens browsers

jsTestDriverworks from console runs a server opens browsers runs test suites

jsTestDriverworks from console runs a server opens browsers runs test suites retrieves results in console

build server

how does testing works?

have you seen Lost?

how does it work?

write a test how does it work?

write a test let it fail how does it work?

write a test let it fail write the code how does it work?

write a test let it fail write the code run the test again how does it work?

write a test let it fail write the code run the test refactor again how does it work?

the environment

Its the browser, baby

Unit testing is supposed to test asingle atomic “unit” of functionality without dependencies on anything else The curious case of Javascript unit testing

Unit testing is This is where you start supposed to test a to run into serioussingle atomic “unit” of dependency problems functionality without due to the interrelation dependencies on with HTML and CSS anything else The curious case of Javascript unit testing

Unit testing is What do you test? This is where you start supposed to test a Usually how the user to run into serioussingle atomic “unit” of interface responds to dependency problems functionality without user input. due to the interrelation dependencies on Actually, the realm of with HTML and CSS anything else functional testing The curious case of Javascript unit testing

keep it real

keep it realTo all my homies working on the 9 to 5 Shaggy

#140bytes

I used to work with these guys

_$ = (function() { var registered = {}; return {! ! pub: function(event, memo) {! ! ! if (registered[event] instanceof Array){! ! ! ! var handlers = [].concat(registered[event]);! ! ! ! for (var i=0, h; (h = handlers[i]); i++){! ! ! ! ! h.call(this, memo);! ! ! ! }! ! ! }! ! },! ! sub: function(event, handler) {! ! ! if (typeof registered[event] === "undefined"){! ! ! ! registered[event] = [];! ! ! }! ! ! registered[event].push(handler);! ! } };})();

_$.sub("customEvent", function(obj) {! //DO STUFF});_$.pub("customEvent");_$.pub("customEvent", { prop : "value" });

_$ = (function (_) {! return {! ! pub: function(a, b, c, d) {! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)! ! },! ! sub: function(a, b) {! ! ! (_[a] || (_[a] = [])).push(b)! ! }! }})({})

_$ = (function (_) {! return {! ! pub: function(a, b, c, d) {! ! ! for (d=-1, c=[].concat(_[a]); c[++d];) c[d](b)! ! },! ! sub: function(a, b) {! ! ! (_[a] || (_[a] = [])).push(b)! ! } tes! }})({}) #140 by

[...] testPub: function(){! !! ! var a = 0;!! ! _$.sub(testNotify, function(){ a = 1; });! ! _$.pub(testNotify);! ! assertEquals(1, a);! },! ! !! testNotifyWithMemo: function(){!!! ! var a = 0 ;!! ! _$.sub(testNotify, function(memo){! ! ! ! a = memo.test;! ! });! ! _$.pub(testNotify, {test: 1});! ! assertEquals(1, a);! },[...]

[...] testPub: function(){! !! ! var a = 0;!! ! _$.sub(testNotify, function(){ a = 1; });! ! _$.pub(testNotify);! ! assertEquals(1, a);! },! ! !! testNotifyWithMemo: function(){!!! ! var a = 0 ;! ! _$.sub(testNotify, function(memo){! ! ! ! a = memo.test;! ! });! ! _$.pub(testNotify, {test: 1});! ! assertEquals(1, a);! },[...]

[...] testPub: function(){! !! ! var a = 0;!! ! _$.sub(testNotify, function(){ a = 1; });! ! _$.pub(testNotify);! ! assertEquals(1, a);! },! ! !! testNotifyWithMemo: function(){!!! ! var a = 0 ;!! ! _$.sub(testNotify, function(memo){! ! ! ! a = memo.test;! ! });! ! _$.pub(testNotify, {test: 1});! ! assertEquals(1, a);! },[...]

easy, uh?

you will, eventually

R IV ER ST D TE TJS H IN JS

.JS R ON I VE S IN D R ST TE TJS H IN JS

a mock library

SPIESa function that records arguments, returnvalue, the value of thisand exception thrown (if any) for all its calls. a mock library

SPIES STUBSa function that records functions (spies) with arguments, return pre-programmedvalue, the value of this behavior.and exception thrown (if any) for all its calls. a mock library

SPIES STUBS MOCKSa function that records functions (spies) with functions (spies) with arguments, return pre-programmed pre-programmedvalue, the value of this behavior. behavior (stubs) as welland exception thrown as pre-programmed (if any) for all its calls. expectations. a mock library

[...] testMyLibRegistersToSystemOnEvent: function(){! !! ! var spy = sinon.spy(_$, watch);!! ! //DO STUFF TO INIT YOUR LIB! ! assertTrue(spy.calledWith(SysyemOn));! },! ! !! testMyLibLoggedNotLogged: function(){!!! ! var stub = sinon.stub(User, isLogged);!! ! stub.returns(true);! ! //DO STUFF && ASSERTIONS! ! stub.returns(false);! ! //DO STUFF && ASSERTIONS! },[...]

SPY[...] testMyLibRegistersToSystemOnEvent: function(){! !! ! var spy = sinon.spy(_$, watch);!! ! //DO STUFF TO INIT YOUR LIB! ! assertTrue(spy.calledWith(SystemOn));! },! ! !! testMyLibLoggedNotLogged: function(){!!! ! var stub = sinon.stub(User, isLogged);!! ! stub.returns(true);! ! //DO STUFF && ASSERTIONS! ! stub.returns(false);! ! //DO STUFF && ASSERTIONS! },[...]

STUB[...] testMyLibRegistersToSystemOnEvent: function(){! !! ! var spy = sinon.spy(_$, watch);!! ! //DO STUFF TO INIT YOUR LIB! ! assertTrue(spy.calledWith(SystemOn));! },! ! !! testMyLibLoggedNotLogged: function(){!!! ! var stub = sinon.stub(User, isLogged);!! ! stub.returns(true);! ! //DO STUFF && ASSERTIONS! ! stub.returns(false);! ! //DO STUFF && ASSERTIONS! },[...]

MOCK[...] testMyLibRegistersToSystemOnEvent: function(){! !! ! var spy = sinon.spy(_$, watch);!! ! //DO STUFF TO INIT YOUR LIB! ! assertTrue(spy.calledWith(SystemOn));! },[...]

MOCK[...] //testMyLibRegistersToSystemOnEvent: function(){! !! ! //var spy = sinon.spy(_$, watch);!! ! //DO STUFF TO INIT YOUR LIB! ! //assertTrue(spy.calledWith(SysyemOn));! //},!! testMyLibRegistersToSystemOnEvent: function(){! !! ! var mock = sinon.mock(_$);! ! mock.expect(watch).calledWith(SysyemOn);! ! //DO STUFF TO INIT YOUR LIB! ! mock.verify();! },[...]

AJAX CALL[...] testOnSuccessCallback: function(){! ! var server = sinon.useFakeServer(); server.respondWith("GET", "/art/12/comments.json", [200, {"Content-Type":"application/json"}, "[{ id:12, text:Hello}]"]);! ! var spy = sinon.spy();! ! myLib.getCommentsFor("/art/12", spy);! ! server.respond();! ! assert(spy.calledWith([{ id:12, text:"Hello"}]));! },[...]

.JS R ON I VE S IN D R ST TE TJS H IN JS

E SS OR PR OM SY U I C .J S ON I VE R IN D R ST TE TJS H IN JS

Everyone should be happy

in the wild

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

drawbacksat the beginning

cost of change

LOOKING FORWARD

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

LOOKING FORWARD the further we look at, the more control we need lets get ready

LOOKING FORWARD the further we look at, the more control we need lets get readyjavascript is a programming language

LOOKING FORWARD the further we look at, the more control we need lets get ready javascript is a programming languagejavascript is a serious business.

LOOKING FORWARD the further we look at, the more control we need lets get ready javascript is a programming languagejavascript is a serious business. and, most of all...

javascript kicks asses

javascript kicks asses any question? http://spkr8.com/t/8718 http://cedmax.com @cedmax

http://oseox.fr	972
http://www.paris-web.fr	284
http://www.franksworld.com	168
http://blog.johanbleuzen.fr	108
http://www.netvibes.com	80
http://tyndallseptic.marknetdev.com	71
http://localhost	39
http://lanyrd.com	31
http://paper.li	29
http://franksworld.com	28
http://feeds.feedburner.com	24
http://tyseo.blogspot.com	20
http://a0.twimg.com	11
http://dmo4.witology.com	7
http://www.linkedin.com	3
http://founders.dev	2
http://www.techgig.com	2
http://christophebenoit.com	2
http://us-w1.rockmelt.com	1
http://thetableteer.com	1
http://www.thetableteer.com	1
http://translate.googleusercontent.com	1
http://www.absolvent.pl	1
http://twitter.com	1
http://www.slideshare.net	1

Paris Web - Javascript as a programming language

by Marco Cedaro

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 1,888

Statistics

Paris Web - Javascript as a programming language Presentation Transcript