Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript as a programming language - Yoox Launch & Learn

Javascript as a programming language - Yoox Launch & Learn

Versioning, Test Driven Development and Continuous Integration: how to setup up a stable javascript continuous integration environment and why you need it. Through a real life example, it explains all the benefits of having real control over javascript codebase and analyses developer and webapps needs and the tools that fit those requirements.

Yoox, Launch & Learn (Bologna, July 2011)
@cedmax
http://cedmax.com

3ca63d4e2f2be0ef47b841e63b564d18?s=128

Marco Cedaro

July 18, 2011
Tweet

Transcript

  1. Javascript As A Programming Language domenica 2 ottobre 11

  2. Javascript As A Programming Language Versioning, Test Driven Development &

    Continuous Integration IS domenica 2 ottobre 11
  3. Hello, who’s speaking? domenica 2 ottobre 11

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

  5. They said I am a... Frontend Cowboy Nicola Vitto Hello,

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

    Pervert Roberto Felter Hello, who’s speaking? Marco Cedaro @cedmax domenica 2 ottobre 11
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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 <script> just before the end of the </body> REAL DISCLAIMER domenica 2 ottobre 11
  15. 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
  16. 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
  17. 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
  18. 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
  19. Javascript is a serious business domenica 2 ottobre 11

  20. What's relying on javascript? domenica 2 ottobre 11

  21. What's relying on javascript? performance ↓ user experience ↓ conversion

    ↓ money domenica 2 ottobre 11
  22. What's relying on javascript? domenica 2 ottobre 11

  23. What's relying on javascript? ajax interaction ↓ less bandwith &

    server load ↓ less infractucture costs ↓ money domenica 2 ottobre 11
  24. What's relying on javascript? domenica 2 ottobre 11

  25. What's relying on javascript? cross platform animation ↓ less tecnologies

    ↓ less code duplication ↓ money domenica 2 ottobre 11
  26. 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
  27. 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
  28. YOU NEED A STRATEGY What's the use of running if

    you are not on the right road German proverb domenica 2 ottobre 11
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. Am I the only one or there’s something wrong? domenica

    2 ottobre 11
  36. 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
  37. 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
  38. 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
  39. 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
  40. I Build So Consistently domenica 2 ottobre 11

  41. I Build So Consistently identify domenica 2 ottobre 11

  42. I Build So Consistently identify build domenica 2 ottobre 11

  43. I Build So Consistently identify build share domenica 2 ottobre

    11
  44. I Build So Consistently identify build share make it continuous

    domenica 2 ottobre 11
  45. How does this fit our needs? domenica 2 ottobre 11

  46. 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
  47. 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
  48. 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
  49. Unit & Functional an overview domenica 2 ottobre 11

  50. 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
  51. 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
  52. Test Driven Development domenica 2 ottobre 11

  53. You will, eventually.. domenica 2 ottobre 11

  54. Everyone should be happy domenica 2 ottobre 11

  55. 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
  56. 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
  57. 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
  58. CHOOSE YOUR TOOLS A man cannot be too careful in

    the choice of his enemies Oscar Wilde domenica 2 ottobre 11
  59. 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
  60. 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
  61. 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
  62. ANT - Alternatives It's plenty of valuable Ant alternatives. Choose

    the one that fits better your needs domenica 2 ottobre 11
  63. DEPENDENCY RESOLVER Websites: Code Base: UNIT TEST RUNNER domenica 2

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

    ottobre 11
  65. 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
  66. 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
  67. Pitfalls? testing asynchronous execution is a mess domenica 2 ottobre

    11
  68. 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
  69. 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
  70. DEPENDENCY RESOLVER Websites: Code Base: JS TEST DRIVER domenica 2

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

    ottobre 11
  72. 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
  73. 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
  74. 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
  75. 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
  76. THE ENVIRONMENT I like boring things Andy Warhol domenica 2

    ottobre 11
  77. Javascript Repository domenica 2 ottobre 11

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

    ottobre 11
  79. / dist libs src tools build.xml Javascript Repository /tools/ jslint

    JsTestDriver-1.3.1 domenica 2 ottobre 11
  80. / 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
  81. /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
  82. /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
  83. 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
  84. Let's code domenica 2 ottobre 11

  85. var test = new TestCase("Slider.test", { setUp: function(){ }, tearDown:

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

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

    <ul id="foo"><li></li><li></li></ul> */ }, tearDown: function(){ } }); Test Code var slider; testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11
  88. JS Test Driver in action domenica 2 ottobre 11

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

    <ul id="foo"><li></li><li></li></ul> */ }, tearDown: function(){ } }); Test Code var slider; testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11
  90. var test = new TestCase("Slider.test", { setUp: function(){ /*:DOC +=

    <ul id="foo"><li></li><li></li></ul> */ }, tearDown: function(){ } }); Test Code (function($){ $.fn.slider = function(){}; }(jQuery)); testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11
  91. JS Test Driver in action domenica 2 ottobre 11

  92. /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
  93. /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
  94. 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
  95. 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
  96. Website Solution domenica 2 ottobre 11

  97. / css img inc scripts .htaccess index.php Website Solution domenica

    2 ottobre 11
  98. /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
  99. /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
  100. <ivysettings> <settings defaultResolver="JSResolver"/> <resolvers> <url name="JSResolver" checkmodified="true"> <artifact ! !

    ! ! pattern="//jsRepo/dist/[module]-[revision]/[module].js" ! ! ! /> </url> </resolvers> <caches ! ! defaultCacheDir="${basedir}/.artifacts" ! ! artifactPattern="[organization]/[module]-[revision].js" ! /> ! ! <property ! ! name="ivy.artifactproperty.name" ! ! value="[organization].[module]" ! /> <property ! ! name="ivy.artifactproperty.value" ! ! value="[organization]/[module]-[revision].js" ! /> </ivysettings> domenica 2 ottobre 11
  101. <ivysettings> <settings defaultResolver="JSResolver"/> <resolvers> <url name="JSResolver" checkmodified="true"> <artifact ! !

    ! ! pattern="//jsRepo/dist/[module]-[revision]/[module].js" ! ! ! /> </url> </resolvers> <caches ! ! defaultCacheDir="${basedir}/.artifacts" ! ! artifactPattern="[organization]/[module]-[revision].js" ! /> ! ! <property ! ! name="ivy.artifactproperty.name" ! ! value="[organization].[module]" ! /> <property ! ! name="ivy.artifactproperty.value" ! ! value="[organization]/[module]-[revision].js" ! /> </ivysettings> domenica 2 ottobre 11
  102. <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 domenica 2 ottobre 11
  103. <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 domenica 2 ottobre 11
  104. 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
  105. 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
  106. IN THE WILD In the wild, there is no health

    care. Dwight Schrute (the office) domenica 2 ottobre 11
  107. so? what is it about? control & knowledge domenica 2

    ottobre 11
  108. 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
  109. 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
  110. 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
  111. 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
  112. 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
  113. the further we look at, the more control we need

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

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

    LOOKING FORWARD javascript is a programming language domenica 2 ottobre 11
  116. 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
  117. 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
  118. javascript kicks asses domenica 2 ottobre 11

  119. javascript is money domenica 2 ottobre 11

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

  121. One last word.. domenica 2 ottobre 11

  122. domenica 2 ottobre 11