Tiny is the new Big

Maybe for something, being bigger means better.  But not for TubeCaption.  I spent the entire day today working on the different JavaScript minifiers, obsfucators, and asset managements to futher trim down the size of the application.    It’s been an extremely productive day here for both Javier and I.

To start with the optimizing process, I gave Jsmin a shot.  It gives satisfactory results in terms of minification, but the packed files were not compressed and obfuscated as I wanted.  Since I wanted to reduce the file size more and also to protect the application from external manipulations, obfuscation is a critical requirement.

I then found out about PackR, a Rails plugin implementing the Dean Edward’s Packer script.  Dean’s original implementation in JavaScript of the packer and obfuscator is wickedly cool, but it will probably take me a full day to read thru his code and see what he’s doing — it is THAT convoluted.  I was very impressed with the results from the Ruby siblings.  PackR spitted out the smallest files ever, in term of size, when run with “base64″ and “shrink variables” both checked.  The files were also almost unreadable due to the minification and obfuscation.  However, sadly my code stopped working completely altogether.  There’s no way I can read a file contains one single line of 8000000000 characters with convoluted JS calls and able to figure out what went wrong.  So I thought that I would go bankcrupt with my original plan of optimization the scripts…

I then remembered about YUICompressor and decided to give it a shot.   YUICompressor is a Java app, compiled as a JAR file.  Java? NOOOOOOOO.  Anyhow, I gave in.  Installing Java on the server was simple enough through yum.  I already have Java installed locally so I just fired up the JAR file (I’m using yuicompressor-2.3.4.jar) to see how it rolls.  YUICompressor works decently with reasonable minifications.  The obfuscation is weak since it only does function parameters replacement (unlike Dean’s Packer, which goes deep into the code and performs crazy regex-kungfu to obfuscate).  Nonetheless, my code did work, after numerous failed attempts to pack the correct files in the correct orders.  I’m really happy of how things did turn out.

The results?

Prototype (1.6.0.1) + Scriptaculous (1.8.1) total of 169KB after combined and packed.  After the packed file is gzipped, it’s only 47KB!

The editor’s code, spreading out around 10 different files with a total size > 60KB is now reduced to ONE single minified file, weighs 13KB after getting gzipped.

Miscellaneous JavaScript for the Watch Video Page, packed down to 15KB, gzipped down to …… 3KB!

What does this mean to TubeCaption users?  The page loading time will improve and the editor will load much faster than before.

The thing I love the most about this is that the entire process of merging all the JS files, obfuscating them, and produce the end results is totally automated.  In development mode, everything is nicely separated.  I still work on the different source files in my project.  Once I push the deploy button, a Rails plug-in, which I customized to work with the YUI Compressor, takes care of entire packaging process.  In the view, the javascript helper will automatically know to pick up the correct packed JavaScript files if the current environment is production, or spits out the links to the individual source files if in development mode!

So why don’t you fire up the editor, start captioning and make some money today?