JavaScript + Jenkins = Winning!
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript + Jenkins = Winning!

  • 50,449 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
50,449
On Slideshare
35,018
From Embeds
15,431
Number of Embeds
46

Actions

Shares
Downloads
228
Comments
4
Likes
76

Embeds 15,431

http://d.hatena.ne.jp 3,139
http://bateru.com 2,934
http://ikeike443.hatenablog.com 2,268
http://eriwen.com 2,268
http://www.eriwen.com 1,863
http://mobicon.tistory.com 1,413
http://therichwebexperience.com 440
http://www.sofiatania.com 349
http://feeds2.feedburner.com 210
http://www.nofluffjuststuff.com 137
https://minerva.cloudberrytec.com 70
http://feeds.feedburner.com 57
http://localhost 30
http://www.nfjsone.com 28
http://uberconf.com 25
http://webcache.googleusercontent.com 25
http://translate.googleusercontent.com 21
http://www.newsblur.com 20
http://paper.li 18
http://a0.twimg.com 17
http://www.springone2gx.com 13
http://newsblur.com 12
http://polygynia2.rssing.com 9
http://lifeofjs.com 8
http://feedplanets.com 8
http://dev.newsblur.com 6
http://projectautomationexperience.com 6
http://www.scoop.it 6
http://www.rxx.co.il 5
http://www.google.rs 3
https://twitter.com 3
http://us-w1.rockmelt.com 2
https://www.google.com 2
http://www.zhuaxia.com 2
http://bitly.net 2
http://bitly.com 2
http://tweetedtimes.com 1
http://www.google.com 1
http://twitter.com 1
http://cafe.naver.com 1
http://eriwen.s3-website-us-east-1.amazonaws.com 1
http://safe.txmblr.com 1
http://www.hanrss.com 1
http://www.linkedin.com 1
http://www.ofelio.com 1
http://www.slashdocs.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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