Managing JavaScript Complexity in Teams - Fluent

1,479 views

Published on

Slides for a talk given at Fluent 2014

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

No Downloads
Views
Total views
1,479
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Managing JavaScript Complexity in Teams - Fluent

  1. 1. JARROD OVERSON MANAGING JAVASCRIPT @jsoversonCOMPLEXITY
  2. 2. WHO IS RIOT
  3. 3. WE MAKE A GAME
  4. 4. A GAME THAT GOT HUGE
  5. 5. BUT I JUST MAKE WEB STUFF
  6. 6. THE WEB IS AWESOME BUT, WE NEED TO TALK.
  7. 7. PEAK OF INFLATED EXPECTATIONS TROUGH OF DISILLUSIONMENT HTML5 MOBILE WEB APPS PLATEAU OF REALITY The Web Platform
  8. 8. 2008 2009 2010 2011 2012 2013 2014 NOW WE CAN MOVE ON
  9. 9. STEP TWO STEP ONE STEP THREE HONESTY
  10. 10. DYNAMIC LANGUAGES ARE MESSY.1. COMING TO TERMS Combine the normal pitfalls with ! • Immature IDEs and tooling • Wildly variable module styles • Best practices that vary monthly • Similar yet vastly different ecosystems
  11. 11. THE TALENT POOL IS NUTS.2. COMING TO TERMS Web Platform Engineers jQuery Experts Made a menu fade in once async wat?
  12. 12. PROGRESS IS STAGGERING.3. COMING TO TERMS It’s hard to keep up. ! Everyone has an opinion. ! The future doesn’t get here all at once.
  13. 13. REFACTORING JAVASCRIPT IS NOT EASY.4. COMING TO TERMS Callback hell is more than just deep nesting. ! IDEs can’t help much yet. ! Flexibility is more important here than anywhere.
  14. 14. THE WEB IS HARD!5. COMING TO TERMS Web applications are not solved. ! Even the giants pivot and backtrack. ! So many solutions just don’t exist yet.
  15. 15. WHY ARE WE EVEN HERE?
  16. 16. JAVASCRIPT
 WON
  17. 17. AND THIS ISN’T EVEN ITS FINAL FORM
  18. 18. STEP ONE STEP THREE ACCEPTANCE STEP TWO
  19. 19. RESPECT YOUR JAVASCRIPT
  20. 20. ‣ Indentation style ‣ Line length ‣ Quote styles ‣ Naming conventions ‣ Curly brace placement ‣ Directory structure ‣ Everything GET EVERYONE TOGETHER ENFORCE ‣ Use community tools ‣ Grunt ‣ Gulp ‣ JSHint ‣ etc ‣ Warnings === errors ‣ Make it hard to be wrong DOCUMENT ‣ Treat docs as code ‣ Make it ‣ easy to find ‣ easy to read ‣ easy to update ‣ easy to discuss ‣ Use github! AGREE
  21. 21. RESPECT THE COMMUNITY
  22. 22. RESPECT THE COMMUNITY >90% use last comma http://sideeffect.kr/popularconvention/#javascript >80% indent with spaces >55% use single quotes https://github.com/Seravo/js-winning-style https://github.com/rwaldron/idiomatic.js/ Research public style guides
  23. 23. VIOLATIONS BEGET VIOLATIONS ALLOW 1 & ALLOW 1,000
  24. 24. KNOW YOUR OPTIONS JSHINT ESLINT JSCS Community-driven JSLint fork. High configurability. JSHint alternative. High configurability. Code style checker. Good complement to JSHint. WHAT ABOUT JSLINT AND CLOSURE LINTER?
  25. 25. KNOW YOUR OPTION’S OPTIONS
  26. 26. BE AGGRESSIVE. YOUR FEELINGS WILL GET HURT.
  27. 27. SMART DEVIATION IS OK AND EXPECTED ! ! function fn(param) { /*jshint eqeqeq:false*/ ! if (param == 42) return; ! }
  28. 28. SET NUMERIC LIMITS "maxparams" : 4 "maxdepth" : 4 "maxstatements" : 20 "maxlen" : 100 "maxcomplexity" : 7
  29. 29. WHAT IS COMPLEXITY? CYCLOMATIC
  30. 30. TECHNICALLY CYCLOMATIC COMPLEXITY IS THE NUMBER OF PATHS THROUGH YOUR CODE
  31. 31. PRACTICALLY CYCLOMATIC COMPLEXITY IS HOW HARD 
 YOUR CODE IS TO TEST
  32. 32. COMPLEXITY : 1 ! function main(a) { ! }
  33. 33. COMPLEXITY : 2 function main(a) { if (a > 5) { } }
  34. 34. COMPLEXITY : ? function main(a) { if (a > 5) { ! } else { ! } }
  35. 35. COMPLEXITY : 3 function main(a) { if (a > 10) { ! } else if(a > 5) { ! } }
  36. 36. COMPLEXITY : ? function main(a) { if (a > 5) { if (a > 10) { ! } } }
  37. 37. 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) { } } }
  38. 38. I KNOW WHAT YOU’RE THINKING I’M GOING TO MAKE THE MOST AMAZING .JSHINTRC EVER
  39. 39. BUT IT’S NOT THAT EASY
  40. 40. STEP TWO STEP ONE PERSEVERANCE STEP THREE
  41. 41. VISUALIZE YOUR GOAL
  42. 42. VISUALIZE YOUR CODE PLATO Your friendly, neighborhood philosopher PLATOJS.ORG
  43. 43. YOUR GOAL
  44. 44. THE PATH FILES PASSING IDEAL SETTINGS
  45. 45. THE PATH FILES IN NEED OF LARGER REFACTOR
  46. 46. THE PATH QUICK WINS
  47. 47. OTHER METRICS HALSTEAD METRICS CODE COVERAGE MAINTAINABILITY LINES OF CODE
  48. 48. MAINTAINABILITY? fn(averageEffort, averageComplexity, averageLines); fn(difficulty, volume) fn(length, vocabulary) fn(uniqueOperators, totalOperands, uniqueOperands) fn(uniqueOperators, uniqueOperands) fn(totalOperators, totalOperands)
  49. 49. MAURICE HALSTEAD HALSTEAD METRICS PHIL BOOTH ARIYA HIDAYATTHOMAS MCCABE CYCLOMATIC COMPLEXITY COMPLEXITY ANALYSIS JS STATIC ANALYSIS WHO TO BLAME
  50. 50. THE UNEXAMINED CODE IS NOT WORTH RELEASING “ ” - SOCRATES
  51. 51. CODE IS NOT JUST LOGIC. CODE IS AN API. TREAT IT LIKE ONE.
  52. 52. Recap PERSEVERANCE The web has unique value, it’s not a cheap alternative to native apps. Embrace the web and JavaScript as your platform. Create new tools. Automate & visualize everything. ACCEPTANCE HONESTY
  53. 53. JARROD OVERSON MANAGING JAVASCRIPT @jsoversonCOMPLEXITY Office hours @ 2:10pm

×