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

Detangling Your JavaScript

2,193

Published on

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

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,193
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
1
Likes
4
Embeds 0
No embeds

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
  • Detangling Your JavaScript

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

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

    ×