Your SlideShare is downloading. ×
0
© 2011 @eriwen
Eric WendelinBlog: eriwen.comTwitter: @eriwenCode: git.io/eric
(      °□°                ɐpuǝƃV• Tools that help your JS not suck• How to create a build for your client-side  code• Auto...
The Situation
Programmers are expensiveMust prevent them from doing things below their pay grade
How do you do that?Automate tasks that dontrequire mental participation
Programmers are clever Must force them to writecode for the next engineer
Better for the next engineer?Must enforce conventions that make the code more      understandable
?
First things firstWe need automation tools
Static Analysis
JSHintjshint file.js --config config.json          jshint.org
CSSLintcsslint --rules=rule,rule2 file.css          csslint.net
Testing
Unit-testing• Jasmine (pivotal.github.com/jasmine)• QUnit (docs.jquery.com/QUnit)• YUI Test (yuilibrary.com/yui/docs/test)...
PhantomJSphantomjs your-runner.js file.html        phantomjs.org
Xvfb
JsTestDriverjava -jar JsTestDriver.jar --tests allcode.google.com/p/js-test-driver/
Functional testing• Selenium (seleniumhq.org)• CasperJS (github.com/n1k0/casperjs)• zombie.js (zombie.labnotes.org)
Documentation
jsduckjsduck src/js --output target/docsgithub.com/senchalabs/jsduck
Page Speed
Closure Compiler java -jar compiler.jar --js file.js     --js_output_file file.min.jscode.google.com/closure/compiler
YUI Compressor     java -jar yuicompressor.jar -o         .css$:-min.css *.cssdeveloper.yahoo.com/yui/compressor
Combine and gzipcat file1.js file2.js >> combined.jsgzip combined.jsmv combined.js{.gz,}
?
The Build
Build Steps• Static Analysis• File Optimization (for production)• Automated Testing• Documentation• Report Results
Gradle
Dont have a build?
html5boilerplate.com
Introducing the Gradle      Web Suite
git.io/gradlejsgit.io/gradlecssgit.io/gradlehtml
jenkins-ci.org
Crazy Simple Setupwget http://mirrors.jenkins-ci.org/war/latest/jenkins.warjava -jar jenkins.war
Source Control Plugins• Git• Mercurial• Bazaar• Subversion• CVS• Lots more...
Build System Plugins• Gradle• Maven• Ant• Rake• Lots more...
Runs pretty much       everything• Ruby• Python• NodeJS• Groovy• Shell• Lots more...
Build Health Plugins• Violations Plugin• Selenium Plugin• Cobertura Plugin• Task Scanner Plugin• ...and, of course, Chuck ...
The really hard part
5 Stages of JS CI• No build server• Pulls from source control and runs metrics• Runs unit tests and fails build if necessa...
Helpful Tweeters@ariyahidayat works on #phantomjs@gseguin helped me with QUnit/Phantom@builddoctor general CI advocate/gur...
One more thing...
LCOV to Cobertura converter     git.io/ltc
Code at: git.io/ericBlog: eriwen.comTwitter: @eriwen
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
Upcoming SlideShare
Loading in...5
×

JavaScript + Jenkins = Winning!

54,253

Published on

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

Published in: Technology
4 Comments
83 Likes
Statistics
Notes
No Downloads
Views
Total Views
54,253
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
258
Comments
4
Likes
83
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript + Jenkins = Winning!"

  1. 1. © 2011 @eriwen
  2. 2. Eric WendelinBlog: eriwen.comTwitter: @eriwenCode: git.io/eric
  3. 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. 4. The Situation
  5. 5. Programmers are expensiveMust prevent them from doing things below their pay grade
  6. 6. How do you do that?Automate tasks that dontrequire mental participation
  7. 7. Programmers are clever Must force them to writecode for the next engineer
  8. 8. Better for the next engineer?Must enforce conventions that make the code more understandable
  9. 9. ?
  10. 10. First things firstWe need automation tools
  11. 11. Static Analysis
  12. 12. JSHintjshint file.js --config config.json jshint.org
  13. 13. CSSLintcsslint --rules=rule,rule2 file.css csslint.net
  14. 14. Testing
  15. 15. 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...
  16. 16. PhantomJSphantomjs your-runner.js file.html phantomjs.org
  17. 17. Xvfb
  18. 18. JsTestDriverjava -jar JsTestDriver.jar --tests allcode.google.com/p/js-test-driver/
  19. 19. Functional testing• Selenium (seleniumhq.org)• CasperJS (github.com/n1k0/casperjs)• zombie.js (zombie.labnotes.org)
  20. 20. Documentation
  21. 21. jsduckjsduck src/js --output target/docsgithub.com/senchalabs/jsduck
  22. 22. Page Speed
  23. 23. Closure Compiler java -jar compiler.jar --js file.js --js_output_file file.min.jscode.google.com/closure/compiler
  24. 24. YUI Compressor java -jar yuicompressor.jar -o .css$:-min.css *.cssdeveloper.yahoo.com/yui/compressor
  25. 25. Combine and gzipcat file1.js file2.js >> combined.jsgzip combined.jsmv combined.js{.gz,}
  26. 26. ?
  27. 27. The Build
  28. 28. Build Steps• Static Analysis• File Optimization (for production)• Automated Testing• Documentation• Report Results
  29. 29. Gradle
  30. 30. Dont have a build?
  31. 31. html5boilerplate.com
  32. 32. Introducing the Gradle Web Suite
  33. 33. git.io/gradlejsgit.io/gradlecssgit.io/gradlehtml
  34. 34. jenkins-ci.org
  35. 35. Crazy Simple Setupwget http://mirrors.jenkins-ci.org/war/latest/jenkins.warjava -jar jenkins.war
  36. 36. Source Control Plugins• Git• Mercurial• Bazaar• Subversion• CVS• Lots more...
  37. 37. Build System Plugins• Gradle• Maven• Ant• Rake• Lots more...
  38. 38. Runs pretty much everything• Ruby• Python• NodeJS• Groovy• Shell• Lots more...
  39. 39. Build Health Plugins• Violations Plugin• Selenium Plugin• Cobertura Plugin• Task Scanner Plugin• ...and, of course, Chuck Norris Plugin
  40. 40. The really hard part
  41. 41. 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
  42. 42. Helpful Tweeters@ariyahidayat works on #phantomjs@gseguin helped me with QUnit/Phantom@builddoctor general CI advocate/guru@jfroma does cool #jsci on Windows@jamescarr couldve given this talk well
  43. 43. One more thing...
  44. 44. LCOV to Cobertura converter git.io/ltc
  45. 45. Code at: git.io/ericBlog: eriwen.comTwitter: @eriwen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×