Fight the Rot
Refactor stinky JavaScript
@damienklinnert
Donnerstag, 18. Juli 13
a typical day?
• Mr. Wheatley, owner of Copy+Paste
Inc., asks for a (simple) change in his
web store
• backstage passes sh...
Donnerstag, 18. Juli 13
WAAAAAT???
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
the hacky way ™
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
done!(?)
git add * && git commit && git push
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Refactoring
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
Donnerstag, 18. Juli 13
step by step tut
Donnerstag, 18. Juli 13
done!(?)
git add * && git commit && git push
Donnerstag, 18. Juli 13
refactoring is disciplined technique for
restructuring an existing body of code,
altering its internal structure without
c...
refactoring
• break dependencies
• bring system under tests
• refactor
• add feature
• measure code quality
Donnerstag, 18...
break dependencies
• factories, abstract factories
• dependency injection knit.js
• pass as parameter
Donnerstag, 18. Juli...
add tests
• mocha, karma.js
• instrument with istanbul, js-coverage
• test current behavior, not expected
Donnerstag, 18. ...
refactor
• few good tools around for js
• pair programming
Donnerstag, 18. Juli 13
add feature
• design patterns
Donnerstag, 18. Juli 13
measure code quality
• plato.js
• jscomplexity
• node-madge
Donnerstag, 18. Juli 13
clean code
• everything is pretty much what you
expect
• documented
• as if by one and the same author
• following your st...
bad code
• detect with jsmeter
• or jshint complexity settings
• not linted
• not tested
• complex
Donnerstag, 18. Juli 13
thank you!
follow me on twitter @damienklinnert
Donnerstag, 18. Juli 13
Upcoming SlideShare
Loading in...5
×

Fight the Rot - Refactor stinky JavaScript

325

Published on

Is you node.js application hard to maintain? Is your buglist growing while the list of deployable features shrinks? Is bad code slowing you down? Then the rot has taken over and you are probably afraid of touching your code.

I will show you how to start refactoring, when there are no tests around, no documentation exists, and architecture is hard to understand. Covering strategy, unit tests, documentation, measuring progress, tools, best practices and things to avoid.

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

  • Be the first to like this

No Downloads
Views
Total Views
325
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fight the Rot - Refactor stinky JavaScript

  1. 1. Fight the Rot Refactor stinky JavaScript @damienklinnert Donnerstag, 18. Juli 13
  2. 2. a typical day? • Mr. Wheatley, owner of Copy+Paste Inc., asks for a (simple) change in his web store • backstage passes should rise by 3 points in quality, if there are less than 6 days to event Donnerstag, 18. Juli 13
  3. 3. Donnerstag, 18. Juli 13
  4. 4. WAAAAAT??? Donnerstag, 18. Juli 13
  5. 5. Donnerstag, 18. Juli 13
  6. 6. the hacky way ™ Donnerstag, 18. Juli 13
  7. 7. Donnerstag, 18. Juli 13
  8. 8. Donnerstag, 18. Juli 13
  9. 9. done!(?) git add * && git commit && git push Donnerstag, 18. Juli 13
  10. 10. Donnerstag, 18. Juli 13
  11. 11. Refactoring Donnerstag, 18. Juli 13
  12. 12. Donnerstag, 18. Juli 13
  13. 13. Donnerstag, 18. Juli 13
  14. 14. Donnerstag, 18. Juli 13
  15. 15. Donnerstag, 18. Juli 13
  16. 16. Donnerstag, 18. Juli 13
  17. 17. Donnerstag, 18. Juli 13
  18. 18. Donnerstag, 18. Juli 13
  19. 19. step by step tut Donnerstag, 18. Juli 13
  20. 20. done!(?) git add * && git commit && git push Donnerstag, 18. Juli 13
  21. 21. refactoring is disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior Donnerstag, 18. Juli 13
  22. 22. refactoring • break dependencies • bring system under tests • refactor • add feature • measure code quality Donnerstag, 18. Juli 13
  23. 23. break dependencies • factories, abstract factories • dependency injection knit.js • pass as parameter Donnerstag, 18. Juli 13
  24. 24. add tests • mocha, karma.js • instrument with istanbul, js-coverage • test current behavior, not expected Donnerstag, 18. Juli 13
  25. 25. refactor • few good tools around for js • pair programming Donnerstag, 18. Juli 13
  26. 26. add feature • design patterns Donnerstag, 18. Juli 13
  27. 27. measure code quality • plato.js • jscomplexity • node-madge Donnerstag, 18. Juli 13
  28. 28. clean code • everything is pretty much what you expect • documented • as if by one and the same author • following your style guide Donnerstag, 18. Juli 13
  29. 29. bad code • detect with jsmeter • or jshint complexity settings • not linted • not tested • complex Donnerstag, 18. Juli 13
  30. 30. thank you! follow me on twitter @damienklinnert Donnerstag, 18. Juli 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×