managing javascript complexity

JavaScript ComplexityManaging and Visualizing

Jarrod Overson Consultant @ Gossamer.io jarrodoverson.com

Yes, we’ll talk about

“Code Complexity”

“Code Quality”and

Check your bias at the doorWe’ll deal with it later

1. Why is this important now

2. Static Analysis & Linting

3. Visualizing Complexity

The obvious…

Immature tooling and IDEs Wildly variable module styles Best practices vary as language evolves Server & Client similar yet so different

JavaScript is Dynamic

all the obvious pitfalls compounded by

The Talent Pool is ridic

Closures?jQuery experts

Web Platform Engineers

The less obvious…

Progress is staggering

It’s hard to keep up

The next tech might not be usable yet

When it is, you want to actually be able to use it

Refactoring isn’t easy

Callback hell is more than just deep nesting

!

IDEs can’t help much, yet !

But flexibility is more important on the web than anywhere else

And the hard to admit…

The Web is hardWeb Applications are not solved

So many solutions still don’t exist

Even the giants pivot and backtrack

So why are we here?Why bother?

JS coasted to the leadon neutral

its final form

And this isn’t even

We can see where it’s headedand we’re betting on JS

1. Why is this important now

2. Static Analysis & Linting

3. Visualizing Complexity

and codify that respect.Respect your JavaScript

Style Naming Punctuation Indentation Comments Case File names

All code should look the same.

1. Agree

2. Document

3. Enforce

Get everyone together

https://github.com/rwaldron/idiomatic.js/https://github.com/Seravo/js-winning-style

https://github.com/airbnb/javascript

http://sideeffect.kr/popularconvention/#javascript

1. >90% use last comma

2. >80% use space indents

3. >55% use single quotes

Coding conventions based on Github analysis

Lax enforcement begets violations.

These is as important as failed tests.Warnings need to fail builds.

Know your optionsJSLint

Crockford-style linter, low configuration

Closure Linter Google-style linter, low configuration

JSHint ✔ Community driven JSLint fork, moderately configurable

ESLint ✔ Pluggable styles, highly configurable

Know your options’ options{ "maxerr" : 50, "bitwise" : true, "camelcase" : false, "curly" : true, "eqeqeq" : true, "forin" : true, "immed" : false, "indent" : 4, "latedef" : false, "newcap" : false, "noarg" : true, "noempty" : true, "nonew" : false, "plusplus" : false, "quotmark" : false //... }

Be aggressive.Default to overly strict.

Smart deviation is OK and expected.!

!

function fn(param) { /*jshint eqeqeq:false*/ !

if (param == 42) return; !

}

Set complexity limits

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

Cyclomatic Complexitya.k.a.

Conditional Complexity

What is

?

Cyclomatic Complexity

magicis not

nerd hokumsomething you should ignore

Cyclomatic Complexity

the number of paths through a block of code

is

(technically)

Cyclomatic Complexity

how hard your code is to test.

is

(practically)

Complexity : 1

!

function main(a) { !

}

Complexity : 2

function main(a) { if (a > 5) { } }

Complexity : ?function main(a) { if (a > 5) { !

} else { !

} }

still 2

Complexity : ? now 3

function main(a) { if (a > 10) { !

} else if(a > 5) { !

} }

Complexity : ? still 3function main(a) { if (a > 10) { !

} else if(a > 5) { !

} else { !

} }

Complexity : ? also 3function main(a) { if (a > 5) { if (a > 10) { !

} } }

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

Don’t get hung up on numbers!

function main() { /*jshint maxcomplexity:12*/ !

//... } !

* note : jshint calculates complexity differently than complexity-report (plato, grunt-complexity)

Cyclomatic Complexityis an early warning but isn’t everything.

OMG! I’m going to make the best .jshintrc

It’s ok.Have an ideal set of options, and a current set that passes now.

Visualize your goal.

1. Why is this important now

2. Static Analysis & Linting

3. Visualizing Complexity

Plato.

One cool guy.

github.com/es-analysis/plato

Visualize your progress.Target hot spots and track progress.

Promote files when ready.When a file clears, promote it

to your ideal jshintrc.

Files passing “ideal” settings

Files to target next

Someday…

Challenge Accepted.

You

But wait! There’s MORE! !

Code is a liability.Your job is to provide value with

as little code as possible.

How many lines of code does your main project have right now?

If you don’t know, within 10%, then you’re ignoring it.

Treat SLOC like credit card debt.Don’t add to it without knowing the balance.

Maintainability Index?

You’re drunk

Awesome, JavaScript is a real

platform now!

Maintainability Index?

You’re both right.

Maintainability : 100

// empty file

Well we can buy that.

Maintainability : 95

Seems harsh, but ok.

var foo = 42;

Maintainability : 83

Holy crap, we’re dropping fast…

var foo = 42; !

var bar = Math.log(foo++);

Maintainability : 92

Ok, that does seem better…

var foo = 42; !

function calc(x) { return Math.log(x++); } !

var bar = calc(foo);

Toolable via grunt-complexity

https://github.com/vigetlabs/grunt-complexity

What are we really working with here?

var vocabulary = unqOperators + unqOperands; var length = totOperators + totOperands; var difficulty = (unqOperators / 2) * (totOperands / unqOperands); var volume = length * Math.log2(vocabulary); var effort = difficulty * volume; !var maintainabilityIndex = Math.max( 0, ( 171 + -3.42 * Math.log(aveEffort) + -0.23 * (aveComplexity) + -16.2 * Math.log(aveLOC) ) * 100 / 171 );

But don’t look at

me for questions!

Smarter people are responsible

Phil Booth

Ariya Hidayat

JavaScript Implementation

Source Analysis (Esprima)

1977 Maurice Halstead - Halstead Metrics

1991 Oman/Hagemeister - Maintainability Index

1976 Thomas McCabe - Cyclomatic Complexity

Oh, come on.

These numbers are forintrospection and exploration

These calculations have been praised and criticised, promoted and shot down.

(and Halstead died before being able to defend them)

The point is

“ The unexamined code is not worth releasing ”

- Socrates

Codeis not just logic

Codeis the api between

imagination and reality

Codeis an inconsistent, complex

Inconsistent, complex

API

Toolhow you code

Hackhow you code

Visualizehow you code

VisualizeEverything

Jarrod Overson

jsoverson.com/githubjsoverson.com/linkedin

jsoverson.comjsoverson.com/google+

jarrod@jsoverson.com

jsoverson.com/twitter

@jsoverson