Fixing a project with multiple Javascript frameworks

Question

I just started a new job, and my first task is to clean up the Javascript code for the site - the problem is that there are two JS libraries being used (jQuery and Prototype / Scriptaculous).

I'm trying to figure out what's being used where, but it's pretty difficult, especially not being very familiar with the code.

Does anyone have any suggestions? I'd probably prefer to drop Prototype / Scriptaculous if possible.

Answer 1

I wouldn't suggest to drop a javascript library, as this would be a cross-sectional change. Very dangerous, and will cause spurious bugs now and in the future.

Answer 2

Chances are, that Prototype will be using the $ variable, and that jQuery will be running in noConflict mode, so it will be referenced by the jQuery variable.

It can get tricky, for instance:

 // here $ = Prototype

 jQuery(function($){
     // here $ = jQuery

 });

 // here $ = Prototype

And in separate files:

// here $ = Prototype
(function($){
    // here $ = jQuery;
})(jQuery);
// here $ = Prototype

Its just really important to pay attention to your context to see which library is being referenced. Additionally, its perfectly acceptable to ask questions here if you get stumped on how to do something in jQuery that was done in Prototype.

Answer 3

Getting rid of Prototype in particular could be wicked hard, especially if there were people working on the codebase who really "got" Prototype. I'm speaking here about myself, having worked on a very large web application that in fact has exactly the mix you describe (although I think that by the time I left the Scriptaculous stuff was gone).

Because of the way Prototype works, there can be dependencies absolutely everywhere.

Answer 4

This is a bit of a daunting task. The suggestion to live and let live both frameworks is not a bad one, provided things are working. It is likely jQuery is in noConflict mode if they are really resident on the same page.

One tool that's very useful is to use the Web Developer Toolbar for Firefox and navigate to a page and do: Information -> View JavaScript -- this will give you a full listing of all the JavaScript script loaded with <script> tags, as well as inline JavaScript in <script> tags, though I think inline event handlers are not listed there.

But one thing you can do is simply unhook Prototype or JavaScript and see which ends you up with fewer errors. Then you're on your way to debugging what's missing.

It is easier to standardize on one library, but there's a case to be made for "if it ain't broke, don't fix it" too.

I've taken some time to learn a bit about all frameworks, doing the same effects on identical HTML: ArtLung Rosetta: You can get a quick dive into the differences between syntaxes of Prototype and jQuery by comparing this and this.

Best of luck!

Answer 5

I would trash prototype from all includes on all pages, remove the noconflict in jquery & then keep firebug ready to show me all errors, and go over all the pages one by one, replacing functions with jquery equivalents, until things work right.

..pain in the butt method, but doubt you'll find less painful. Might be helpful: http://api.jquery.com/browser/