Refactoring Javascript with Derick Bailey

I have subscribed to Derick Bailey's blog for several years. He is one of my favorite Los Techies. I think he has a firm understanding of agile development practices and is one of the many progressive .NET developers to jump ship and start doing Rails development. So I was pretty excited to see he was producing his own screencast series over at WatchMeCode.net.

I am a rabid consumer of screencasts and even attempt to produce some of my own. So I am aware of some of the time and effort needed to create a quality screencast. Derick's initial offering is a bit pricey at $14 for a single screencast, but you do get to download the video and do whatever you want with it. Derick offers HD 1680x1050 and iOS ready 720p versions. The encoding is very good, text is quite readable and the sound quality is great.

The screencast is on Refactoring Javascript. Derick uses a real world project, his Backbone plugin Memento. Using a suit of Jasmine specifications for the existing codebase, he walks through a set refactorings to modify the codebase while not causing the any tests to fail.

Derick starts out by first wrapping his current plugin's implementation in a module and explicitly exposing a public API. In this refactoring he introduces a Memento object that represents the public API he wants to expose to users. He then moves on to introduce an internal Serializer object that handles all serialization concerns. This refactoring leaves his original code fairly lean and responsible for stack manipulation, so he names it as MementoStack. While he is focusing on clearly defining single purpose types, he identifies several minor smells like excessive guard clauses and repetitive if switches related to the type of Model being stored. He introduces a TypeHelper type that encapsulates the type decision and exposes a single API, which removes the concern from the other objects. This was a particularly clever refactoring which was worth seeing. After all the refactoring, Derick is able to identify a couple of bits of redundant code that he quickly explains and removes. This refactoring was interesting in that it wasn't very apparent until the other refactorings had paired his code down to small easily digestible functions. Finally, he breaks a dependency from the MementoStack to the Serializer, by pushing the interaction concern up into the main Memento object greatly simplifying the two and giving the Memento object behavior.

Derick was able to completely refactor his plugin and end the session with his original Jasmine test suit all green. It was very enlightening to to wach him make a modification, run the tests, troubleshoot any failing tests until they passed, then start the whole cycle again. These failing test situations were not simple contrived examples, you could hear the surprise in Derick's voice as tests failed. Listening to his troubleshooting techniques in these real situations was pretty fun.

So, was the video worth the $14? Yes, absolutely. I will most likely watch it several times and will revisit when I am working with Javascript. I would not recommend the video for javascript beginners though. You should probably have some javascript experience, at least be comfortable with free form jquery, before watching. There are some advanced concepts here that might confuse you at first.