fight the rot - refactor stinky javascript
DESCRIPTION
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.TRANSCRIPT
![Page 1: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/1.jpg)
Fight the RotRefactor stinky JavaScript
@damienklinnertDonnerstag, 18. Juli 13
![Page 2: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/2.jpg)
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
![Page 3: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/3.jpg)
Donnerstag, 18. Juli 13
![Page 4: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/4.jpg)
WAAAAAT???Donnerstag, 18. Juli 13
![Page 5: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/5.jpg)
Donnerstag, 18. Juli 13
![Page 6: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/6.jpg)
the hacky way ™
Donnerstag, 18. Juli 13
![Page 7: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/7.jpg)
Donnerstag, 18. Juli 13
![Page 8: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/8.jpg)
Donnerstag, 18. Juli 13
![Page 9: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/9.jpg)
done!(?)git add * && git commit && git push
Donnerstag, 18. Juli 13
![Page 10: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/10.jpg)
6 minutes passed now
Donnerstag, 18. Juli 13
![Page 11: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/11.jpg)
Refactoring
Donnerstag, 18. Juli 13
![Page 12: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/12.jpg)
Donnerstag, 18. Juli 13
![Page 13: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/13.jpg)
Donnerstag, 18. Juli 13
![Page 14: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/14.jpg)
Donnerstag, 18. Juli 13
![Page 15: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/15.jpg)
Donnerstag, 18. Juli 13
![Page 16: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/16.jpg)
Donnerstag, 18. Juli 13
![Page 17: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/17.jpg)
Donnerstag, 18. Juli 13
![Page 18: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/18.jpg)
Donnerstag, 18. Juli 13
![Page 19: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/19.jpg)
step by step tut
Donnerstag, 18. Juli 13
![Page 20: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/20.jpg)
done!(?)git add * && git commit && git push
Donnerstag, 18. Juli 13
![Page 21: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/21.jpg)
refactoring is disciplined technique for restructuring an existing body of code, altering its internal structure without
changing its external behavior
Donnerstag, 18. Juli 13
![Page 22: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/22.jpg)
refactoring
• break dependencies
• bring system under tests
• refactor
• add feature
• measure code quality
Donnerstag, 18. Juli 13
![Page 23: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/23.jpg)
break dependencies
• factories, abstract factories
• dependency injection knit.js
• pass as parameter
Donnerstag, 18. Juli 13
![Page 24: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/24.jpg)
add tests
• mocha, karma.js
• instrument with istanbul, js-coverage
• test current behavior, not expected
Donnerstag, 18. Juli 13
![Page 25: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/25.jpg)
refactor
• few good tools around for js
• pair programming
tools sublime plugin, no really tools
Donnerstag, 18. Juli 13
![Page 26: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/26.jpg)
add feature
• design patterns
Donnerstag, 18. Juli 13
![Page 27: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/27.jpg)
measure code quality
• plato.js
• jscomplexity
• node-madge
Donnerstag, 18. Juli 13
![Page 28: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/28.jpg)
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
![Page 29: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/29.jpg)
bad code
• detect with jsmeter
• or jshint complexity settings
• not linted
• not tested
• complex
Donnerstag, 18. Juli 13
![Page 30: Fight the Rot - Refactor stinky JavaScript](https://reader033.vdocument.in/reader033/viewer/2022052315/554a4864b4c905293a8b56da/html5/thumbnails/30.jpg)
thank you!
follow me on twitter @damienklinnert
Donnerstag, 18. Juli 13