Click here to Skip to main content
Click here to Skip to main content

EasyPack - A Pushbutton Batch JavaScript Error Checking, Compression, and Obfuscation Tool

, 21 Sep 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
EasyPack enables syntax checking, validation, compression, and obfuscation of JavaScript files with a single click.

Sample Image - EasyPack.jpg

Introduction

If you are developing a fat-client AJAX application, your JavaScript files are in the order of 3000 to 10000 lines; and you have dozens of those files you will eventually long for a stricter client-side language than JavaScript.

I am one of the above, currently developing an AJAX application. And I am (or I was) fed up with the looseness of JavaScript. So fed up that I decided to write a program that makes my scripts stricter and less error-prone. Hence EasyPack is born.

JavaScript is an object-based (some prefer to call object-oriented, but JavaScript is not object-oriented as Java or C# is), loosely-typed, and prototypical language. Being loosely-typed makes it a perfect candidate for a client-side scripting language.

It was some time ago before the AJAX buzz hit our grounds. With the introduction of AJAX, web applications began to rely more and more on JavaScript (which is a bad thing, but is a subject of another article). Nowadays, seeing a JavaScript file with 10000 or more lines of code is not a big surprise.

If you have several huge JavaScript files at hand:

  • It will be hard to maintain them
  • Since JavaScript is really forgiving on syntax errors, and it is not a type-safe language, chances are that you will not realize some of your JavaScript errors before production phase.

  • 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.

But we have a larger problem here. We need to validate our JavaScript for syntax errors and compress them afterwards.

So how can we sort this problem out? By splitting it to smaller chunks, of course. We need three separate components:

  1. An algorithm to check for JavaScript syntax errors.
  2. An algorithm to compress and obfuscate JavaScript code.
  3. And an algorithm to execute those two in batches. So that I will be able to compress all JavaScript files of my web application with a single button click.

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.

Security Considerations

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:

<file-list>
 <file>F:/WEBS/.../easypack/sandbox/script1_src.js</file>
 <file>F:/WEBS/.../easypack/sandbox/script2_src.js</file>
 <file>F:/WEBS/.../easypack/sandbox/script3_src.js</file>
 <file>F:/WEBS/.../easypack/sandbox/script4_src.js</file>
 <file>F:/WEBS/.../easypack/sandbox/script5_src.js</file> 
</file-list>

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.

After having tweaked the XML, all you need to do is to click the button and watch EasyPack validate and compress the JavaScript files in /lib/js/easypack/sandbox.

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.

Beware that EasyPack has stricter requirements for JavaScript syntax. Which is, in my opinion, good because it keeps your source code strictly organized. If you are involved in an AJAX project, team organization has vital importance.

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_src.js: is the uncompressed JavaScript file that you use in your development environment. Add extensive comments, give meaningful variance names, and indent the code and document it as much as you can so that your team member (hopefully) understands what that script is for at a glance.
  • script1.h: is the header comment file (this may be a copyright notice) which will be amended to the top of the compressed file.
  • script1.js: is the compressed and obfuscated JavaScript 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?

Conclusion

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.

Happy coding!

History

  • 2006-07-25: Article created.
  • 2006-09-21: A tiny bug fix (demo source updated).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

volkan.ozcelik
Web Developer
Turkey Turkey
Volkan is a java enterprise architect who left his full-time senior developer position to venture his ideas and dreams. He codes C# as a hobby, trying to combine the .Net concept with his Java and J2EE know-how. He also works as a freelance web application developer/designer.
 
Volkan is especially interested in database oriented content management systems, web design and development, web standards, usability and accessibility.
 
He was born on May '79. He has graduated from one of the most reputable universities of his country (i.e. Bogazici University) in 2003 as a Communication Engineer. He also has earned his Master of Business Administration degree from a second university in 2006.

Comments and Discussions

 
GeneralEasyPack wiki page Pinmembervolkan.ozcelik3-Aug-06 5:32 
GeneralRe: EasyPack wiki page PinmemberßahadirCambel26-Sep-06 5:22 
GeneralRe: EasyPack wiki page Pinmembervolkan.ozcelik26-Sep-06 7:04 
GeneralGood idea PinmemberPaulNeyman3-Aug-06 3:53 
GeneralRe: Good idea Pinmembervolkan.ozcelik3-Aug-06 5:29 
GeneralRe: Good idea PinmemberPaulNeyman4-Aug-06 1:30 
GeneralRe: Good idea Pinmembervolkan.ozcelik4-Aug-06 2:02 
Answer[SOLVED] Pinmembervolkan.ozcelik21-Sep-06 10:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141216.1 | Last Updated 21 Sep 2006
Article Copyright 2006 by volkan.ozcelik
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid