Tweet
Tweet

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

Slide 10

Slide 10 text

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 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 find 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 first 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 Front end developers have to claim their 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

What's relying on javascript? domenica 2 ottobre 11

Slide 21

Slide 21 text

What's relying on javascript? performance ↓ user experience ↓ conversion ↓ money domenica 2 ottobre 11

Slide 22

Slide 22 text

What's relying on javascript? domenica 2 ottobre 11

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

What's relying on javascript? domenica 2 ottobre 11

Slide 25

Slide 25 text

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

Slide 26

Slide 26 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 27

Slide 27 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 28

Slide 28 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 29

Slide 29 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 30

Slide 30 text

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

Slide 31

Slide 31 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 32

Slide 32 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 33

Slide 33 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 fix has been released, they have to change 5 files in 5 different projects. domenica 2 ottobre 11

Slide 34

Slide 34 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 fix has been released, they have to change 5 files in 5 different projects. Oh damn! There’s no mouse wheel integration! should they ask for support or should they change the library by themself? domenica 2 ottobre 11

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Just a spoonful of sugar... manage codebase just in one place continue development without regression use stable versions of our libraries domenica 2 ottobre 11

Slide 37

Slide 37 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 38

Slide 38 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 39

Slide 39 text

Continuous Integration A software development practice where members of a team integrate their work frequently. Each integration is verified 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 40

Slide 40 text

I Build So Consistently domenica 2 ottobre 11

Slide 41

Slide 41 text

I Build So Consistently identify domenica 2 ottobre 11

Slide 42

Slide 42 text

I Build So Consistently identify build domenica 2 ottobre 11

Slide 43

Slide 43 text

I Build So Consistently identify build share domenica 2 ottobre 11

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

How does this fit our needs? domenica 2 ottobre 11

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

stable versions use a declared semantic versioning use a file 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 49

Slide 49 text

Unit & Functional an overview domenica 2 ottobre 11

Slide 50

Slide 50 text

Unit & Functional an overview is it red? is it made to fit 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 51

Slide 51 text

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

Slide 52

Slide 52 text

Test Driven Development domenica 2 ottobre 11

Slide 53

Slide 53 text

You will, eventually.. domenica 2 ottobre 11

Slide 54

Slide 54 text

Everyone should be happy domenica 2 ottobre 11

Slide 55

Slide 55 text

an advice 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 56

Slide 56 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 57

Slide 57 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 58

Slide 58 text

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

Slide 59

Slide 59 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 60

Slide 60 text

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

Slide 61

Slide 61 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 62

Slide 62 text

ANT - Alternatives It's plenty of valuable Ant alternatives. Choose the one that fits better your needs domenica 2 ottobre 11

Slide 63

Slide 63 text

DEPENDENCY RESOLVER Websites: Code Base: UNIT TEST RUNNER domenica 2 ottobre 11

Slide 64

Slide 64 text

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

Slide 65

Slide 65 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 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 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 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 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 file system based versioning. domenica 2 ottobre 11

Slide 73

Slide 73 text

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

Slide 74

Slide 74 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 75

Slide 75 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 76

Slide 76 text

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

Slide 77

Slide 77 text

Javascript Repository domenica 2 ottobre 11

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 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 81

Slide 81 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 82

Slide 82 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 83

Slide 83 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 84

Slide 84 text

Let's code domenica 2 ottobre 11

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 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 88

Slide 88 text

JS Test Driver in action domenica 2 ottobre 11

Slide 89

Slide 89 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 90

Slide 90 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 91

Slide 91 text

JS Test Driver in action domenica 2 ottobre 11

Slide 92

Slide 92 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 93

Slide 93 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 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Website Solution domenica 2 ottobre 11

Slide 97

Slide 97 text

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

Slide 98

Slide 98 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 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

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

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

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 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 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. 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 1 2 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 LOOKING FORWARD domenica 2 ottobre 11

Slide 110

Slide 110 text

Javascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5 LOOKING FORWARD domenica 2 ottobre 11

Slide 111

Slide 111 text

on browser Javascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5 LOOKING FORWARD domenica 2 ottobre 11

Slide 112

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

Slide 117

Slide 117 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 118

Slide 118 text

javascript kicks asses domenica 2 ottobre 11

Slide 119

Slide 119 text

javascript is money domenica 2 ottobre 11

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

One last word.. domenica 2 ottobre 11

Slide 122

Slide 122 text

domenica 2 ottobre 11