By @johnkpaul

Who?

John K. Paul

I work for Conde Nast

I ♥ JavaScript

@johnkpaul

john@johnkpaul.com

johnkpaul.com

Validation

1.    Nation.BaseView = Backbone.View.extend({
2.      render: function(){
3.      
4.      }
5.    );
6. 
7.    require('fs').readFile('foo', function(err, file){
8.      handleSuccess(file.toUpperCase)());
9.    });
                                    

1.    Nation.BaseView = Backbone.View.extend({
2.      render: function(){
3.      
4.      }
5.    );
6. 
7.    require('fs').readFile('foo', function(err, file){
8.      handleSuccess(file.toUpperCase)());
9.    });
                                    

>> Line 5: Unexpected token )                                    
>> Line 8: Unexpected token )

                                    

• esprima
• grunt-jsvalidate
• Google Closure

YOUR IDE CAN DO THAT

Linting

• common semantic mistakes
• code style
• JSHint

Linting Examples

    1.    if (value = 1) {
    2.      doSomething(value)
    3.    }
                                    

    [L1:C11] Expected a conditional expression and 
             instead saw an assignment.
    if (value = 1) {

    [L2:C21] Missing semicolon.
      doSomething(value)
                                    

Linting Examples

    1.    (function(){
    2.      
    3.      test();
    4.
    5.      var test = function(){};
    6.    }());
                                    

    [L2:C3] Missing "use strict" statement.
      test();
    [L4:C12] 'test' was used before it was defined.
      var test = function(){};
                                    

Decisions

Complexity

Path counting

1.    (function () {
2.      if (test1()) {
3.        doSomething();
4.      } else if (test2()) {
5.        doSomethingElse();
6.      } else if (test3()) {
7.        doSomethingElse2();
8.      }
9.    }());
                                    

    [L1:C11] This function's cyclomatic complexity is too high. 4
                                    

Why you gotta go and make things so complicated

• JSComplexity
• Plato

Plato demo

Beautification

• Editor Config
• code painter
• js-beautify
• esformatter

1.      if (    test1())
2.      {
3.        doSomething();
4.      } else if (test2()) {
5.          doSomethingElse();
6.      }
7.      else if (test4())
8.      {
9.      doSomethingElse2();
10.     }
                                    

1.      if (test1()) {
2.        doSomething();
3.      } else if (test2()) {
4.        doSomethingElse();
5.      } else if (test4()) {
6.        doSomethingElse2();
7.      }
                                    

Enforcement

  #!/bin/sh

  # run script to check if commit is valid
  node ./good-to-commit.js
  RETVAL=$?

  if [ $RETVAL -ne 0 ]
  then
    exit 1
  fi
                                    

Git pre-commit hook

  #!/bin/sh

  NAME=$(git branch | grep '*' | sed 's/* //')

  # don't run on rebase
  if [ "$NAME" != '(no branch)' ]
  then
    grunt precommit # runs jsbeautifier:verify, jshint
                    # jsvalidate, mocha, whatever

    RETVAL=$?

    if [ "$STASH_OUTPUT" != "No local changes to save" ]
    then
      git stash pop -q
    fi
    if [ $RETVAL -ne 0 ]
    then
      exit 1
    fi
  fi

                                    

pre commit demo

TypeScript

1.    function add(a: number, b: number) {
2.        return a + b;
3.    }
4.
5.    add("a", "b"); 
                                    

    Supplied parameters do not match any signature of call target.
    Could not select overload for 'call' expression.
    (a: number, b: number): number

What you should do

• Add validation and linting
• Keep track of complexity
• 
• Get Avril out of your head

Thank You

Questions?

By @johnkpaul

john@johnkpaul.com