JavaScript + Jenkins = Winning!
88 likes41,544 views
This document discusses tools and techniques for automating JavaScript development tasks to improve code quality. It recommends using tools like JSHint for static analysis, PhantomJS for testing, Closure Compiler for optimization, and Gradle for building. It also recommends setting up continuous integration with Jenkins to run tests and metrics on every code change and prevent defects. The document stresses that automation and conventions help enforce best practices and make code more understandable for future engineers.
JavaScript + Jenkins = Winning!
- 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
- 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?
- 33. Introducing the Gradle Web Suite
- 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
- 53. LCOV to Cobertura converter git.io/ltc
- 55. Code at: git.io/eric Blog: eriwen.com Twitter: @eriwen