Javascript as a programming language - jsDay

Slide 1

Slide 1 text

Javascript As A Programming Language domenica 2 ottobre 11

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Hello, who’s speaking? domenica 2 ottobre 11

Slide 4

Slide 4 text

Hello, who’s speaking? Marco Cedaro @cedmax domenica 2 ottobre 11

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 domenica 2 ottobre 11

Slide 8

Slide 8 text

Actually I am: Platform Software Developer at Yoox Group, currently in charge of js architecture development Hello, who’s speaking? Marco Cedaro @cedmax domenica 2 ottobre 11

Slide 9

Slide 9 text

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 domenica 2 ottobre 11

Slide 10

Slide 10 text

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 Hello, who’s speaking? Marco Cedaro @cedmax domenica 2 ottobre 11

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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 domenica 2 ottobre 11

Slide 14

Slide 14 text

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 just before the end of the </body> REAL DISCLAIMER domenica 2 ottobre 11

Slide 15

Slide 15 text

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 domenica 2 ottobre 11

Slide 16

Slide 16 text

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 The right tool in wrong hands domenica 2 ottobre 11

Slide 17

Slide 17 text

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 domenica 2 ottobre 11

Slide 18

Slide 18 text

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... domenica 2 ottobre 11

Slide 19

Slide 19 text

Javascript is a serious business domenica 2 ottobre 11

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

YOU NEED A STRATEGY What's the use of running if you are not on the right road German proverb domenica 2 ottobre 11

Slide 23

Slide 23 text

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. YOU NEED A STRATEGY domenica 2 ottobre 11

Slide 24

Slide 24 text

How many people code? It doesn’t really matter if you are working at facebook, soundcloud or by yourself in a small ofﬁce. domenica 2 ottobre 11

Slide 25

Slide 25 text

A real life example Small Web Agency 1 designer, 2 developers and a lot of small website with low maintenance rate. domenica 2 ottobre 11

Slide 26

Slide 26 text

a SLIDER’s Story The designer introduces a slider on 5 websites: ”it’s cool on apple store”. The developer gets a jQuery plugin online domenica 2 ottobre 11

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Am I the only one or there’s something wrong? domenica 2 ottobre 11

Slide 30

Slide 30 text

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 domenica 2 ottobre 11

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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 domenica 2 ottobre 11

Slide 34

Slide 34 text

I Build So Consistently domenica 2 ottobre 11

Slide 35

Slide 35 text

I Build So Consistently identify domenica 2 ottobre 11

Slide 36

Slide 36 text

I Build So Consistently identify build domenica 2 ottobre 11

Slide 37

Slide 37 text

I Build So Consistently identify build share domenica 2 ottobre 11

Slide 38

Slide 38 text

I Build So Consistently identify build share make it continuous domenica 2 ottobre 11

Slide 39

Slide 39 text

How does this ﬁt our needs? domenica 2 ottobre 11

Slide 40

Slide 40 text

codebase just in one place setup an isolated repository for reused libraries share the code through a CI process resolve dependency on websites domenica 2 ottobre 11

Slide 41

Slide 41 text

continue development without regression validate the code run unit test against errors (both coding and logic) version the shared code against interface changes domenica 2 ottobre 11

Slide 42

Slide 42 text

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 domenica 2 ottobre 11

Slide 43

Slide 43 text

Unit & Functional an overview domenica 2 ottobre 11

Slide 44

Slide 44 text

Unit & Functional an overview domenica 2 ottobre 11

Slide 45

Slide 45 text

Unit & Functional an overview domenica 2 ottobre 11

Slide 46

Slide 46 text

Unit & Functional an overview domenica 2 ottobre 11

Slide 47

Slide 47 text

Unit & Functional an overview is it red? is it made to ﬁt well other block? is it a 4x2 block? is the roof red? is there a porch? is there a door? domenica 2 ottobre 11

Slide 48

Slide 48 text

Unit vs Functional test cross browser test interaction between libraries control over codebase consistency against external changes execution time test integration domenica 2 ottobre 11

Slide 49

Slide 49 text

