Have you ever tried to debug a site where a beginner web designer has loaded the page with scripts? There’s a couple copies of jQuery in various versions, maybe a little Prototype or MooTools thrown in. We can laugh a bit, but many of us went through that stage where we just didn’t really understand things well enough to know there was any problem with that. And is there? Aside from the bandwidth concerns, most libraries have steps you can take to ensure they play well with other libraries if need be. So what’s the scoop? Do you ever use multiple libraries? Poll is in the sidebar.
New Poll: Multiple JavaScript Libraries
Chris Coyier
on
(Updated on )
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
I’ve never used more than one library but I do recall a time when I was just starting out and I was trying to determine whether or not it was possible to use MooTools and jQuery at the same time. I don’t think that there is ever a need to use more than one at the same time as they can all generally accomplish the same things. The only time that I can see it being necessary to understand and implement such a setup with multiple libraries is in the case of a quick fix on an amateur’s or client’s site.
It’s exactly what I think.
I second that.
What about a “Yes, but it wasn’t my doing/I inherited a multiple-library project and had to deal with it” option? That’s the one I’d select. I didn’t like it but didn’t feel guilty because I didn’t have a choice in the matter. That situation doesn’t really fit in any of the options.
For clarification, I’ve inherited sites that have had both older and current versions of jQuery included that I didn’t have the rights to change, and I’ve inherited projects with really old versions of MooTools that couldn’t be updated and so have had jQuery added to provide additional functionality. Neither of these situations were my doing.
It’s not something I’d choose to do, but as front-end devs sometimes we get handed situations that are outside of our control to change, so we have to adapt and work within the boundaries of what we’re given.
I’m with Scott on this one, I’ve had to do it but only as a by product of sites I’ve inherited.
I don’t think the poll is about inherited projects. In the description above, he describes what your reaction might be if you inherit a project with multiple libraries, then asks “Do you ever use multiple libraries?” So, I guess the question should be clarified to “Do you ever use multiple JS libraries on the same page in your own code?”
I once worked on site using Mootools and later the client’s internal IS team developed web tech using jQuery that they wanted implemented on the site. So don’t laugh. It can happen to YOU! :O
I’ve done it, and I didn’t even realize at the time. Didn’t know what a library was – I just thought they were three different scripts. It helped me learn about resolving scripting conflicts, though!
Nowadays, being able to do most anything with jQuery, I mostly use jQuery. But if there’s something cool that uses some other library, I don’t see a problem with using it.
I’ve just recently finished a project that required two different versions of jQuery. Of course, there were a few modules we were using that were required but also only worked with older versions of jQuery, and there were some new in-house developed modules that relied on the latest version. Due to time constraints we couldn’t rework the older modules, so simultaneous versions were required.
I once interviewed at a place where they advertised they were using MooTools. During the interview, I also found out they were using Prototype *and* were really interested in me using jQuery as well. This was coming from their “senior” developer who was interviewing me. I told them the last thing they should be doing is injecting another JS library. They offered me the job but I turned it down.
I really do like jQuery but I feel like I’m kind of outgrowing it as it’s basically a pretty API for the DOM, ajax and hooking into events.
I really think that’s all jQuery is, but it’s pretty good at that. jQuery UI feels too bloated to be useful (at least to me). I worked with Prototype and Scriptaculous as well, but I wasn’t a big fan of them.
That’s precisely what it is (plus animation and modifying styles). But you’ve sold it short – not only does it form a convenient wrapper around the DOM, it makes the behaviour consistent across browsers.
I don’t want to spend my time writing code to account for all browsers, that has already been written by someone else and is accessible to me – I want to write verbose and succinct code, and spend my time making the application better.
I’ve never used anything but jQuery – and only 1 version at a time. Multiple versions and/or multiple libraries results in inefficiency – at least to the point of “selecting” elements. If I select the same element multiple times in jQuery, the library builds a cache of elements, so the next time & do a select, it doesn’t have to do the work to find the element in the DOM. Using multiple libraries would result in multiple caches & multiple lookups when only one is needed.
Because of how jQuery works, you can actually use multiple versions simultaneously. For example, my “live” elements utilize 1.4 and have $ mapped to jquery14 but I can still use $ which is the older version for all my selection.
May be i didn’t get it right, but yes i do use multiple libraries. For instance jQuery, TypeKit, Lightbox, etc. I think this is very common, isn’t?
If there was a library that could handle everything, i would use that one….
We’re currently in the process of moving our products from Prototype to ExtJS. In a perfect world, we would have the resources to port everything over, but in reality we are going through a transition phase where we still use both. With that said, we’ve found that including both libraries on a single page causes a lot of headaches, so we are going with a “one-or-the-other” approach for now, slowly migrating existing software over when possible.
I’d go with No. I’ve never used MooTools, it was always either raw JS or jQuery.
If the anwser is “yes” : You ignore the potential of your library. Simply.
How do you figure this?
You can do pretty much everything you want using only JQuery.
I don’t agree. I often use jQuery and TypeKit on the same page. If you tell me how jQuery could do fontreplacements or TypeKit to perform animations i would agree. As far as i know this is not possible.
So, i need to use 2 libraries (jQuery and TypeKit)
Or i’m not getting the question right….
I don’t consider TypeKit as a javascript library. (It’s more about Mootools, JQuery, Dojo, etc..)
Personally I use JQuery+Cufon or sIFR.
No for me, since I haven’t got into Moo-Tools. Heck even the jQuery right now is still far from my reach.
I’ve used YUI JS at a previous job. Today I regularly use both jQuery and Prototype (on separate apps). I’m currently reading up on Dojo, just because I’ve heard good things about it.
Oh. Oops. Didn’t read the question thoroughly. I think using multiple JavaScript libraries on a single page is generally a terrible idea. Any good library will suffice, some are better at particular things than others, but there’s no reason to include more than one. It’s like trying to put a Chevy motor in a Ford truck. Kind of redundant. And pointless. And unnecessary. And… You get the picture. :)
Had built a prototype using multiple libraries with complete intent on rebuilding or replacing certain plug-ins at time of actual development however an outside development team decided it was not worth rebuilding with a tough deadline ahead and now so far into it that it will be difficult to end up at the single usage as desired.
My own fault for building the prototype with multiple and now suffering or feeling guilty as mentioned in the poll. Had I take the time in the prototype to define it correctly I would not now be dealing with the disaster of multiple libraries.
I can definitely see that you wouldn’t really need two ‘general purpose’ libraries, but nowadays there are several specialty libraries for touch gestures, animations, vector graphics, etc. Some of these would be substantial to recreate yourself in a different library. I can definitely see the case where it may be appropriate to stack libraries.
I need another option: “Yes, because the people who built the site before me used multiple libraries”…
I remember using prototype and scriptalicious for lightboxes when I was first started developing. I came across some cool features that jquery had and so I would use jquery for the additional features I wanted and use the previous scripts for my lightboxes. My friends got me interested in jquery and as i got more and more into it I decided to use it as my go to javascript library. Now I use jquery for lightboxes, slideshows, and many other things. I’m more used to it, and it seems there are more developers/support for it, but thats just my opinion.
I do it, but rarely, an mostly because I inherit it, or if I find that the second library actually has a feature that is really hard to find in the first. I don’l like, but I do it sometimes. It’s not right, but it’s not a crime, either.
In my case a designer tried to attach three plugins with multiple jquery files declarations. The result was that the libraries were using a context defined in jquery, while internal scripts call them in another. It was really a problem to find why the libraries were not found. Sorry about my english.
There’s no need to. You can hardly find a feature that a library has and the other doesn’t.
There are cases when you find a really excellent component using jquery and another component using something else. If the component are really good this will be a reason to use two libraries in the same project.
No for me. Although I do use two JavaScript libraries (BBC Glow and jQuery) on the site I manage but not on the same page.
I’ve done that often…
I’m playing with greasemonkey, and it’s out of question to use “raw javascript”, so I use jQuery. Somtimes, the website already use it’s own jQuery, sometimes in different versions. Sometimes it’s Mootools, prototype, etc. Sometimes it’s everything.
I’ve managed to include in those cases “my own jQuery” but it’s not always simple.
When I’m writing my own stuff, I always use “only one framework”, which is jQuery almost always…
Ho, for those that don’t know, greasemonkey is a firefox extension (the concept exists also for other browsers) that let you “customize” web site you browse by adding some javascript to them… So you HAVE to write code that work with existing javascript one the page you want to change.
And when you write greasemonkey script that should run on any page, you MUST write code that can work well with any javascript library
It took me weeks to figure out this fu**ing “no conflict” stuff. At one time it made *plop* and worked… yeah that sucked
I work mostly with Joomla! CMS which uses Mootools 1.1, so it is very common to find myself working with modules or extensions that use jQuery. That being said, one library per project should be the norm for a professional developer.
I have a project that makes excessive jQuery use and also uses OpenLayers for maps. Openlayers is a mapping library that uses parts of jQuery (I fear an ancient version) plus mooTools. A challenge!
There are situations where people are forced to use many, but most of the time it isn’t a “good” reason. A good reason would be that you have two requirements that technically cannot be satisfied by the same library. In reality, this is very unlikely.
I can understand that people who don’t write JavaScript may end up using “the cool plugin I found in jQuery and the cool plugin I found in ExtJS”, but if you write JavaScript, you’d port it to your preferred library.
Preferably use one library, but if inherited this can be an issue and depends on your time constraints whether or not you can modify the multiple library situation. Try to keep the stress levels low. LT
I started using two libraries on my blog unfortunately. My site and blog uses MooTools, but I installed a WordPress plugin that uses jQuery and I didn’t want to rewrite it. :P
I do, I use Extjs for cms and web application projects. Jquery for front end stuff. Occasionaly I have a nice grid or something that I need to pull into the frontend for a report or something and I’ll use the existing extjs one. Could do in JQuery but I see no need to renivent the wheel, especially if the wheel in this example already has had a lot of work go into it in terms of functionality
I have learned so much from this dicussion ,thank you everyone for your own perspective .
I have seen this many times and there are situations where people are put in a spot that forces them to work in this way. Usually a tight deadline or not having the experience of writing their own code from scratch. To be clear it is not the right way especially these days where we have some great library’s out there with great documentation on getting you started – jQuery, Prototype/Script.aculo.us, YUI, ExtJS etc.
Before deciding on which library to use one should look over what type of features their site will have and the library that fits well with their understanding and way of designing. Try http://en.wikipedia.org/wiki/JavaScript_library
I just start a new project for a client last week in improving their sites usability and overall performance and SEO. This site has close to every type of JS library out there – jQuery (3 versions), prototype, a few plugins and customs totaling 25 calls to the server. – its nuts!
Besides just saying its not the right way, some people might say heck it works and I built it in less than a week, True that!
But what happens if someone new takes over the site or a few months go by and you need to upgrade you will be stuck with the mess I have today…
My opinion with over a decade of working experience I like
– jQuery – great!, well bundled, great documentation, UI library, and soon Mobile Library (supported by Android phones)
– Prototype with Script.aculo.us – one of the first libraries I ever used, great for cross browser support combining both of these gives a lot of power
– YUI – very good as well and good online samples/docs
– ExtJS – which is now Sencha.com I believe you need to purchase but this library is great if you are working for a corporate client. Really high end stuff.
Personally I haven’t used more than one, jQuery.
jQuery is what I first started with, and am still constantly learning, and even though I plan on learning other libraries I don’t see myself using more than one unless I am forced to by what someone else has done.
I’m glad you brought that up. I had this site with bits of jQuery all over, and the designer decided to add prototype.js into the header. As many of you know, this causes the $ declaration in jQuery to become undefined. The “working with other libraries” page on jQuery has many helpful tricks you can do if you want to edit every place a snippet of jQuery code was used – such as “use jQuery instead of $” or “var $j=jQuery;”. In this case there were hundreds of places where a tiny hover event or table striping was done in jQuery and I really didn’t want to comb through and modify every one of them.
What I would have loved, but ultimately could not find, was a way to steal back the $ and leave the jQuery code untouched. Instead, I convinced the designer to remove prototype and use a jQuery alternative for the “lightbox” code she had installed. IMHO you can only use multiple libraries if you are prepared to modify your existing code accordingly.
Ironically, I came to this site today to see if someone could help me fix my multiple instances of jQuery. It’s a nightmare. Stop laughing at me! I want to be cured!
I did it once when I was a newbie. I just discovered Jquery and I wanted to throw every goodie I could at the site. Consequently, some of the functionality wasn’t working so I emailed the man himself, Chris Coyier. He actually responded to me within 24 hours and told me my problem. That’s why I friggin’ love this sight. Thanks Chris!
I just coded a site with jQuery for background image scale and a featured products slider. Then a Mootools Slimbox.
Included the jQuery before the Mootools(http://docs.jquery.com/Using_jQuery_with_Other_Libraries) and did a find replace on the dollar signs in the Mootools script and solved the conflict(http://www.mooforum.net/solutions12/using-jquery-and-mootools-the-same-page-t1039.html#p3458).
I use jQuery primarily, but I will occasionally also drop MooTools into a project that invloves heavy javascript work just because of its excellent library of extensions to the default prototypes.
I know one website where all kind of libraries used in total of 150k. plus content and css – another 50k. loading time is about 30sec.
Yes, sometimes I use libraries, but more often I try to use small/lightweight pieces of code rather than a whole library.
yup, i have done it many times in begining :)