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.
Jarrod Overson - @jsoverson Achieving Maintainability
a. k. a.
Idiot proofing your code
( psst, we’re all idiots )
We do stuff like… ❯ pi 3.141592653589793 ❯ pi(2) 6.283185307179586
Or… ❯ 4..Days() 345600000 ❯ 60..Seconds() 60000
And even… <script src="#"></script>
What was clever six months agoclever
Is idiotic todayidiotic
We’re not awful people
We’re just smart
We’re just lazy smart
We’re just lazy smart bored
We’re just lazy smart bored evil
We’re just doing our job
And our job is hard
How do we get better at it?
EXAMINE1 2 3
How much analysis do you run on your code?
It’s not enough.
KNOW YOUR LINTERS JSHINT ESLINT JSCS Community-driven JSLint fork. High configurability. JSHint alternative. High configur...
KNOW YOUR LINTER’S OPTIONS
"maxparams" : 4 "maxdepth" : 4 "maxstatements" : 20 "maxlen" : 100 "maxcomplexity" : 7 SET NUMERIC LIMITS
WHAT IS CYCLOMATIC COMPLEXITY?
CYCLOMATIC COMPLEXITY IS THE NUMBER OF PATHS THROUGH YOUR CODE TECHNICALLY
CYCLOMATIC COMPLEXITY IS HOW HARD 
 YOUR CODE IS TO TEST PRACTICALLY
! function main(a) { ! } COMPLEXITY : 1
function main(a) { if (a > 5) { } } COMPLEXITY : 2
function main(a) { if (a > 5) { ! } else { ! } } COMPLEXITY : ?
function main(a) { if (a > 10) { ! } else if(a > 5) { ! } } COMPLEXITY : 3
function main(a) { if (a > 5) { if (a > 10) { ! } } } COMPLEXITY : 3
function main(a) { if (a) { } else if (a) { } ! if (other) { } ! for (var i = 0; i < a; i++) { if (i % 2) { } else if (i %...
GENERATE VISUAL REPORTS
code coverage istanbul jscover blanket
plato complexity maintainability lint errors
MAINTAINABILITY? fn(averageEffort, averageComplexity, averageLines); fn(difficulty, volume) fn(length, vocabulary) fn(uniq...
doc coverage this exist doesn’t
AUTOMATE2 3 1
IF IT’S NOT EASY It won’t be done IF IT’S NOT AUTOMATED It will only get done once. IF IT’S NOT VISUALIZED It might as wel...
Build first Before you write code, set up your build
But that’s annoying!
Look into yeoman Manages file copies, conflicts, prompts, defaults
But I don’t want to learn Yeoman!
$ npm install yo generator-generator ! $ mkdir generator-myWorkflow ! $ cd generator-myWorkflow ! $ yo generator
But I don’t need all that!
Delete, add, and modify It’s surprisingly easy.
Grunt VS Gulp it doesn’t matter, just choose one.
What about… • MAKE • RAKE • JAKE • ANT • BROCCOLI • blahhhh…
it doesn’t matter just choose one. ( but be ready to support it )
Want code coverage? grunt-contrib-jasmine grunt-mocha-istanbul grunt-jscoverage and 30 more
Want linting? grunt-contrib-jshint grunt-eslint grunt-jscs-checker and 50 more
Want docs? grunt-contrib-yuidoc grunt-jsdoc grunt-docco and 90+ more
There’s no excuse for manual process
PROTECT3 1 2
‣ Code style ‣ Metrics ‣ Build tools ‣ Data formats ‣ Naming conventions ‣ Curly Braces ‣ Directory structure ‣ Everything...
Your automation choice needs to accommodate enforcement
Recap your analysis your enforcement your everything Automate Automate Automate
Jarrod Overson - @jsoverson Achieving Maintainability
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Idiot proofing your code
Upcoming SlideShare
Loading in …5
×

Idiot proofing your code

1,063 views

Published on

Talk given at South Bay JS in Jun-2014 about automation, complexity, and creating maintainable projects.

Published in: Technology
no profile picture user

  • Be the first to comment

  • Be the first to like this

Idiot proofing your code

  1. 1. Jarrod Overson - @jsoverson Achieving Maintainability
  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 agoclever
  9. 9. Is idiotic todayidiotic
  10. 10. We’re not awful people
  11. 11. We’re just smart
  12. 12. We’re just lazy smart
  13. 13. We’re just lazy smart bored
  14. 14. We’re just lazy smart 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. EXAMINE1 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. "maxparams" : 4 "maxdepth" : 4 "maxstatements" : 20 "maxlen" : 100 "maxcomplexity" : 7 SET NUMERIC LIMITS
  24. 24. WHAT IS CYCLOMATIC COMPLEXITY?
  25. 25. CYCLOMATIC COMPLEXITY IS THE NUMBER OF PATHS THROUGH YOUR CODE TECHNICALLY
  26. 26. CYCLOMATIC COMPLEXITY IS HOW HARD 
 YOUR CODE IS TO TEST PRACTICALLY
  27. 27. ! function main(a) { ! } COMPLEXITY : 1
  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 jscover blanket
  35. 35. plato complexity maintainability lint errors
  36. 36. MAINTAINABILITY? fn(averageEffort, averageComplexity, averageLines); fn(difficulty, volume) fn(length, vocabulary) fn(uniqueOperators, totalOperands, uniqueOperands) fn(uniqueOperators, uniqueOperands) fn(totalOperators, totalOperands)
  37. 37. doc coverage this exist doesn’t
  38. 38. AUTOMATE2 3 1
  39. 39. IF IT’S NOT EASY It won’t be done IF IT’S NOT AUTOMATED It will only get done once. IF IT’S NOT VISUALIZED It might as well not be done at all
  40. 40. Build first Before you write code, set up your build
  41. 41. But that’s annoying!
  42. 42. Look into yeoman Manages file copies, conflicts, prompts, defaults
  43. 43. But I don’t want to learn Yeoman!
  44. 44. $ npm install yo generator-generator ! $ mkdir generator-myWorkflow ! $ cd generator-myWorkflow ! $ yo generator
  45. 45. But I don’t need all that!
  46. 46. Delete, add, and modify It’s surprisingly easy.
  47. 47. Grunt VS Gulp it doesn’t matter, just choose one.
  48. 48. What about… • MAKE • RAKE • JAKE • ANT • BROCCOLI • blahhhh…
  49. 49. it doesn’t matter just choose one. ( but be ready to support it )
  50. 50. Want code coverage? grunt-contrib-jasmine grunt-mocha-istanbul grunt-jscoverage and 30 more
  51. 51. Want linting? grunt-contrib-jshint grunt-eslint grunt-jscs-checker and 50 more
  52. 52. Want docs? grunt-contrib-yuidoc grunt-jsdoc grunt-docco and 90+ more
  53. 53. There’s no excuse for manual process
  54. 54. PROTECT3 1 2
  55. 55. ‣ 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
  56. 56. Your automation choice needs to accommodate enforcement
  57. 57. Recap your analysis your enforcement your everything Automate Automate Automate
  58. 58. Jarrod Overson - @jsoverson Achieving Maintainability

×