Post on 15-Jan-2015
description
© 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?
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