Upload
jarrod-overson
View
10.268
Download
4
Tags:
Embed Size (px)
DESCRIPTION
These are the slides for the talk "Managing and Visualizing JavaScript Complexity" given at QCon SF 2013 by Jarrod Overson
Citation preview
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+
jsoverson.com/twitter
@jsoverson