Achieving
Maintainability
Jarrod Overson - @jsoverson

a . k . a .

Idiot proofing your code

( psst, we’re all idiots )

We do stuff like…
❯ pi
3.141592653589793
❯ pi(2)
6.283185307179586

Or…
❯ 4..days
345600000
❯ 60..seconds
60000

And even…
<script src="#"></script>

What was clever six months ago

Is idiotic today

We’re not awful people

We’re just smart

smart
We’re just lazy

We’re just
smart
lazy
bored

We’re just
smart
lazy
bored
evil

We’re just doing our job

And our job is hard

How do we get better at it?

1 EXAMINE
2
3

How much analysis do you run on your code?

It’s not enough.

KNOW YOUR LINTERS
JSHINT
ESLINT
JSCS
Community-driven JSLint fork. High configurability.
JSHint alternative. High configurability.
Code style checker. Separate and complementary.
WHAT ABOUT JSLINT AND CLOSURE LINTER?

KNOW YOUR LINTER’S OPTIONS

SET LIMITS
"maxparams" : 4
"maxdepth" : 4
"maxstatements" : 20
"maxlen" : 100
"maxcomplexity" : 7

WHAT IS CYCLOMATIC COMPLEXITY?

TECHNICALLY
CYCLOMATIC COMPLEXITY
IS THE NUMBER OF PATHS
THROUGH YOUR CODE

PRACTICALLY
CYCLOMATIC COMPLEXITY
IS HOW HARD
YOUR CODE IS TO TEST

COMPLEXITY : 1
!
function main(a) {
!
}

function main(a) {
if (a > 5) {
}
}
COMPLEXITY : 2

function main(a) {
if (a > 5) {
!
} else {
!
}
}
COMPLEXITY : ?

function main(a) {
if (a > 10) {
!
} else if(a > 5) {
!
}
}
COMPLEXITY : 3

function main(a) {
if (a > 5) {
if (a > 10) {
!
}
}
}
COMPLEXITY : 3

function main(a) {
if (a) {
} else if (a) {
}
!
if (other) { }
!
for (var i = 0; i < a; i++) {
if (i % 2) {
} else if (i % 3) {
}
}
}
COMPLEXITY : 7

GENERATE VISUAL REPORTS

code coverage
istanbul
blanket
jscover

plato
complexity
lint errors
maintainability

MAINTAINABILITY?
fn(averageEffort, averageComplexity, averageLines);
fn(difficulty, volume)
fn(length, vocabulary)
fn(uniqueOperators, totalOperands, uniqueOperands)
fn(totalOperators, totalOperands)
fn(uniqueOperators, uniqueOperands)

doc coverage
this
doesn’t
exist

1
2 AUTOMATE
3

IF IT’S NOT EASY
It won’t get done.

IF IT’S NOT AUTOMATIC
It won’t get done every time.

IF IT’S NOT VISIBLE
It may as well not be done at all.

Build first
Before you write code, set up your build

But I don’t wanna!

Look into yeoman
Manages file copies, conflicts, prompts, defaults

But I don’t want to learn Yeoman!

$ npm install yo generator-generator
!
$ mkdir generator-myWorkflow
!
$ cd generator-myWorkflow
!
$ yo generator

But I don’t need all that!

Delete, add, and modify
It’s surprisingly easy.

Grunt vs Gulp
it doesn’t matter, just choose one.

What about…
• MAKE
• RAKE
• JAKE
• ANT
• BROCCOLI
• blahhhh…

It doesn’t matter.
Just choose one.
( but be ready to support it )

Want code coverage?
grunt-contrib-jasmine
grunt-mocha-istanbul
grunt-jscoverage
and 30 more

Want linting?
grunt-contrib-jshint
grunt-eslint
grunt-jscs-checker
and 50 more

Want docs?
grunt-contrib-yuidoc
grunt-jsdoc
grunt-docco
and 90+ more

There’s no excuse
for manual process

1
2
3 PROTECT

‣ Code style
‣ Metrics
‣ Build tools
‣ Data formats
‣ Naming conventions
‣ Curly Braces
‣ Directory structure
‣ Everything
ENFORCE
‣ Automate Everything
‣ VCS hooks
‣ CI
‣ Code reviews
‣ Reports
‣ Everything
‣ Warnings === errors
‣ Make it hard to be
wrong
DOCUMENT
‣ Treat docs as code
‣ Make it
‣ easy to find
‣ easy to read
‣ easy to update
‣ easy to discuss
‣ Use github!
AGREE
GET EVERYONE TOGETHER

Your automation choice needs to
accommodate enforcement

Recap
your analysis
your enforcement
your everything
Automate
Automate
Automate

Interested in why a security hardware startup attracted
so many JavaScript developers? Come talk to us!
esprima
venus
plato
grunt-contrib

Achieving
Maintainability
Jarrod Overson - @jsoverson