Detangling Your JavaScript

  • 2,010 views
Uploaded on

This is an introduction to refactoring techniques for JavaScript code that works but is legacy, poorly written or otherwise "tangled."

This is an introduction to refactoring techniques for JavaScript code that works but is legacy, poorly written or otherwise "tangled."

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,010
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
20
Comments
1
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Detangling Your JavaScriptAn Intro to JS Refactoring
  • 2. Chris PowersConsultant with //obtivahttp://obtiva.com@chrisjpowers
  • 3. 3 Kinds of People Deal with Tangled Code
  • 4. Consultants
  • 5. New Hires
  • 6. ...and Everyone Else!
  • 7. We all work withTangled code on a daily basis
  • 8. What is “Tangled” JavaScript?
  • 9. It is not BAD code!
  • 10. Bad code doesn’t work.
  • 11. Tangled code does work!
  • 12. Tangled code willbecome “bad” codeeventually because...
  • 13. Tangled code is hard to read and understand.
  • 14. Tangled code is hard to update and maintain.
  • 15. Tangled code is easy to accidentally break.
  • 16. “Tangled code iscode based on lost requirements.” - Noel Rappin
  • 17. Got Tangled Code? Do you...
  • 18. Option #1:Big Bang Rewrite
  • 19. Option #2:Detangle (Refactor)
  • 20. ALWAYS Detangle! NEVER Rewrite!
  • 21. Rewrites are tempting
  • 22. Coders want to Code!
  • 23. Writing codeis easier thanreading code.
  • 24. You CANNOT rewrite code you don’t understand.
  • 25. Your rewrite will likely miss requirements
  • 26. In your client’s eyes,your rewrite will be worse than the original.
  • 27. What is Refactoring?
  • 28. Methodically improving code quality without altering behavior.
  • 29. Making yourcomplex code simple.
  • 30. Simple code is...
  • 31. #1Tested
  • 32. #2Reveals Intent
  • 33. #3DRY - Each piece ofknowledge exists in only one place
  • 34. #4Small
  • 35. Let’s Start Detangling...
  • 36. First Things First: Set a Goal
  • 37. How much code needs to be refactored? How deeply?
  • 38. Write a Test!
  • 39. Why write tests?
  • 40. Makes the code simple
  • 41. Ensures BehaviorDoes Not Change
  • 42. Forces Developer to Understand Requirements
  • 43. Refactoring #1Name the Anonymous Functions
  • 44. Refactoring #2 DocumentResponsibilities with Comments
  • 45. Refactoring #3Extract Methods
  • 46. Refactoring #4Improve Variable Names
  • 47. Refactoring #5Add Local Vars toImprove Legibility
  • 48. Keep Extracting Functions
  • 49. Refactoring #6Add Clarity with Underscore.js
  • 50. Refactoring #7Isolate Display Logic
  • 51. Refactoring #8 Isolate DOM Manipulation
  • 52. Refactoring #9 Hide “Private”Methods in Closures
  • 53. Refactoring #10Scope Public Methods in Namespaces
  • 54. Refactoring #11 Use TieredSub-Namespaces
  • 55. Refactoring #12Extend Namespaces (Don’t Overwrite)
  • 56. Refactoring #13DRY Up Namespace Initialization
  • 57. Resources
  • 58. http://pivotal.github.com/jasmine/
  • 59. http://obtiva.com/blog
  • 60. http://javascriptmasters.com
  • 61. http://javascriptmasters.comSignup Code: ccc2011 ccc2011
  • 62. Got questions?@chrisjpowers