Warp, ZOO and jQuery – New default JavaScript library

Sascha
December 9, 2010
Company

Today we got some exciting news for all the JavaScript junkies out there. We changed the default JavaScript library of our Warp 5.5 based templates and our ZOO extension to jQuery. Yep, you heard right ;-) All our old MooTools based JavaScripts are completely rewritten for jQuery and all Warp based templates and the ZOO make use of it. You may ask why did this happen? Well, here is the story!

ZOO 2.2 Release and JS Conflicts

First we put a lot of effort in our Warp 5.5 JavaScripts to support the different MooTools versions. In one of our last blog posts we pointed out that the Warp framework auto-detects if you are using MooTools 1.1 or the MooTools 1.2 MTupgrade plugin and includes the compatible scripts to match your MooTools version. This was quite a lot of work. Next up was the ZOO 2.2 release which made all ZOO JavaScripts depend on MooTools 1.2. Unfortunately it turned out that requiring MooTools 1.2 was quite a little disaster. Many people complained that their websites stopped working because of JavaScripts conflicts. To solve this issue we considered delivering ZOO with two different script versions for MooTools 1.1 and 1.2 like we did with our Warp 5.5 theme framework. But we also thought about the recently released MooTools 1.3. We would have to optimize our scripts again because most likely it will be the default JS library of Joomla 1.6. Don't get this wrong, it is great if Joomla 1.6 would make use of the latest MooTools version. The real problem is that Joomla 1.5 will most likely not be updated to the latest MooTools version. Even the MooTools 1.2 MTupgrade plugin is disabled by default. Not to mention that many extension developers still use MooTools 1.1 and have not updated there JavaScripts to MooTools 1.2.

At the end we would have to support and maintain three different versions of our scripts for MooTools 1.1, 1.2 and 1.3 for all our templates and extensions which is really time consuming and we rather spend this time adding new features. To keep it short: We skipped MooTools for jQuery. The big advantage is that we only have to support one JavaScript library and not three. This is awesome. jQuery will also work with any MooTools version and will cause fewer conflicts. We like MooTools, and it is still a great library, no doubt, but we had to keep things simple.

New Warp 5.5.10 and ZOO 2.3 BETA release

The Expo template we released a week ago already makes use of the latest Warp 5.5.10 version. All JavaScripts in Warp 5.5.10 are rewritten for jQuery. Expo is tested for some days now with no further issues. In general, we are very satisfied how everything works out with jQuery. We noticed that the JS code gets a little slicker, and we also benefit from the popularity of jQuery. By the way WordPress uses jQuery as their default JavaScript library, which means all our WordPress themes run smoothly with the built in jQuery support.

We are also put a lot of effort in our new ZOO 2.3 BETA release. All ZOO scripts are rewritten for jQuery. This makes MooTools almost completely obsolete for the ZOO. As mentioned above, jQuery is widely spread and therefore offers a lot of plugins to choose from. We utilized this fact to dump a lot of our own custom script written for MooTools. We now use more third party scripts, that are well tested and adopted by many jQuery users. You'll benefit through often prettier and faster effects. Check out the new category sorter for example. Editing tags has gotten pretty nifty too. Or the new datepicker…

Prevent multiple jQuery instances

Now you might ask, why aren't there any conflicts with jQuery. Well, we can't be sure of that of course. But we'll try to run along with the Joomla community here. There is an ongoing discussion on how to prevent those conflicts from happening. We have already taken steps and measures by implementing a widely accepted solution. We register through JApplication whether jQuery is loaded or not. In case your extension loads the jQuery library you can use the following code snippet to prevent our ZOO extension or Warp template from loading it twice:

JFactory::getApplication()->set('jquery', true);

We'll also ensure to keep an eye on this issue's future progress.

Finally, as always, take it for a ride... We hope you like it :)

PS: For more information about Joomla and jQuery take a look at the "Best practices for extension developers using jQuery" discussion on people.joomla.org