Chris Powers

JavaScript libraries like jQuery have empowered Web developers to create very complex Web interactions and animations in the browser using simple syntax and few lines of code. Unfortunately, it is also easier than ever to write JavaScript code that is untestable while being difficult to read, extend and maintain.

I will be walking you through a demonstration of seven key steps you can take right now in your own JavaScript code to make it more legible, testable and easy to maintain over time.

Before We Begin...

Download the source code from Github:

    git clone git://github.com/chrisjpowers/js_refactoring_demo.git
  

Please view the README for instructions on getting the app up and running. NOTE: There is a separate Javascript file for each refactoring so that you can clearly see how each step affects the code.

Our Problem

Despite being a very simple, functional app with only 40 lines of Javascript, this code could still use some work:

1. The code lacks legibility -- a reader would probably be lost if it weren't for the code comments.
2. Because all of the code is wrapped up in anonymous functions, these functions cannot be unit tested.
3. Logic for different display items is scattered throughout, which makes it difficult to update the code.
4. While it would certainly be possible to add features and make changes to this codebase, each change would bring additional confusion and code-debt. The goal of refactoring is to bring clarity to the code so that future changes can bring further clarity.

Our Goals

We want to refactor this code in order to...

1. Increase legibility, and subsequently maintainability.
2. DRY up code to remove duplication and increase maintainability.
3. Make the code testable and build a test suite.

Our 7 Steps (Refactorings)

1. Modularize and Namespace Chunks of Logic
2. Extract Anonymous Callbacks into Named Functions
3. Extract Inline Business Logic into Individual Functions
4. Move Logic to the Proper Object
5. Introduce Event Broadcasting
6. DRY Up Constant Values
7. Reuse Objects with Extensible Setup Params

• DRY: "Don't Repeat Yourself" - it refers to code and practices that are intentional about reusing code and keeping logic consolidated into a single place.
• Refactoring: A technique where the programmer makes changes to the codebase that have no affect on a user's experience, but rather improves the quality and legibility of the codebase. DRYing up code could be an example of refactoring.