JavaScript + Jenkins = Winning!

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• Automation with Jenkins• The hard part• Unicorns

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 ﬁrstWe 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)• Mocha (visionmedia.github.com/mocha)• Lots of others...

PhantomJSphantomjs your-runner.js file.html phantomjs.org

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 Norris Plugin

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 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

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

One more thing...

LCOV to Cobertura converter git.io/ltc

Code at: git.io/ericBlog: eriwen.comTwitter: @eriwen

http://d.hatena.ne.jp	3139
http://bateru.com	2890
http://eriwen.com	2268
http://ikeike443.hatenablog.com	1418
http://www.eriwen.com	953
http://therichwebexperience.com	377
http://mobicon.tistory.com	317
http://feeds2.feedburner.com	210
http://www.nofluffjuststuff.com	70
http://feeds.feedburner.com	57
https://minerva.cloudberrytec.com	32
http://www.sofiatania.com	30
http://www.nfjsone.com	28
http://webcache.googleusercontent.com	25
http://localhost	22
http://www.newsblur.com	20
http://paper.li	18
http://a0.twimg.com	17
http://newsblur.com	12
http://uberconf.com	9
http://www.springone2gx.com	9
http://feedplanets.com	8
http://projectautomationexperience.com	6
http://dev.newsblur.com	6
http://www.rxx.co.il	5
http://www.scoop.it	5
http://translate.googleusercontent.com	5
http://polygynia2.rssing.com	3
http://bitly.net	2
http://bitly.com	2
http://www.zhuaxia.com	2
http://us-w1.rockmelt.com	2
http://www.linkedin.com	1
http://www.hanrss.com	1
http://www.ofelio.com	1
https://twitter.com	1
http://eriwen.s3-website-us-east-1.amazonaws.com	1
http://twitter.com	1
http://tweetedtimes.com	1
http://safe.txmblr.com	1

JavaScript + Jenkins = Winning!

by Eric Wendelin

Accessibility

Categories

Upload Details

Usage Rights

40 Embeds 11,975

Statistics

JavaScript + Jenkins = Winning! Presentation Transcript