Test Driven Development domenica 2 ottobre 11

Slide 50

Slide 50 text

You will, eventually.. domenica 2 ottobre 11

Slide 51

Slide 51 text

Everyone should be happy domenica 2 ottobre 11

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

CHOOSE YOUR TOOLS A man cannot be too careful in the choice of his enemies Oscar Wilde domenica 2 ottobre 11

Slide 56

Slide 56 text

Another Neat Tool Simply saying the documentation sucks doesn't do any good Larry V. Streepy - Ant Mailing List 06.06.2001 domenica 2 ottobre 11

Slide 57

Slide 57 text

Another Neat Tool He was right: 10 years later ANT documentation still sucks but ANT is a solid choice in build automation conﬁguration. Simply saying the documentation sucks doesn't do any good Larry V. Streepy - Ant Mailing List 06.06.2001 domenica 2 ottobre 11

Slide 58

Slide 58 text

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 domenica 2 ottobre 11

Slide 59

Slide 59 text

ANT - Alternatives There are a lot of valuable Ant alternatives. Choose the one that ﬁts better your needs domenica 2 ottobre 11

Slide 60

Slide 60 text

CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: CODE QUALITY VALIDATOR UNIT TEST RUNNER domenica 2 ottobre 11

Slide 61

Slide 61 text

CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: JSLINT JS TEST DRIVER domenica 2 ottobre 11

Slide 62

Slide 62 text

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 domenica 2 ottobre 11

Slide 63

Slide 63 text

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 domenica 2 ottobre 11

Slide 64

Slide 64 text

How does it work? It runs a server opens browsers runs test suites retrieves results on the console creates a JUnit report domenica 2 ottobre 11

Slide 65

Slide 65 text

Pitfalls? testing asynchronous execution is a mess domenica 2 ottobre 11

Slide 66

Slide 66 text

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 domenica 2 ottobre 11

Slide 67

Slide 67 text

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 domenica 2 ottobre 11

Slide 68

Slide 68 text

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 domenica 2 ottobre 11

Slide 69

Slide 69 text

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 domenica 2 ottobre 11

Slide 70

Slide 70 text

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) domenica 2 ottobre 11

Slide 71

Slide 71 text

CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: JS TEST DRIVER JSLINT domenica 2 ottobre 11

Slide 72

Slide 72 text

YUI COMPRESSOR APACHE IVY Websites: Code Base: JS TEST DRIVER JSLINT domenica 2 ottobre 11

Slide 73

Slide 73 text

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. domenica 2 ottobre 11

Slide 74

Slide 74 text

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 domenica 2 ottobre 11

Slide 75

Slide 75 text

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 domenica 2 ottobre 11

Slide 76

Slide 76 text

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 domenica 2 ottobre 11

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

THE ENVIRONMENT I like boring things Andy Warhol domenica 2 ottobre 11

Slide 80

Slide 80 text

Javascript Repository domenica 2 ottobre 11

Slide 81

Slide 81 text

/ dist libs src tools build.xml Javascript Repository domenica 2 ottobre 11

Slide 82

Slide 82 text

/ dist libs src tools build.xml Javascript Repository /tools/ jslint JsTestDriver-1.3.1 domenica 2 ottobre 11

Slide 83

Slide 83 text

/ dist libs src tools build.xml Javascript Repository /tools/ jslint JsTestDriver-1.3.1 /src/ form-validator slider src slider.js test slider.test.js jsTestDriver.conf version.prop twitter-widget ... domenica 2 ottobre 11

Slide 84

Slide 84 text

/libs/ jquery-1.5.1.min.js sinon-1.0.0.js / dist libs src tools build.xml Javascript Repository /tools/ jslint JsTestDriver-1.3.1 /src/ form-validator slider src slider.js test slider.test.js jsTestDriver.conf version.prop twitter-widget ... domenica 2 ottobre 11

Slide 85

Slide 85 text

Slide 86

Slide 86 text

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 domenica 2 ottobre 11

Slide 87

Slide 87 text

Let's code domenica 2 ottobre 11

Slide 88

