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

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