I wanted to write a technical post about a project I’ve undertaken in my job at CBC Music this last year: the refactor of their mobile site codebase. Since starting at the CBC last May (2013) my chief responsibility has been to lead this project, so it was great to see it launch last month.
Maybe I’ll start by outlining the problem I was tasked to solve.
The mobile code – which was already out in the wild when I joined – was perfectly decent, but lacked scalability both in terms of the overall code architecture and in what was doled up to the client. The JS was arranged in a simple object namespace, which was generally quite readable but had already led to a great deal of unnecessary and unfortunate coupling.
Worse, all JS was sent to the client on initial page load. Each and every sprint (we were on a weekly sprint cycle at the time) led to 10KB, 20KB, 30KB+ increases of the resource size and they knew that this problem was only going to be compounded over time.
What we needed was to update the codebase for on-demand loading, and rethink the overall JS architecture for a simpler, more formal structure to improve the overall code quality, and to make it simpler for junior developers to work with it.