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

1. Detangling Your
JavaScript
An Intro to JS Refactoring

2. Chris Powers
Consultant with //obtiva
http://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 with
Tangled 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 will
become “bad” code
eventually 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 is
code 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 code
is easier than
reading 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 your
complex code simple.

30. Simple code is...

31. #1
Tested

32. #2
Reveals Intent

33. #3
DRY - Each piece of
knowledge exists in
only one place

34. #4
Small

35. Let’s Start Detangling...

37. First Things First:
Set a Goal

38. How much code needs
to be refactored?
How deeply?

39. Write a Test!

41. Why write tests?

42. Makes the code simple

43. Ensures Behavior
Does Not Change

44. Forces Developer to
Understand
Requirements

45. Refactoring #1
Name the Anonymous
Functions

47. Refactoring #2
Document
Responsibilities with
Comments

49. Refactoring #3
Extract Methods

51. Refactoring #4
Improve Variable
Names

53. Refactoring #5
Add Local Vars to
Improve Legibility

55. Keep Extracting
Functions

57. Refactoring #6
Add Clarity with
Underscore.js

59. Refactoring #7
Isolate Display Logic

61. Refactoring #8
Isolate DOM
Manipulation

63. Refactoring #9
Hide “Private”
Methods in Closures

65. Refactoring #10
Scope Public Methods
in Namespaces

67. Refactoring #11
Use Tiered
Sub-Namespaces

69. Refactoring #12
Extend Namespaces
(Don’t Overwrite)

71. Refactoring #13
DRY Up Namespace
Initialization

74. Resources

75. http://pivotal.github.com/jasmine/

76. http://obtiva.com/blog

77. http://javascriptmasters.com

78. http://javascriptmasters.com
Signup Code: ccc2011
ccc2011

79. Got questions?
@chrisjpowers