Code Quality despite of JavaScript
Niko Köbler (@dasniko)
Heiko Spindler (@brainbrix)
Qualitects Group
WTFJS
http://wtfjs.com/
It's all(most)
about scope!
'use strict'
ECMA standards
code conventions
&
styleguides
Douglas Crockford
Google
static code analysis
JSLint
JSHint
SidekickJS
ESLint
http://eslint.org/
The pluggable linting utility for JavaScript
INstallation
On Node.js
npm i -g eslint
eslint [options] [file|dir]*
Configuration
eslint -c myconfig.json model.js
Sample
{
"env": {
"browser": true
},
"rules": {
// Override our default settings just for this directory
"eqeqeq": 1,
"strict": 1,
"quotes": 0,
"no-extra-semi": 1
}
}
Output
38:13 error 'require' is not defined no-undef
41:18 error 'Java' is not defined no-undef
43:11 error 'require' is not defined no-undef
515:69 error 'serviceContainer' is not defined no-undef
710:0 error 'exports' is not defined no-undef
36:0 error Use the function form of "use strict" no-global-strict
36:0 warning Strings must use doublequote quotes
152:36 error It's not necessary to initialize 'cb' to undefined no-undef-init
173:63 warning Strings must use doublequote quotes
193:36 error It's not necessary to initialize 'cb' to undefined no-undef-init
389:43 warning Strings must use doublequote quotes
491:15 warning Expected '!==' and instead saw '!=' eqeqeq
568:13 warning Unnecessary semicolon no-extra-semi
203:93 error args is defined but never used no-unused-vars
Define Your own RulEs
module.exports = function(context) {
return {
"BinaryExpression": function(node) {
var operator = node.operator;
...
if (context.options[0] === "smart" && (isTypeOf(node) ||
bothAreSameTypeLiterals(node)) || isNullCheck(node))
{ return; }
if (operator === "==") {
context.report(node, "Expected '===' and instead saw '=='.");
} else if (operator === "!=") {
context.report(node, "Expected '!==' and instead saw '!='.");
}
}
}; };
test driven development
e.g. Jasmine
PhantomJS
Headless WebKit Browser
Scriptable with JS
Supports: CSS Selectors, XPath, Canvas, SVG, ...
Some drawbacks: e.g. Alert dialogs don't work
CasperJS
http://casperjs.org/
Navigation scripting & testing utility for PhantomJS.
casper.start('http://www.someurl.com', function() {
casper.assertHttpStatus(200, 'Testlab is up');
casper.capture('LoginScreen.png', {
top: 0, left: 0, width: 1000, height: 900
});
casper.waitForSelector('#logonForm', function() {
casper.fill('form#logonForm', {
'user': 'heiko.spindler@hirnsport.de',
'password': 'xxx' }, true);
});
casper.wait(1000, function() { ... });
casper.test.assertExists('Filterform(click to hide)', "Form found");
});
casper.run();
resurrectio
CasperJS test recorder Chrome extension
casperbox (Alpha)
Run CasperJS scripts in the cloud
with simple REST API
-
Scripts are limited to 10 KB and 30 seconds
-
One request per second per IP address
Casperbox Sample
$ curl --data-binary @hello-world.js http://api.casperbox.com/scripts -H 'Content-Type:text/plain'
{
"id": "430638dd-046a-4d1c-95cd-f510b752de32",
"status": "QUEUED"
}
$ curl http://api.casperbox.com/scripts/ 430638dd-046a-4d1c-95cd-f510b752de32
{
"id": "430638dd-046a-4d1c-95cd-f510b752de32",
"source": "var casper = require('casper').create();\ncasper.start('http://casperjs.org', function() {\n\tcasper.echo('Hello, world!');\n});\ncasper.run();\n",
"status": "RUN",
"output": "Hello, world!"
}
static typing
TypeScript
CoffeeScript
IDE usage
e.g. WebStorm
documentation
JSDoc
Thank you!
http://slides.com/heikospindler/jsquality
JSQUALITY
By Heiko Spindler
JSQUALITY
Code quality despite of javascript
- 3,123