Detangling YourJavaScript
An Intro to JS Refactoring
Chris PowersConsultant with //obtiva
http://obtiva.com@chrisjpowers
3 Kinds of People Deal with Tangled Code
Consultants
New Hires
...and Everyone Else!
We all work with Tangled 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 will become “bad” code eventually 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 is code 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 than reading 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 your complex code simple.
Simple code is...
#1Tested
#2Reveals Intent
#3DRY - Each piece of knowledge 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 #2Document
Responsibilities with Comments
Refactoring #3Extract Methods
Refactoring #4Improve Variable
Names
Refactoring #5Add Local Vars to Improve Legibility
Keep Extracting Functions
Refactoring #6Add Clarity with Underscore.js
Refactoring #7Isolate Display Logic
Refactoring #8Isolate DOM Manipulation
Refactoring #9Hide “Private”
Methods in Closures
Refactoring #10Scope Public Methods
in Namespaces
Refactoring #11Use Tiered
Sub-Namespaces
Refactoring #12Extend Namespaces(Don’t Overwrite)
Refactoring #13DRY Up Namespace
Initialization
Resources
http://pivotal.github.com/jasmine/
http://javascriptmasters.com
Signup Code: ccc2011
ccc2011
Got questions?@chrisjpowers