Progressive JavaScript

diagram of code splitting

Google developers work hard to make web pages responsive, and one area they struggle with is on loading the JavaScript code without too large of pauses. The JavaScript for a modern web site can be over a megabyte, causing delays for the network download as well as for loading into an active web page.

I developed a code splitter for the Google Web Toolkit to help developers with this problem. Some notable aspects of the project:

  • It splits the code anywhere a developer likes without forcing them to adjust their module structure. As in several other parts of GWT, much of what the tool really does is allow you to organize your code one way during development and a different way for deployment.
  • I coordinated with the GWT Compile Report so that if developers saw more code than they expected being initially download, they could understand the reasoning of the code splitter and adjust their code to avoid the problem. This is a form of profiling tool, but rather than profiling CPU or memory usage, it profiles JavaScript code size usage.
  • I developed and socialized supporting coding patterns such as the Async Provider pattern.

The GWT code splitter has been used by top-priority web sites including Google AdWords and Google Wallet.

As an aside, we submitted a research paper on how it works. One reviewer told us that it can’t be done, because you can’t do static analysis on JavaScript. One reviewer said it’s trivially easy. One reviewer said that it’s not an OO paper but rather a web paper. We then sent it to a web conference, and a reviewer told us it’s a compiler paper, not a web paper.