If you have ever done a bit of web development, and in particular, JavaScript, you must have heard about jQuery, the most popular JavaScript library with more than 50 percent of the worldwide websites using it. To not reinvent the wheel, the OpenLayers development team chose Closure Library rather than jQuery. Why was this decision made? For a better understanding, you need a bit of history of the Web.
In the olden days, there wasn't a lot of JavaScript. All applications were created using simple HTML and CSS. There was dynamic content when reloading a full page using a server-side such as PHP or Java. However, people wanted a smoother web navigation experience. With the way AJAX works it was possible, as illustrated in the following figure, and people began to focus more and more on the client-side:
The main two problems associated with this evolution are:
The more files you have, the more your browser will wait to display pages. The issue here comes from the processing cost to ask for the file, wait for it and then use it. This behavior is called latency. For example, imagine you are at the checkout counter at the supermarket; if ten clients buy one apple, the billing will take longer, than if one client buys ten apples.
The second drawback of this evolution is that browsers have to load more and more resources such as images, CSS, and JavaScript.
The bigger the files are, the longer it will take to retrieve and process the content. The main cause for this is the limited bandwidth. For example, when you are cooking pasta, the more water you put in, the longer you have to wait for the pasta to cook.
When you are at home, you don't really suffer from bandwidth restriction, but in other cases, you will always suffer from high latency. If you are planning to work on mobile support with limited bandwidth, high latency, and a browser with limited memory, it can be a pain.
A good part of the solution lies in compression.
You have three levels of compression available for JavaScript, depending on technology:
Combine without compacting all JavaScript in one file
Combine and compact all JavaScript in one file
Combine, compact, and obfuscate the code
For performance, the last method will work the best, and the Closure Library is the only JavaScript library able to work this way, when combined with Closure Compiler.
Closure Tools, in particular, Closure Library and Closure Compiler are among the best tools to deal with this case.
Although both tools are tightly related, we will review the most useful functions related to Google Closure Library and later explain how to use Closure Compiler to optimize code.