Supporting MooTools 1.12 and 1.2

Joomla 1.5 introduced a standard JavaScript library in the form of MooTools 1.11. Over its lifetime Joomla has first upgraded to MooTools 1.12 and more recently with the advent of Joomla 1.5.19 provided support via a mootools 'upgrade' plugin, to enable MooTools 1.2. MooTools 1.12 is now based on a 6 year old JavaScript framework, and since its inception, MooTools has continually evolved, the API has been updated, optimizations have been made, and new features added.

With the introduction of Joomla 1.5.19 and specifically MooTools 1.2 support, Joomla extension developers now have the potential to write cleaner and faster JavaScript code, however this came at the expense of backwards compatibility with MooTools 1.12. The improvements and changes to the API made in version 1.2 were major enough that they effectively broke with the API used by 1.12. In an attempt to alleviate this issue there have been a couple of compatibility layers that work in conjunction with MooTools 1.2 in order to allow older, 1.12 format scripts to run. However neither of these are 100% successful, and it's not a good long-term strategy to rely on these crutches for your JavaScript. You are much better served if you rewrite your JavaScript to function 100% with the new 1.2 compatible syntax. Taking this step will produce faster more efficient JavaScript and will also future-proof you with regard to future versions of MooTools such as the recently released MooTools 1.3.

Reasons to write pure MooTools 1.2 JavaScript:

1. MooTools compatibility layers do not provide 100% code compatibility
2. Using compatibility layers results in slower code
3. Compatibility layers could be dropped leaving you in the lurch and forcing you to rewrite your code anyway
4. Joomla 1.6 is adopting MooTools 1.3 which is 99% compatible with MooTools 1.2. Upgrading from 1.2 to 1.3 is very easy

It's a very simple process to upgrade your code from MooTools 1.12 to 1.2 as this quick example shows:

MooTools 1.12 Code

// Fx.Style
var fx = new Fx.Style('my-element', 'opacity', {wait: false}).set(0);
fx.start(1);

// Fx.Styles
var fxs = new Fx.Styles('my-element', {wait: false}).set({'opacity': 0, 'color': 'red'});
fxs.start({'opacity': 1, 'color': 'blue'});

MooTools 1.2 Code

// Fx.Tween
var fx = new Fx.Tween('my-element', {link: 'cancel'}).set('opacity', 0);
fx.start('opacity', 1);

// Fx.Morph
var fxs = new Fx.Morph('my-element', {link: 'cancel'}).set({'opacity': 0, 'color': 'red'});
fxs.start({'opacity': 1, 'color': 'blue'});

More Information on Converting MooTools 1.12 to 1.2

For more information on how to convert your old MooTools 1.12 scripts to MooTools 1.2 you can check out these articles:

• https://github.com/mootools/mootools-core/wiki/Conversion-from-1.11-to-1.2-
• http://silverscripting.wikidot.com/mootools-upgrade:from-1-1-to-1-2

Dealing with MooTools 1.12 and 1.2 in Extensions

Ever since we heard that MooTools 1.5.19 would be released with a Joomla system plugin that would effectively 'upgrade' MooTools from the previous 1.12 version to the newer 1.2.4 (now 1.2.5) version we started brainstorming the best approach to handle this. As you can imagine with all our templates and extensions we have a lot of JavaScript to maintain, and the thought of having to rewrite everything for 1.2 was daunting. After having discussed the various options we decided that we would work backwards and port all our JavaScript to run natively in 1.2 and provide a switching mechanism that would be transparent to the user to automatically use the correct script version depending on whether or not they had enabled the MooTools upgrade plugin.

The conversion process went surprising smoothly as once we knew the bits that were problematic, fixing those small areas resulted in 100% MooTools 1.2 compatible code. Our procedure now is to develop in MooTools 1.2 which is faster and leaner, then back-port to 1.12 where needed. We've found that while this is extra work, it doesn't impact our development times too much. The side benefit of this is that all our extensions are that much closer to being ready for Joomla 1.6. We all know that the release candidate and final version of Joomla 1.6 is imminent. Also we know that there's a fair amount rework that is going to be required to make Joomla 1.5 extensions work properly in 1.6, but having the JavaScript already converted to MooTools 1.2 means it will be that much easier to convert those extensions.

Implementing the Switching Logic

We wrote a simple function that enables the detection of the MooTools 1.2 upgrade plugin and we use it load the correct version of the JavaScript file. Imagine your original extension loaded your MooTools 1.12 file like this:

$document->addScript(JURI::base(true).'/modules/mod_yourmodule/js/extension.js');  

To enable this call to load the correct version, you would change this call to use the new getJSVersion() method to load either the exiting MooTools 1.12 file: extension.js or the new MooTools 1.2 file: extension-mt12.js:

$document->addScript(JURI::base(true).'/modules/mod_yourmodule/js/extension'.modYourModule::getJSVersion().'.js');

function getJSVersion(){
  if (version_compare(JVERSION, '1.5', '>=') && version_compare(JVERSION, '1.6', '<')) {
    if (JFactory::getApplication()->get('MooToolsVersion', '1.11') != '1.11') return "-mt1.2";
    else return "";
  }
  else {
    return "";
  }
}  

We've written a simple example module you can use as a reference example when upgrading your extensions to support the MooTools upgrade plugin and provide the best capabilities to your end users who are looking to migrate their sites to the newer and much improved MooTools versions:

mod_rtexample.zip (8 KB)