Rapid Development Techniques – Removing Mootools

A fact of web development is that no two people use the exact same tools – why should Javascript frameworks be any different? Whether you use jQuery, Prototype, YUI, Dojo, or something in between, we should all have the freedom of choice when it comes to our development tools.

Allow me to clarify my position when it comes to Joomla! using MooTools as a Javascript framework: I understand the necessity. Not the necessity of MooTools itself, per se, but the necessity of a single Javascript framework that is officially supported by the core CMS framework. The benefits are enormous – it standardizes core and extension development by ensuring that end users will be receiving a consistent experience from third-party developers.

Personally, I am a huge fan of jQuery. It was a Javascript framework I started picking up several years ago and when I started doing full-time Joomla! extension development I looked for a way to use my jQuery skills without having to worry about MooTools getting in my way. jQuery supports something called “No Conflict” mode which allows it to work while other Javascript frameworks are in play, but it can be cumbersome because not all jQuery plugins are written to support No Conflict, and using two separate Javascript frameworks can cause older computers to slow significantly. Either way, I simply prefer to remove MooTools and work how I want.

Note: Unfortunately, removing MooTools is only an option for in-house developers and people working on their own personal sites. Those of you creating third-party extensions will have to either live with MooTools or load their Javascript framework in such a way as to avoid conflicts with the MooTools library.

So, how do we remove MooTools? Simply removing it from the media/system/js folder of your Joomla! install will not work properly – the system will still try to include the file, only now you have a bad HTTP request for every single page load. We need an airstrike that completely obliterates MooTools from showing up in your final HTML. Fortunately, this is easily achieved using a plugin.

In the file directory /plugins/system create a new file called “removemootools.php” and insert the following code (you will need to register the plugin in the database, too).

class plgSystemRemoveMooTools extends JPlugin
{
 public function onAfterDispatch()
 {
 $app = JFactory::getApplication();
 if($app->isSite()) //Only ever remove MooTools from the client-side, never the admin side
 {
 $mootools = JURI::root(true).DS.'media'.DS.'system'.DS.'js'.DS.'mootools.js';
 $document = JFactory::getDocument();
 unset($document->_scripts[$mootools]);
 }
 }
}

Note: This only removes the core MooTools framework. There are numerous other files that Joomla! automatically loads that use MooTools but removing them is as simple as adding another unset() to the plugin you just made.

Once you open up your administration and enable the plugin you will notice that MooTools has disappeared from your entire site. So, how does the code behave? First, we check to make sure that we’re dealing with the client-side of Joomla!. The administration section of Joomla! is thoroughly laced with MooTools and removing it will pretty much disable your administrator panel.

There you go! MooTools has been struck from the site. You’re now free to include whatever Javascript framework you like in your template free from the fear of MooTools interference!

Challenge: Try reworking the plugin so that it selectively removes MooTools or your own Javascript framework based upon what component you’re currently in. If you need MooTools for one component and jQuery for another, you could create exceptions in the plugin that adapt to the changing needs of your web site. This will prevent conflicts and remove the need for the browser to load two frameworks at the same time.