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

ESLint

http://eslint.org/
The pluggable linting utility for JavaScript

120+ Rules 
Developer Guide
Source code on Github


INstallation


On Node.js
npm i -g eslint 

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

http://phantomjs.org




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
https://github.com/ebrehault/resurrectio

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

Made with Slides.com