I recently had to take over an unfinished project. It was an AJAX control to select multiple friends as you can find it on Facebook.
“It’s 99% complete”, I was told. Yeah, right. I counted 2 story points (without looking at the code). Soon I knew I was too optimistic: Classes calling other classes without logic. Randomly named variables. Data, creation of DOM elements, AJAX calls spread all over the place:
I felt the urge to begin everything from scratch. But I remember Joel Spolsky saying that we should resist so I decided to go for a refactoring.
- Model: All operation on data (i.e. the friends to be selected) is in the classes “ModelFriendListItems” (which aggregates “ModelFriendListItem”). The Ajax request fetching the friend objects from the server is located ther as AJAX is about data.
- View: The three views for the panes “Parent container”, “All friends” and “selected friends”. DOM manipulation only in these classes.
- A controller in charge of instancing and controlling the model and the views. The controller handles all events. No AJAX.
Here’s the sum up of the concerns of the parts:
|DOM manipulation||AJAX calls||Event and input handling|
As every class has his well defined concern you quickly know where to look when you need to maintain or extend the control. The name of the class and files reflects the role (ViewAllFriends.js, ModelFriendsListItems.js). Logical event and data flows.
You can try it here. Here’s how the final version looks:
Well… It took much more than the 2 story points I counted in the beginning. But it feels much better having clean code! And my colleagues having to extend this control (Leo?) are surely happy for this clean up