Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1dFTumJ. Jarrod Overson presents ways to quantify and reduce JavaScript complexity as well as some of the techniques the experts use to create maintainable JavaScript. Filmed at qconsf.com. Jarrod Overson has been developing on the web for over 15 years in both startups and global companies and currently works at Riot Games. He founded Gossamer to help bootstrap companies into developing for the modern web and has provided free community training on everything from node to backbone.

1. JavaScript Complexity
Managing and Visualizing
Jarrod Overson
Consultant @ Gossamer.io
jarrodoverson.com

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/javascript-complexity

3. Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Yes, we’ll talk about
“Code Complexity”
“Code Quality”
and

5. Check your bias at the door
We’ll deal with it later

6. 1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity

7. The obvious…

8. 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

9. The Talent Pool is ridic
Closures?
jQuery experts
Web Platform
Engineers

10. The less obvious…

11. 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

12. 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

13. And the hard to admit…

14. The Web is hard
Web Applications are not solved
So many solutions still don’t exist
Even the giants pivot and backtrack

15. So why are we here?
Why bother?

16. JS coasted to the lead
on neutral

17. its final form
And this isn’t even

18. We can see where it’s headed
and we’re betting on JS

19. 1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity

20. and codify that respect.
Respect your JavaScript

21. Style
Naming
Punctuation
Indentation
Comments
Case
All code should look the same.

22. 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

23. 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

24. Lax enforcement begets violations.
These is as important as failed tests.
Warnings need to fail builds.

25. Know your options
JSLint
Crockford-style linter, low configuration
Closure Linter
Google-style linter, low configuration
JSHint ✔
Community driven JSLint fork, moderately configurable
ESLint ✔
Pluggable styles, highly configurable

26. 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
//...
}

27. Be aggressive.
Default to overly strict.

28. Smart deviation is
OK and expected.
!
!
function fn(param) {
/*jshint eqeqeq:false*/
!
if (param == 42) return;
!
}

29. Set complexity limits
"maxparams" : 4,
"maxdepth" : 4,
"maxstatements" : 20,
"maxcomplexity" : 7,
"maxlen" : 100

30. Cyclomatic Complexity
a.k.a.
Conditional Complexity
What is
?

31. Cyclomatic Complexity
magic
is not
nerd hokum
something you should ignore

32. Cyclomatic Complexity
the number of paths
through a block of code
is
(technically)

33. Cyclomatic Complexity
how hard your code
is to test.
is
(practically)

34. Complexity : 1
!
function main(a) {
!
}

35. Complexity : 2
function main(a) {
if (a > 5) {
}
}

36. Complexity : ?
function main(a) {
if (a > 5) {
!
} else {
!
}
}
still 2

37. Complexity : ? now 3
function main(a) {
if (a > 10) {
!
} else if(a > 5) {
!
}
}

38. Complexity : ? still 3
function main(a) {
if (a > 10) {
!
} else if(a > 5) {
!
} else {
!
}
}

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

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

41. Don’t get hung up on numbers
!
function main() {
/*jshint maxcomplexity:12*/
!
//...
}
!
* note : jshint calculates complexity differently than
complexity-report (plato, grunt-complexity)

42. Cyclomatic Complexity
is an early warning but isn’t everything.

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

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

46. 1. Why is this important now
2. Static Analysis & Linting
3. Visualizing Complexity

47. Plato.
One cool guy.
github.com/es-analysis/plato

49. Visualize your progress.
Target hot spots and track progress.
Promote files when ready.
When a file clears, promote it
to your ideal jshintrc.

50. Files passing “ideal” settings

51. Files to target next

52. Someday…

53. Challenge Accepted.
You

54. But wait! There’s MORE!

56. Code is a liability.
Your job is to provide value with
as little code as possible.

57. 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.

59. Maintainability Index?
You’re
drunk
Awesome,
JavaScript is a real
platform now!
Maintainability Index?
You’re both right.

60. Maintainability : 100
// empty file
Well we can buy that.

61. Maintainability : 95
Seems harsh, but ok.
var foo = 42;

62. Maintainability : 83
Holy crap, we’re dropping fast…
var foo = 42;
!
var bar = Math.log(foo++);

63. Maintainability : 92
Ok, that does seem better…
var foo = 42;
!
function calc(x) {
return Math.log(x++);
}
!
var bar = calc(foo);

64. Toolable via grunt-complexity
https://github.com/vigetlabs/grunt-complexity

65. What are we really working with here?

66. 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

67. Phil Booth
Ariya Hidayat
JavaScript Implementation
Source Analysis (Esprima)
1977 Maurice Halstead - Halstead Metrics
1991 Oman/Hagemeister - Maintainability Index
1976 Thomas McCabe - Cyclomatic Complexity

70. Oh, come on.

71. These numbers are for
introspection and exploration
These calculations have been praised and
criticised, promoted and shot down.
(and Halstead died before
being able to defend them)

72. The point is

73. “ The unexamined code
is not worth releasing ”
- Socrates

74. Code
is not just logic

75. Code
is the api between
imagination
and reality

76. Code
is an inconsistent, complex
Inconsistent, complex
API

77. Tool
how you code

78. Hack
how you code

79. Visualize
how you code

80. Visualize
Everything

81. Jarrod Overson
jsoverson.com/github
jsoverson.com/linkedin
jsoverson.com
jsoverson.com/google+
jarrod@jsoverson.com
jsoverson.com/twitter
@jsoverson

82. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/javascript
-complexity