Creating a 100K LOC Application in JavaScript with Closure and plovr

Last night at an MIT infosession for Yext, I presented some statistics about the codebase for Yext Rep, which is our free, online reputation management system for local businesses. Rep is a substantial Rich Internet Application (RIA), topping out at just over 144K lines of JavaScript and Closure Templates, which amounts to over 4MB of JavaScript. In the spirit of a traditional RIA, Rep is a single web page that dynamically loads both code and data via AJAX (navigation state is stored in the URL fragment, just like in Gmail).

The first challenge in writing a 100K LOC JavaScript application is managing the codebase. Fortunately, the Closure Library provides both a comprehensive API and a meaningful way to organize dependencies in JavaScript. By using thoughtful namespaces and explicit dependencies, it is easy to find the functionality you are looking for and to build things up without creating cyclical dependencies.

The second challenge, of course, is getting the application to load quickly even though there is 4380K of JavaScript to send down to the browser. Any solution that would prevent Rep from loading quickly would not be an option. As you may have guessed, leveraging Closure makes it possible for us to reduce that 4380K down to 73K, which is less than 2% of the original size. Here is how it breaks down:

KB	Technique
4380	Original JavaScript
709	Compilation using the Advanced mode of the Closure Compiler (84% reduction)
215	Dividing the compiled code into modules using plovr (70% reduction)
73	gzip (66% reduction)

One of the less commonly known techniques that we use is dividing JavaScript into modules. This is a feature of the Closure Compiler, but using plovr makes the module splitting feature of the Compiler far more accessible and manageable. Over the weekend, I worked on improving module support in plovr. There are still a few bugs left to shake out, but I plan to do another release of plovr with more detailed documentation on modules soon.

Want to learn more about Closure? Pick up a copy of my new book, Closure: The Definitive Guide (O'Reilly), and learn how to leverage Closure to create your own RIA!