- It will be hard to maintain them
- They will consume a lot of bandwidth
Large files means large amount of bytes to send through the pipe. Hence a less responsive web application. User agents cache script files, but the first time the user sees a web application load is his first and most valuable impression. You would not want to ruin it. Or would you?
HTTP Zip compression is an option if you want to reduce the amount of bytes transferred. But there are certain caveats: first, GZip compression algorithm introduces a server overhead; it consumes a lot of CPU cycles. And if you have a large amount of files and your web site has a high traffic load (both of those are true for most of the AJAX web sites around), your server will stagnate trying to compress your script files. And your audience will not like this at best.
How to Solve this Problem
Since GZip compression is, most of the time, not applicable for contemporary AJAX applications, a text-based compression algorithm seems to be an optimum solution.
So how can we sort this problem out? By splitting it to smaller chunks, of course. We need three separate components:
Pondering on these questions, I stumbled upon two priceless resources that saved months of development time:
As you see, EasyPack is created stepping on the shoulders of these two giants. EasyPack uses Douglas' JSLint for syntax checking and Deans' packer for file compression.
But not only them:
- EasyPack uses orkinos (it is currently more or less a C# wrapper around Deans' code, but I plan to enhance it further) for batch compression operations,
- and sardalya - sarmal dynamic framework as an AJAX stub to glue JSLint and the business tier together.
The license file enclosed in the project archive gives more detailed explanations about those libraries.
EasyPack is aimed for local development environments. It is not recommended for the internet medium. However, if you somehow want (or need) to run it on the Internet, make sure that:
- You have a reliable authentication mechanism
If not, anyone who accesses the application will be able to compress your script files.
- You have full control over your web server
The compression algorithm EasyPack uses consumes considerable amount of CPU. Moreover, it has not been tested in a heavy-load environment. If something goes wrong, you may need to restart the server.
How to use EasyPack
Easy! All you need is to press a single button.
Needless to say, you also need the .NET Framework installed, an IIS server, and a DOM-compliant browser (latest versions of Opera, Mozilla, Firefox, Safari, Camino, Flock, Netscape, or IE will do).
Let us start by running the example project. First of all, you need to edit /resources/metadata/BatchProcess.xml:
F: is the drive that I install my web applications in. Chances are that you don't use the same directory setting as I do. You will need to modify the paths in the XML file so that they map to correct locations.
Here is a sample screen you will see during compression:
And here is the screen you will see when everything finishes successfully:
But what if there is a syntax error in the file? Then, the operation will halt and you will be immediately informed about the error.
After fixing the error, you can click one and only one button of this application to re-validate your script.
When all operation is completed, if you browse to /lib/js/easypack/sandbox/, you will see compressed and uncompressed files together. Take, for example, script1.js:
- script1.h: is the header comment file (this may be a copyright notice) which will be amended to the top of the compressed file.
For the example files in Sandbox, the compression ratio is negative (that is, the uncompressed files are smaller in byte count than the compressed ones). However, in our production AJAX application, which we excessively document using long and meaningful variance names for readability, we achieve an average of 60 to 80 percent compression.
Just think about it. A 100K script file all of a sudden reduces to 40K.
Not that bad, huh?
I use EasyPack all the time for my AJAX application. I find it to be a great time saver. I hope someone finds it useful as much as I do.
- 2006-07-25: Article created.
- 2006-09-21: A tiny bug fix (demo source updated).