Maybe I’m behind the ball on this, but I’ve never tried using multiple JavaScript frameworks on the same page. I’m the kind of developer who likes to stick to a framework and then make it do what I need it to do. Sure, all of the major frameworks have some unique and useful plugins, but cutting down on load time and complexity usually trumps any small amount of extra functionality I may gain from using multiple frameworks.
Today, however, I was asked to diagnose an issue with a client’s WordPress site. All of a sudden the following JavaScript error had started popping up:
The evidence
The folks who had been working with the site were at a loss as to why this would happen, so I started digging in.
After some digging and looking at the source code for the page I noticed that not only was jQuery being called twice (eesh) but mootools was being called as well. The calls weren’t coming from the custom template that the site was using, they were coming from [dun dun dunnnn] INSIDE THE WORDPRESS CODE ITSELF!
After a little digging, I discovered that a Gallery plugin the client was using, NextGEN Smooth Gallery, was loading mootools to do some cool displays and animations for one of their image galleries. The downside is that the call to mootools was on every page.
The culprit
You see… both jQuery and mootools like to use the dollar sign ($) to denote shorthand for their calls. While this can be pretty easily overcome manually by calling jQuery directly (using jQuery.yada) any plugins that you have for one of the specific frameworks will very likely use the shorthand notation somewhere in the code. If they do, you’re screwed.
So let my couple of hours of research serve as a warning to those would be framework cross-mojinators out there. It’s not worth it!