Javascript as a programming language - jsDay

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.

JsDay (Verona, May 11th, 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 http://joind.in/3354 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: 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: 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: 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 we have to claim our role in development roadmap and business strategy, because... domenica 2 ottobre 11
19. Javascript is a serious business domenica 2 ottobre 11
20. 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
21. 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
22. YOU NEED A STRATEGY What's the use of running if you are not on the right road German proverb domenica 2 ottobre 11
23. 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
24. 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
25. 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
26. 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
27. 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
28. 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
29. Am I the only one or there’s something wrong? domenica 2 ottobre 11
30. 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
31. 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
32. 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
33. 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
34. I Build So Consistently domenica 2 ottobre 11
35. I Build So Consistently identify domenica 2 ottobre 11
36. I Build So Consistently identify build domenica 2 ottobre 11
37. I Build So Consistently identify build share domenica 2 ottobre 11
38. I Build So Consistently identify build share make it continuous domenica 2 ottobre 11
39. How does this fit our needs? domenica 2 ottobre 11
40. 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
41. 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
42. 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
43. Unit & Functional an overview domenica 2 ottobre 11
44. Unit & Functional an overview domenica 2 ottobre 11
45. Unit & Functional an overview domenica 2 ottobre 11
46. Unit & Functional an overview domenica 2 ottobre 11
47. 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
48. 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
49. Test Driven Development domenica 2 ottobre 11
50. You will, eventually.. domenica 2 ottobre 11
51. Everyone should be happy domenica 2 ottobre 11
52. 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
53. 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
54. 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
55. CHOOSE YOUR TOOLS A man cannot be too careful in the choice of his enemies Oscar Wilde domenica 2 ottobre 11
56. 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
57. 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
58. 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
59. ANT - Alternatives There are a lot of valuable Ant alternatives. Choose the one that fits better your needs domenica 2 ottobre 11
60. CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: CODE QUALITY VALIDATOR UNIT TEST RUNNER domenica 2 ottobre 11
61. CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: JSLINT JS TEST DRIVER domenica 2 ottobre 11
62. 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
63. 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
64. 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
65. Pitfalls? testing asynchronous execution is a mess domenica 2 ottobre 11
66. 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
67. 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
68. 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
69. JS Test Driver - Alternatives #3 TestSwarm It is a John Resig’s project of Distributed Continuous Integration released in 2009 as an official 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
70. 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
71. CODE MINIFIER DEPENDENCY RESOLVER Websites: Code Base: JS TEST DRIVER JSLINT domenica 2 ottobre 11
72. YUI COMPRESSOR APACHE IVY Websites: Code Base: JS TEST DRIVER JSLINT domenica 2 ottobre 11
73. 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
74. 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
75. 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
76. Yui Compressor Alternatives Packer is quite powerful in terms of filesize, 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
77. 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
78. 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
79. THE ENVIRONMENT I like boring things Andy Warhol domenica 2 ottobre 11
80. Javascript Repository domenica 2 ottobre 11
81. / dist libs src tools build.xml Javascript Repository domenica 2 ottobre 11
82. / dist libs src tools build.xml Javascript Repository /tools/ jslint JsTestDriver-1.3.1 domenica 2 ottobre 11
83. / 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
84. /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
85. /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
86. 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
87. Let's code domenica 2 ottobre 11
88. var test = new TestCase("Slider.test", { setUp: function(){ }, tearDown: function(){ } }); Test Code var slider; 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; 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 var slider; testSliderIsAPlugin: function(){ var test = function(){ $("slidable").slider(); }; assertNoException(test); }, domenica 2 ottobre 11
91. JS Test Driver in action domenica 2 ottobre 11
92. 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
93. 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
94. JS Test Driver in action domenica 2 ottobre 11
95. /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
96. /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
97. Website Solution domenica 2 ottobre 11
98. / 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. /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
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. 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
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. IN THE WILD In the wild, there is no health care. Dwight Schrute (the office) domenica 2 ottobre 11
106. what is it about? control & knowledge domenica 2 ottobre 11
107. 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
108. 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
109. 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
110. 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
111. 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
112. the further we look at, the more control we need 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 javascript is a programming language domenica 2 ottobre 11
115. 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
116. 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
117. javascript kicks asses domenica 2 ottobre 11
118. marco@fromthefront.it https://github.com/cedmax @cedmax domenica 2 ottobre 11
119. One last word.. domenica 2 ottobre 11
120. domenica 2 ottobre 11
121. Massimiliano Davoli Alberto Brandolini Francesco Fullone Luca Lischetti Rocco Curcio Matteo Gazziola domenica 2 ottobre 11