Managing JavaScript Complexity

876 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Managing JavaScript Complexity

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

×