© 2011 @eriwen

Blog: eriwen.com

Twitter: @eriwen

Code: git.io/eric

Eric Wendelin

(╯°□°）╯（ ɐ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 expensive

Must prevent them from doing things below their pay grade

How do you do that?

Automate tasks that don't require mental participation

Programmers are clever

Must force them to write code for the next engineer

Better for the next engineer?

Must enforce conventions that make the code more

understandable

?

First things first

We need automation tools

Static Analysis

JSHint

jshint file.js --config config.json

jshint.org

CSSLint

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

PhantomJS

phantomjs your-runner.js file.html

phantomjs.org

Xvfb

JsTestDriver

java -jar JsTestDriver.jar --tests all

code.google.com/p/js-test-driver/

Functional testing

• Selenium (seleniumhq.org)

• CasperJS (github.com/n1k0/casperjs)

• zombie.js (zombie.labnotes.org)

Documentation

jsduck

jsduck src/js --output target/docs

github.com/senchalabs/jsduck

Page Speed

Closure Compiler

java -jar compiler.jar --js file.js --js_output_file file.min.js

code.google.com/closure/compiler

YUI Compressor

java -jar yuicompressor.jar -o '.css$:-min.css' *.css

developer.yahoo.com/yui/compressor

Combine and gzip

cat file1.js file2.js >> combined.js

gzip combined.js

mv combined.js{.gz,}

?

The Build

Build Steps

• Static Analysis

• File Optimization (for production)

• Automated Testing

• Documentation

• Report Results

Gradle

Don't have a build?

html5boilerplate.com

Introducing the Gradle Web Suite

git.io/gradlejs git.io/gradlecssgit.io/gradlehtml

jenkins-ci.org

Crazy Simple Setup

wget http://mirrors.jenkins-ci.org/war/latest/jenkins.war

java -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 could've given this talk well

One more thing...

git.io/ltc

LCOV to Cobertura converter

Code at: git.io/eric

Blog: eriwen.com

Twitter: @eriwen