Upgrading to Mootools 1.2

With the release of IdeaJam 1.7 (in beta at the moment, but going “Gold” soon enough), we decided to upgrade the Javascript framework that we use, MooTools to the latest and greatest version. Normally this isn’t even worth commenting on, but this change was a big’un as a lot of the underlying API changed from version 1.1 to 1.2. Similar changes have happened with Dojo in the past in the shift from 0.4 to 0.9 and a very positive move it was too. The problem is that it’s a painful process of rekeying quite a lot of code.

So I thought I’d go through the resources I used and the main changes which we faced with the upgrade to help anyone else going through the same process, although to be fair we are quite late to the party with MooTools 1.2 as it was released in the middle of 2008.

There are a couple of really useful websites which document in quite a lot of detail how old style 1.1 syntax should be modified for 1.2. My favourite was this page on the Github Wiki: Conversion from 1.11 to 1.2.

Another page you might find useful is this.

The areas which we spent most time on were retooling all of our Ajax requests behind the scenes (which was the reason the Chrome bug I mentioned recently was introduced). So the main thing to be aware of is that the syntax for an Ajax request changed from something like this:

new Ajax(url, {
method: ‘get’,
onComplete: processResponse
}).request();

towards something like this:

new Request({
url: url,
method: ‘get’,
onComplete: processResponse
}).send();

The other thing which caused us a little trouble was with the tooltips we use on the Dashboard page in IdeaJam. When I say trouble, it took about an hour to fix, we’re not talking serious effort here! Anyway, the default CSS settings changed a little, so we just had to add a few extra lines to our CSS file, no biggie.

Finally for areas which you’ll want to be careful with, it’s third party add on functions and code. For example we use Phatfusion’s sortableTable class in the Top Innovator’s screen. This was written for MooTools 1.11, so I had to make some changes for it to work properly with the new version.

From an IdeaJam point of view, the reason for the upgrade was so that we can start to use some of the newer Clientcide plugins in areas that may not get much airtime on the public IdeaJam site. One of the main customer feature requests for this new version is what we call the “Implementation Plan”, it’s the first feature to use some new MooTools functionality, but you can expect more in the next few weeks as we add a new way of linking ideas together.

So why should you use MooTools? Well to be honest, these days most big web shops seem to be going with jQuery and there are a lot more resources out there for that framework. But I still have a soft spot for MooTools, it seems to fit the way I think which is an important consideration when you’ll be spending days, weeks or months using the API.

Really the main benefit of MooTools these days is the wonderful Clientcide add ons which handle the UI side of things and the superb documentation and also the core and more builders which allow you to configure the javascript files which make up MooTools to such a degree that it will do exactly what you want, a great boon for managing your deployments.

Tags: javascriptmootools