YOOX Launch & Learn - Javascript as a programming language

1,650
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,650
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • YOOX Launch & Learn - Javascript as a programming language

    1. 1. Javascript As AProgramming Language
    2. 2. IS Javascript As AProgramming LanguageVersioning, Test Driven Development & Continuous Integration
    3. 3. Hello, who’s speaking?
    4. 4. Hello, who’s speaking? Marco Cedaro @cedmax
    5. 5. Hello, who’s speaking? Marco Cedaro @cedmax They said I am a... Frontend Cowboy Nicola Vitto
    6. 6. Hello, who’s speaking? Marco Cedaro @cedmax They said I am a... Frontend Cowboy Nicola Vitto Javascript Pervert Roberto Felter
    7. 7. 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
    8. 8. Hello, who’s speaking? Marco Cedaro @cedmax Actually I am: still a Platform Software Developer at Yoox Group, currently in charge of js architecture development
    9. 9. Hello, who’s speaking? Marco Cedaro @cedmax 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
    10. 10. Hello, who’s speaking? Marco Cedaro @cedmax 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
    11. 11. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 1. Disclaimer
    12. 12. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 1. Disclaimer
    13. 13. DISCLAIMERAlways code as if the guy who ends upmaintaining your code will be a violentpsychopath who knows where you live Martin Golding
    14. 14. REAL DISCLAIMERJavascript 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>
    15. 15. Not jQuery’s faultjQuery is extremely powerfulbut...WITH GREAT POWER THEREMUST ALSO COME - - GREATRESPONSABILITY! ** original sentence from 1962 first spiderman story
    16. 16. 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
    17. 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
    18. 18. is it about simplicity?it isnt 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...
    19. 19. Javascript is a serious business
    20. 20. Whats relyingon javascript?
    21. 21. Whats relyingon javascript? performance ↓ user experience ↓ conversion ↓ money
    22. 22. Whats relyingon javascript?
    23. 23. Whats relyingon javascript? ajax interaction ↓less bandwith & server load ↓ less infractucture costs ↓ money
    24. 24. Whats relyingon javascript?
    25. 25. Whats relyingon javascript? cross platform animation ↓ less tecnologies ↓ less code duplication ↓ money
    26. 26. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 2.You Need a Strategy
    27. 27. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 2.You Need a Strategy
    28. 28. YOU NEED A STRATEGY Whats the use of running if you are not on the right road German proverb
    29. 29. 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.
    30. 30. It doesn’t really matter if you are working at facebook, soundcloud or by yourself in a small office. How many people code?
    31. 31. A real life example Small Web Agency 1 designer, 2 developers and a lot of small website with low maintenance rate.
    32. 32. The designerintroduces a slider on 5 websites:”it’s cool on apple store”.The developer gets a jQuery plugin online a SLIDER’s Story
    33. 33. The designerintroduces a slider on 5 Major release of the websites: most used browser.”it’s cool on apple store”. A small fix has been released, they have to changeThe developer gets a jQuery 5 files in 5 different projects. plugin online a SLIDER’s Story
    34. 34. The designer Oh damn! There’s nointroduces a slider on 5 Major release of the mouse wheel websites: most used browser. integration!”it’s cool on apple store”. A small fix has been released, they have to change should they ask for supportThe developer gets a jQuery 5 files in 5 different projects. or should they change the plugin online library by themself? a SLIDER’s Story
    35. 35. Am I the only one orthere’s something wrong?
    36. 36. Just a spoonful of sugar... manage codebase just in one place continue development without regression use stable versions of our libraries
    37. 37. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 3. Continuous Integration
    38. 38. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 3. Continuous Integration
    39. 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
    40. 40. I Build So Consistently
    41. 41. I Build So Consistentlyidentify
    42. 42. I Build So Consistently buildidentify
    43. 43. I Build So Consistently buildidentify share
    44. 44. I Build So Consistently buildidentify share make it continuous
    45. 45. How does this fit our needs?
    46. 46. codebase just in one place setup an isolated repository for reusable libraries share the code through a CI process resolve dependency on websites
    47. 47. continue development without regressionvalidate the coderun tests against errors (both coding and logic)version the shared code against interface changes
    48. 48. stable versionsuse a declared semantic versioninguse a file system based pattern: //jsRepo/dist/yourscript-1.0.0/yourscript.js //jsRepo/dist/yourscript-1.0.0.jsnever modify already released versions increase version number instead
    49. 49. Unit & Functional an overview
    50. 50. Unit & Functional an overview is it red? is it a 4x2 block? is the roof red? is it made to fit is there a porch?well other block? is there a door?
    51. 51. Unit vs Functional test consistencytest cross interaction control against execution test browser between over external time integration issues different codebase changes libraries
    52. 52. Test Driven Development
    53. 53. You will, eventually..
    54. 54. Everyone should be happy
    55. 55. an advice Keep it Simple & SmartDon’t over-engineer it: you will eventually regret everysingle useless complexity you will introduce
    56. 56. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 4. Choose Your Tools
    57. 57. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 4. Choose Your Tools
    58. 58. CHOOSE YOUR TOOLS A man cannot be too careful in the choice of his enemies Oscar Wilde
    59. 59. Another Neat ToolSimply saying the documentation sucks doesnt do any good Larry V. Streepy - Ant Mailing List 06.06.2001
    60. 60. Another Neat ToolSimply saying the documentation sucks doesnt do any good Larry V. Streepy - Ant Mailing List 06.06.2001He was right: 10 years later ANT documentation still sucks but ANT is a solidchoice in build automation configuration.
    61. 61. ANTXML driven: simple and straightforwarda standardthere are a lot of implementations and plugins every tool in this presentation is easily capable to be used in Ant build process
    62. 62. ANT - AlternativesIts plenty of valuable Ant alternatives. Choose the one that fits better your needs
    63. 63. Code Base: UNIT TEST RUNNERWebsites: DEPENDENCY RESOLVER
    64. 64. Code Base: JS TEST DRIVERWebsites: DEPENDENCY RESOLVER
    65. 65. JS Test DriverJs Test Driver is the most complete javascript unit test runneravailable 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
    66. 66. How does it work?It runs a serveropens browsersruns test suitesretrieves results on the consolecreates a report in JUnit format
    67. 67. Pitfalls?testing asynchronous execution is a mess
    68. 68. Sinon.jsa 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
    69. 69. JS Test Driver - AlternativesEnv.JSa javascript DOM implementation in javascript engines: it ispossible to fake browser execution and run unit tests.Yetiit stands for Yahoo Easy Test Interface and it is a very promisingunit test runner, potentially the most suitable alternative.
    70. 70. Code Base: JS TEST DRIVERWebsites: DEPENDENCY RESOLVER
    71. 71. Code Base: JS TEST DRIVERWebsites: APACHE IVY
    72. 72. Apache IvyIvy is a simple, powerful and well documented dependencymanagerIt has a full integration in ANT build systemand, again, it’s really simple, especially if you keep a file systembased versioning.
    73. 73. Ivy AlternativesIs there any alternative? I haven’t found anything simple enough to compete with Ivy straightforwardness: other solutions (ie. maven) drove me nuts
    74. 74. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 5. The Environment
    75. 75. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 5. The Environment
    76. 76. THE ENVIRONMENT I like boring things Andy Warhol
    77. 77. Javascript Repository
    78. 78. Javascript Repository/ dist libs src tools build.xml
    79. 79. Javascript Repository/ dist libs src tools build.xml /tools/ jslint JsTestDriver-1.3.1
    80. 80. 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 ...
    81. 81. 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 ...
    82. 82. 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 ...
    83. 83. basepath: ../..server: http://127.0.0.1:9876load: - 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
    84. 84. Lets code
    85. 85. Testvar test = new TestCase("Slider.test", { setUp: function(){ }, tearDown: function(){ }}); Codevar slider;
    86. 86. Testvar test = new TestCase("Slider.test", { setUp: function(){ /*:DOC += <ul id="foo"><li></li><li></li></ul> */ }, tearDown: function(){ }}); Codevar slider;
    87. 87. Testvar 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(){ }}); Codevar slider;
    88. 88. JS Test Driver in action
    89. 89. Testvar 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(){ }}); Codevar slider;
    90. 90. Testvar 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));
    91. 91. JS Test Driver in action
    92. 92. 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 ...
    93. 93. 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 ...
    94. 94. Test Ajax Callvar 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(); }});
    95. 95. Test Ajax Timeoutvar 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(); }});
    96. 96. Website Solution
    97. 97. Website Solution/ css img inc scripts .htaccess index.php
    98. 98. 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
    99. 99. 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
    100. 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>
    101. 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>
    102. 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
    103. 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
    104. 104. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 6. In The Wild
    105. 105. 1. Disclaimer 2. You Need a Strategy 3. Continuous Integration4. Choose Your Tools 5. The Environment 6. In The Wild 6. In The Wild
    106. 106. IN THE WILDIn the wild, there is no health care. Dwight Schrute (the office)
    107. 107. so? what is it about? control & knowledge
    108. 108. Inversion of control freakness 1 2 I am not a control freak.Gain control and then leave to themachine 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 techniques2) actually I am
    109. 109. LOOKING FORWARDJavascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5
    110. 110. LOOKING FORWARDJavascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5
    111. 111. LOOKING FORWARDJavascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5on browser
    112. 112. LOOKING FORWARDJavascript had several springs buzzwords: DHTML before and Ajax after big frameworks: from Prototype+Scriptaculous to jQuery future: HTML5on browser then there’s a brand new world on server: node.js, noSQL databases (couchdb, mongodb..)
    113. 113. LOOKING FORWARD the further we look at, the more control we need
    114. 114. LOOKING FORWARD the further we look at, the more control we need
    115. 115. LOOKING FORWARD the further we look at, the more control we need javascript is a programming language
    116. 116. LOOKING FORWARD the further we look at, the more control we need javascript is a programming language javascript is a serious business.
    117. 117. 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...
    118. 118. javascript kicks asses
    119. 119. javascript is money
    120. 120. marco@fromthefront.ithttps://github.com/cedmax@cedmax
    121. 121. One last word..

    ×