How to build and analyze Javascript projects and integrate that with Jenkins CI

1. © 2011 @eriwen

2. Eric Wendelin
Blog: eriwen.com
Twitter: @eriwen
Code: git.io/eric

3. ( °□° ɐpuǝƃV
• Tools that help your JS not suck
• How to create a build for your client-side
code
• Automation with Jenkins
• The hard part
• Unicorns

4. The Situation

5. Programmers are expensive
Must prevent them from doing
things below their pay grade

6. How do you do that?
Automate tasks that don't
require mental participation

7. Programmers are clever
Must force them to write
code for the next engineer

8. Better for the next engineer?
Must enforce conventions
that make the code more
understandable

9. ?

10. First things first
We need automation tools

11. Static Analysis

13. JSHint
jshint file.js --config config.json
jshint.org

14. CSSLint
csslint --rules=rule,rule2 file.css
csslint.net

15. Testing

16. Unit-testing
• Jasmine (pivotal.github.com/jasmine)
• QUnit (docs.jquery.com/QUnit)
• YUI Test (yuilibrary.com/yui/docs/test)
• Mocha (visionmedia.github.com/mocha)
• Lots of others...

17. PhantomJS
phantomjs your-runner.js file.html
phantomjs.org

18. Xvfb

19. JsTestDriver
java -jar JsTestDriver.jar --tests all
code.google.com/p/js-test-driver/

20. Functional testing
• Selenium (seleniumhq.org)
• CasperJS (github.com/n1k0/casperjs)
• zombie.js (zombie.labnotes.org)

21. Documentation

22. jsduck
jsduck src/js --output target/docs
github.com/senchalabs/jsduck

23. Page Speed

24. Closure Compiler
java -jar compiler.jar --js file.js
--js_output_file file.min.js
code.google.com/closure/compiler

25. YUI Compressor
java -jar yuicompressor.jar -o
'.css$:-min.css' *.css
developer.yahoo.com/yui/compressor

26. Combine and gzip
cat file1.js file2.js >> combined.js
gzip combined.js
mv combined.js{.gz,}

27. ?

28. The Build

29. Build Steps
• Static Analysis
• File Optimization (for production)
• Automated Testing
• Documentation
• Report Results

30. Gradle

31. Don't have a build?

32. html5boilerplate.com

33. Introducing the Gradle
Web Suite

41. git.io/gradlejs
git.io/gradlecss
git.io/gradlehtml

42. jenkins-ci.org

43. Crazy Simple Setup
wget http://mirrors.jenkins-
ci.org/war/latest/jenkins.war
java -jar jenkins.war

44. Source Control Plugins
• Git
• Mercurial
• Bazaar
• Subversion
• CVS
• Lots more...

45. Build System Plugins
• Gradle
• Maven
• Ant
• Rake
• Lots more...

46. Runs pretty much
everything
• Ruby
• Python
• NodeJS
• Groovy
• Shell
• Lots more...

47. Build Health Plugins
• Violations Plugin
• Selenium Plugin
• Cobertura Plugin
• Task Scanner Plugin
• ...and, of course, Chuck Norris Plugin

48. The really hard part

49. 5 Stages of JS CI
• No build server
• Pulls from source control and runs metrics
• Runs unit tests and fails build if necessary.
One button push to staging/production env
• Unit and acceptance tests run. Metrics
affect build stability
• Code deployed on every push that passes
the build

50. Helpful Tweeters
@ariyahidayat works on #phantomjs
@gseguin helped me with QUnit/Phantom
@builddoctor general CI advocate/guru
@jfroma does cool #jsci on Windows
@jamescarr could've given this talk well

51. One more thing...

53. LCOV to Cobertura converter
git.io/ltc

55. Code at: git.io/eric
Blog: eriwen.com
Twitter: @eriwen