Managing JavaScript Complexity
-
Upload
jarrod-overson -
Category
Technology
-
view
10.268 -
download
4
description
Transcript of Managing JavaScript Complexity
![Page 1: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/1.jpg)
JavaScript ComplexityManaging and Visualizing
Jarrod Overson Consultant @ Gossamer.io jarrodoverson.com
![Page 2: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/2.jpg)
Yes, we’ll talk about
“Code Complexity”
“Code Quality”and
![Page 3: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/3.jpg)
Check your bias at the doorWe’ll deal with it later
![Page 4: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/4.jpg)
1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity
![Page 5: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/5.jpg)
The obvious…
![Page 6: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/6.jpg)
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
![Page 7: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/7.jpg)
The Talent Pool is ridic
Closures?jQuery experts
Web Platform Engineers
![Page 8: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/8.jpg)
The less obvious…
![Page 9: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/9.jpg)
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
![Page 10: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/10.jpg)
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
![Page 11: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/11.jpg)
And the hard to admit…
![Page 12: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/12.jpg)
The Web is hardWeb Applications are not solved
So many solutions still don’t exist
Even the giants pivot and backtrack
![Page 13: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/13.jpg)
So why are we here?Why bother?
![Page 14: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/14.jpg)
JS coasted to the leadon neutral
![Page 15: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/15.jpg)
its final form
And this isn’t even
![Page 16: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/16.jpg)
We can see where it’s headedand we’re betting on JS
![Page 17: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/17.jpg)
1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity
![Page 18: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/18.jpg)
and codify that respect.Respect your JavaScript
![Page 19: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/19.jpg)
Style Naming Punctuation Indentation Comments Case File names
All code should look the same.
![Page 20: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/20.jpg)
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
![Page 21: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/21.jpg)
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
![Page 22: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/22.jpg)
Lax enforcement begets violations.
These is as important as failed tests.Warnings need to fail builds.
![Page 23: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/23.jpg)
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
![Page 24: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/24.jpg)
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 //... }
![Page 25: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/25.jpg)
Be aggressive.Default to overly strict.
![Page 26: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/26.jpg)
Smart deviation is OK and expected.!
!
function fn(param) { /*jshint eqeqeq:false*/ !
if (param == 42) return; !
}
![Page 27: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/27.jpg)
Set complexity limits
"maxparams" : 4, "maxdepth" : 4, "maxstatements" : 20, "maxcomplexity" : 7, "maxlen" : 100
![Page 28: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/28.jpg)
Cyclomatic Complexitya.k.a.
Conditional Complexity
What is
?
![Page 29: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/29.jpg)
Cyclomatic Complexity
magicis not
nerd hokumsomething you should ignore
![Page 30: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/30.jpg)
Cyclomatic Complexity
the number of paths through a block of code
is
(technically)
![Page 31: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/31.jpg)
Cyclomatic Complexity
how hard your code is to test.
is
(practically)
![Page 32: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/32.jpg)
Complexity : 1
!
function main(a) { !
}
![Page 33: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/33.jpg)
Complexity : 2
function main(a) { if (a > 5) { } }
![Page 34: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/34.jpg)
Complexity : ?function main(a) { if (a > 5) { !
} else { !
} }
still 2
![Page 35: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/35.jpg)
Complexity : ? now 3
function main(a) { if (a > 10) { !
} else if(a > 5) { !
} }
![Page 36: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/36.jpg)
Complexity : ? still 3function main(a) { if (a > 10) { !
} else if(a > 5) { !
} else { !
} }
![Page 37: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/37.jpg)
Complexity : ? also 3function main(a) { if (a > 5) { if (a > 10) { !
} } }
![Page 38: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/38.jpg)
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) { } } }
![Page 39: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/39.jpg)
Don’t get hung up on numbers!
function main() { /*jshint maxcomplexity:12*/ !
//... } !
* note : jshint calculates complexity differently than complexity-report (plato, grunt-complexity)
![Page 40: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/40.jpg)
Cyclomatic Complexityis an early warning but isn’t everything.
![Page 41: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/41.jpg)
OMG! I’m going to make the best .jshintrc
![Page 42: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/42.jpg)
![Page 43: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/43.jpg)
It’s ok.Have an ideal set of options, and a current set that passes now.
Visualize your goal.
![Page 44: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/44.jpg)
1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity
![Page 45: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/45.jpg)
Plato.
One cool guy.
github.com/es-analysis/plato
![Page 46: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/46.jpg)
![Page 47: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/47.jpg)
Visualize your progress.Target hot spots and track progress.
Promote files when ready.When a file clears, promote it
to your ideal jshintrc.
![Page 48: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/48.jpg)
Files passing “ideal” settings
![Page 49: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/49.jpg)
Files to target next
![Page 50: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/50.jpg)
Someday…
![Page 51: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/51.jpg)
Challenge Accepted.
You
![Page 52: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/52.jpg)
But wait! There’s MORE! !
![Page 53: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/53.jpg)
![Page 54: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/54.jpg)
Code is a liability.Your job is to provide value with
as little code as possible.
![Page 55: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/55.jpg)
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.
![Page 56: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/56.jpg)
![Page 57: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/57.jpg)
Maintainability Index?
You’re drunk
Awesome, JavaScript is a real
platform now!
Maintainability Index?
You’re both right.
![Page 58: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/58.jpg)
Maintainability : 100
// empty file
Well we can buy that.
![Page 59: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/59.jpg)
Maintainability : 95
Seems harsh, but ok.
var foo = 42;
![Page 60: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/60.jpg)
Maintainability : 83
Holy crap, we’re dropping fast…
var foo = 42; !
var bar = Math.log(foo++);
![Page 61: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/61.jpg)
Maintainability : 92
Ok, that does seem better…
var foo = 42; !
function calc(x) { return Math.log(x++); } !
var bar = calc(foo);
![Page 62: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/62.jpg)
Toolable via grunt-complexity
https://github.com/vigetlabs/grunt-complexity
![Page 63: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/63.jpg)
What are we really working with here?
![Page 64: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/64.jpg)
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
![Page 65: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/65.jpg)
Phil Booth
Ariya Hidayat
JavaScript Implementation
Source Analysis (Esprima)
1977 Maurice Halstead - Halstead Metrics
1991 Oman/Hagemeister - Maintainability Index
1976 Thomas McCabe - Cyclomatic Complexity
![Page 66: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/66.jpg)
![Page 67: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/67.jpg)
![Page 68: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/68.jpg)
Oh, come on.
![Page 69: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/69.jpg)
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)
![Page 70: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/70.jpg)
The point is
![Page 71: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/71.jpg)
“ The unexamined code is not worth releasing ”
- Socrates
![Page 72: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/72.jpg)
Codeis not just logic
![Page 73: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/73.jpg)
Codeis the api between
imagination and reality
![Page 74: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/74.jpg)
Codeis an inconsistent, complex
Inconsistent, complex
API
![Page 75: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/75.jpg)
Toolhow you code
![Page 76: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/76.jpg)
Hackhow you code
![Page 77: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/77.jpg)
Visualizehow you code
![Page 78: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/78.jpg)
VisualizeEverything
![Page 79: Managing JavaScript Complexity](https://reader033.fdocuments.us/reader033/viewer/2022051608/540dcfcd8d7f728d7e8b4b14/html5/thumbnails/79.jpg)
Jarrod Overson
jsoverson.com/githubjsoverson.com/linkedin
jsoverson.comjsoverson.com/google+
jsoverson.com/twitter
@jsoverson