Maintainability SFJS Sept 4 2014

Jarrod Overson - @jsoverson

AchievingMaintainability

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 agoclever

Is idiotic todayidiotic

We’re not awful people

We’re just smart

We’re just lazysmart

We’re justlazysmart

bored

We’re just

lazysmart

boredevil

We’re just doing our job

And our job is hard

How do we get better at it?

EXAMINE1

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

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

SET LIMITS

WHAT IS CYCLOMATIC COMPLEXITY?

CYCLOMATIC COMPLEXITY IS THE NUMBER OF PATHS

THROUGH YOUR CODE

TECHNICALLY

CYCLOMATIC COMPLEXITY IS HOW HARD

YOUR CODE IS TO TEST

PRACTICALLY

!function main(a) { !}

COMPLEXITY : 1

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 coverageistanbul

jscoverblanket

platocomplexity

maintainabilitylint errors

MAINTAINABILITY?fn(averageEffort, averageComplexity, averageLines);

fn(difficulty, volume)fn(length, vocabulary)

fn(uniqueOperators, totalOperands, uniqueOperands)

fn(uniqueOperators, uniqueOperands)

fn(totalOperators, totalOperands)

doc coveragethis

existdoesn’t

AUTOMATE2

3

1

IF IT’S NOT EASYIt won’t get done.

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

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

Build firstBefore you write code, set up your build

But I don’t wanna!

Look into yeomanManages 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 Gulpit 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-jasminegrunt-mocha-istanbulgrunt-jscoverageand 30 more

Want linting?grunt-contrib-jshintgrunt-eslintgrunt-jscs-checkerand 50 more

Want docs?grunt-contrib-yuidocgrunt-jsdocgrunt-doccoand 90+ more

There’s no excusefor manual process

PROTECT3

1

2

‣ 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

Jarrod Overson - @jsoverson

AchievingMaintainability