April 20, 2016 – Guy Royse

jQuery & 10,000 Global Functions: Working with Legacy JavaScript

Long ago, in the late days of the first Internet boom, before jQuery, before Underscore, before Angular, there was a web application built by a large corporation. This application was written as a server-side application using server-side technology like Java or PHP. A tiny seed of JavaScript was added to some of the pages of this application to give it a little sizzle.

Over the ages, this tiny bit of JavaScript grew like kudzu. Most of it was embedded in the HTML in SCRIPT tags. Some of it was dynamically generated by the server-side code. Browser specific hacks were added. An AJAX call was added. jQuery was added. Helper functions were added. Lots of helper functions. So many helper functions.

In time pyramids of doom built from anonymous callbacks and hundreds, nay, thousands of interdependent global functions ruled the day. And the programmers did despair. They cried to put the code under test that it might be refactored. “Add unit tests”, they exhorted. But, lo, there were no units to test, only anonymous functions.

Does this sound like your current application? I know I’ve worked on a lot of codebases just like this one. I’ve come up with some techniques to refactor them and put them under test (so the real refactoring can begin). In this session I will share them with you.