Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Maintainability SFJS Sept 4 2014

1,224 views

Published on

Talk given at SFJS in September 2014 on tools that can be used to increase the maintainability of javascript applications.

Published in: Technology
  • Be the first to comment

Maintainability SFJS Sept 4 2014

  1. 1. Achieving Maintainability Jarrod Overson - @jsoverson
  2. 2. a . k . a .
  3. 3. Idiot proofing your code
  4. 4. ( psst, we’re all idiots )
  5. 5. We do stuff like… ❯ pi 3.141592653589793 ❯ pi(2) 6.283185307179586
  6. 6. Or… ❯ 4..days 345600000 ❯ 60..seconds 60000
  7. 7. And even… <script src="#"></script>
  8. 8. What was clever six months ago
  9. 9. Is idiotic today
  10. 10. We’re not awful people
  11. 11. We’re just smart
  12. 12. smart We’re just lazy
  13. 13. We’re just smart lazy bored
  14. 14. We’re just smart lazy bored evil
  15. 15. We’re just doing our job
  16. 16. And our job is hard
  17. 17. How do we get better at it?
  18. 18. 1 EXAMINE 2 3
  19. 19. How much analysis do you run on your code?
  20. 20. It’s not enough.
  21. 21. KNOW YOUR LINTERS JSHINT ESLINT JSCS Community-driven JSLint fork. High configurability. JSHint alternative. High configurability. Code style checker. Separate and complementary. WHAT ABOUT JSLINT AND CLOSURE LINTER?
  22. 22. KNOW YOUR LINTER’S OPTIONS
  23. 23. SET LIMITS "maxparams" : 4 "maxdepth" : 4 "maxstatements" : 20 "maxlen" : 100 "maxcomplexity" : 7
  24. 24. WHAT IS CYCLOMATIC COMPLEXITY?
  25. 25. TECHNICALLY CYCLOMATIC COMPLEXITY IS THE NUMBER OF PATHS THROUGH YOUR CODE
  26. 26. PRACTICALLY CYCLOMATIC COMPLEXITY IS HOW HARD YOUR CODE IS TO TEST
  27. 27. COMPLEXITY : 1 ! function main(a) { ! }
  28. 28. function main(a) { if (a > 5) { } } COMPLEXITY : 2
  29. 29. function main(a) { if (a > 5) { ! } else { ! } } COMPLEXITY : ?
  30. 30. function main(a) { if (a > 10) { ! } else if(a > 5) { ! } } COMPLEXITY : 3
  31. 31. function main(a) { if (a > 5) { if (a > 10) { ! } } } COMPLEXITY : 3
  32. 32. function main(a) { if (a) { } else if (a) { } ! if (other) { } ! for (var i = 0; i < a; i++) { if (i % 2) { } else if (i % 3) { } } } COMPLEXITY : 7
  33. 33. GENERATE VISUAL REPORTS
  34. 34. code coverage istanbul blanket jscover
  35. 35. plato complexity lint errors maintainability
  36. 36. MAINTAINABILITY? fn(averageEffort, averageComplexity, averageLines); fn(difficulty, volume) fn(length, vocabulary) fn(uniqueOperators, totalOperands, uniqueOperands) fn(totalOperators, totalOperands) fn(uniqueOperators, uniqueOperands)
  37. 37. doc coverage this doesn’t exist
  38. 38. 1 2 AUTOMATE 3
  39. 39. IF IT’S NOT EASY It won’t get done.
  40. 40. IF IT’S NOT AUTOMATIC It won’t get done every time.
  41. 41. IF IT’S NOT VISIBLE It may as well not be done at all.
  42. 42. Build first Before you write code, set up your build
  43. 43. But I don’t wanna!
  44. 44. Look into yeoman Manages file copies, conflicts, prompts, defaults
  45. 45. But I don’t want to learn Yeoman!
  46. 46. $ npm install yo generator-generator ! $ mkdir generator-myWorkflow ! $ cd generator-myWorkflow ! $ yo generator
  47. 47. But I don’t need all that!
  48. 48. Delete, add, and modify It’s surprisingly easy.
  49. 49. Grunt vs Gulp it doesn’t matter, just choose one.
  50. 50. What about… • MAKE • RAKE • JAKE • ANT • BROCCOLI • blahhhh…
  51. 51. It doesn’t matter. Just choose one. ( but be ready to support it )
  52. 52. Want code coverage? grunt-contrib-jasmine grunt-mocha-istanbul grunt-jscoverage and 30 more
  53. 53. Want linting? grunt-contrib-jshint grunt-eslint grunt-jscs-checker and 50 more
  54. 54. Want docs? grunt-contrib-yuidoc grunt-jsdoc grunt-docco and 90+ more
  55. 55. There’s no excuse for manual process
  56. 56. 1 2 3 PROTECT
  57. 57. ‣ Code style ‣ Metrics ‣ Build tools ‣ Data formats ‣ Naming conventions ‣ Curly Braces ‣ Directory structure ‣ Everything ENFORCE ‣ Automate Everything ‣ VCS hooks ‣ CI ‣ Code reviews ‣ Reports ‣ Everything ‣ 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 GET EVERYONE TOGETHER
  58. 58. Your automation choice needs to accommodate enforcement
  59. 59. Recap your analysis your enforcement your everything Automate Automate Automate
  60. 60. Interested in why a security hardware startup attracted so many JavaScript developers? Come talk to us! esprima venus plato grunt-contrib
  61. 61. Achieving Maintainability Jarrod Overson - @jsoverson

×