Managing JavaScript Complexity

  • 372 views
Uploaded on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1dFTumJ. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
372
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 44. It’s ok. Have an ideal set of options, and a current set that passes now. Visualize your goal.
  • 45. 1. Why is this important now 2. Static Analysis & Linting 3. Visualizing Complexity
  • 46. Plato. One cool guy. github.com/es-analysis/plato
  • 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. Files passing “ideal” settings
  • 49. Files to target next
  • 50. Someday…
  • 51. Challenge Accepted. You
  • 52. But wait! There’s MORE!
  • 53. Code is a liability. Your job is to provide value with as little code as possible.
  • 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. Maintainability Index? You’re drunk Awesome, JavaScript is a real platform now! Maintainability Index? You’re both right.
  • 56. Maintainability : 100 // empty file Well we can buy that.
  • 57. Maintainability : 95 Seems harsh, but ok. var foo = 42;
  • 58. Maintainability : 83 Holy crap, we’re dropping fast… var foo = 42; ! var bar = Math.log(foo++);
  • 59. Maintainability : 92 Ok, that does seem better… var foo = 42; ! function calc(x) { return Math.log(x++); } ! var bar = calc(foo);
  • 60. Toolable via grunt-complexity https://github.com/vigetlabs/grunt-complexity
  • 61. What are we really working with here?
  • 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. 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. Oh, come on.
  • 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. The point is
  • 67. “ The unexamined code is not worth releasing ” - Socrates
  • 68. Code is not just logic
  • 69. Code is the api between imagination and reality
  • 70. Code is an inconsistent, complex Inconsistent, complex API
  • 71. Tool how you code
  • 72. Hack how you code
  • 73. Visualize how you code
  • 74. Visualize Everything
  • 75. Jarrod Overson jsoverson.com/github jsoverson.com/linkedin jsoverson.com jsoverson.com/google+ jarrod@jsoverson.com jsoverson.com/twitter @jsoverson
  • 76. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/javascript -complexity