Your SlideShare is downloading. ×
0
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Managing JavaScript Complexity
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Managing JavaScript Complexity

466

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

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

No Downloads
Views
Total Views
466
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

×