Since my own personal JavaScript framework which I constructed to build Mango has now ballooned into nearly a couple of thousand lines of code, it has become near impossible to maintain single handedly. So I have decided to throw it in the bin. It was with great sadness and a heavy heart that I pressed the delete button and then banished what had become know as ‘The Bible’ (Many lines most of which are open for interpretation) from the CVS. But the day comes in every programmer’s life when the code they have given blood sweat and tears to write gets canned, usually because other developers can’t get their head around a library which has three thousand lines of code and only two lines of documentation (Bloody amateurs!).

Once the decision had been made, it was time to go out shopping for a (lesser) JavaScript library, one whose documentation was not written on the back of a napkin. To my surprise some of them were very good! Last time I looked at JavaScript libraries Prototype ruled the roost with her bionic arm named script.aculo.us. She looked very nice and did everything you wanted her to do in all the important departments, but her Achilles heal was the fact she weighed as much as fully fueled aircraft carrier. This time around though there are some other contenders for the crown.

I first went back to look at prototype and script.aculo.us. Despite hearing rumors she’d been on the Atkins diet I returned to find her exactly the same weight as the last time I saw her but now also diabetic. The other frameworks that really stood out from the pack for me were JQuery and Mootools.

Mootools has grown out of Moo.fx which started life as an add-on for prototype. Moo.fx is similar to script.aculo.us in many ways, except Moo.fx is much more light weight. Mootools was built as a stripped down version of prototype to break moo.fx’s dependency on prototype. The result is a very powerful combination which is much smaller in size than prototype + script.aculo.us or prototype + moo.fx. My favourite feature of Mootools is its modular design, with other frameworks you have to include all or nothing, meaning you might need to include a 60KB prototype + script.aculo.us JavaScript just to use one simple feature. Not with Mootools, mootools allows you build different packages with only the modules you need included, this makes for a much smaller foot print in most cases.

JQuery rather than clone prototype has taken a slightly different direction to both prototype and mootools. JQuery is only 16KB’s when compressed, this is a size that’s more than acceptable, even for the poor internet connections we are forced to use in Cambodia.

I already knew that I would like the way JQuery worked, I had previously read Pro Javascript from Apress by John Resig who also wrote JQuery, and I really enjoyed his approach to problems there, so figured this should be no different.

JQuery operates by embedding all functionality within a single class and allowing some really cool functionality such as endless chainability that will save you lines and lines of typing, for example you can do something like this:

$(“#myDomObj”).find(“.redDiv”).addClass(“bigNode”);

This one short line of code will find all decedents (not just child nodes) of ‘myDomObj’ whose class is ‘redDiv’ and add an additional style class called ‘bigNode’. You don’t need me to tell you how many lines of code it would take to achieve this simple task using standard JavaScript dom traversal.

In the end it was a close run thing between Mootools and JQuery, I loved the modular approach of Mootools as well as the functionality but in the end the approach, size and quality of documentation won the day for JQuery.

The decision was the easy part, now the daunting task of moving every JavaScript file within Mango (More than 20!) over to JQuery, oh joy, as my Khmer friends would say!