Slide 88 text

var test = new TestCase("Slider.test", { setUp: function(){ }, tearDown: function(){ } }); Test Code var slider; domenica 2 ottobre 11

Slide 89

Slide 89 text

var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC +=

*/ }, tearDown: function(){ } }); Test Code var slider; domenica 2 ottobre 11

Slide 90

Slide 90 text

var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC +=

*/ }, tearDown: function(){ } }); Test Code var slider; testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11

Slide 91

Slide 91 text

JS Test Driver in action domenica 2 ottobre 11

Slide 92

Slide 92 text

var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC +=

*/ }, tearDown: function(){ } }); Test Code var slider; testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11

Slide 93

Slide 93 text

var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC +=

*/ }, tearDown: function(){ } }); Test Code (function($){ $.fn.slider = function(){}; }(jQuery)); testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11

Slide 94

Slide 94 text

JS Test Driver in action domenica 2 ottobre 11

Slide 95

Slide 95 text

Slide 96

Slide 96 text

/libs/ jquery-1.5.1.min.js sinon-1.0.0.js / dist libs src tools build.xml Javascript Repository /tools/ jslint JsTestDriver-1.3.1 /dist/ form-validator-1.0.0 form-validator-1.1.0 slider-1.0.0 slider.min.js twitter-widget-1.0.0 twitter-widget-1.0.1 twitter-widget-2.0.0 ... /src/ form-validator slider src slider.js test slider.test.js jsTestDriver.conf version.prop twitter-widget ... domenica 2 ottobre 11

Slide 97

Slide 97 text

Website Solution domenica 2 ottobre 11

Slide 98

Slide 98 text

/ css img inc scripts .htaccess index.php Website Solution domenica 2 ottobre 11

Slide 99

Slide 99 text

/scripts/ public src tools apache-ivy-2.2.0 yui-compressor-2.4.6 ivy-settings.xml mywebapp.xml ivy.xml / css img inc scripts .htaccess index.php Website Solution domenica 2 ottobre 11

Slide 100

Slide 100 text

/scripts/ public src tools apache-ivy-2.2.0 yui-compressor-2.4.6 ivy-settings.xml mywebapp.xml ivy.xml / css img inc scripts .htaccess index.php Website Solution domenica 2 ottobre 11

Slide 101

Slide 101 text

! ! domenica 2 ottobre 11

Slide 102

Slide 102 text

ivy.xml domenica 2 ottobre 11

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

IN THE WILD In the wild, there is no health care. Dwight Schrute (the ofﬁce) domenica 2 ottobre 11

Slide 106

Slide 106 text

what is it about? control & knowledge domenica 2 ottobre 11

Slide 107

Slide 107 text

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 domenica 2 ottobre 11

Slide 108

Slide 108 text

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 domenica 2 ottobre 11

Slide 109

Slide 109 text

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 domenica 2 ottobre 11

Slide 110

Slide 110 text

on browser 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 domenica 2 ottobre 11

Slide 111

Slide 111 text

on browser then there’s a brand new world on server: node.js, noSQL databases (couchdb, mongodb..) 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 domenica 2 ottobre 11

Slide 112

Slide 112 text

the further we look at, the more control we need LOOKING FORWARD domenica 2 ottobre 11

Slide 113

Slide 113 text

the further we look at, the more control we need LOOKING FORWARD domenica 2 ottobre 11

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

the further we look at, the more control we need LOOKING FORWARD javascript is a programming language javascript is a serious business. and, most of all... domenica 2 ottobre 11

Slide 117

Slide 117 text

javascript kicks asses domenica 2 ottobre 11

Slide 118

Slide 118 text

marco@fromthefront.it https://github.com/cedmax @cedmax domenica 2 ottobre 11

Slide 119

Slide 119 text

One last word.. domenica 2 ottobre 11

Slide 120

Slide 120 text

domenica 2 ottobre 11

Slide 121

Slide 121 text

Massimiliano Davoli Alberto Brandolini Francesco Fullone Luca Lischetti Rocco Curcio Matteo Gazziola domenica 2 ottobre 11