It seems that jQuery has taken the throne for JavaScript frameworks and I was wondering exactly why. Is there a technical reason for this or is it just that they have evangelists? I have been really happy with using Prototype myself. Should I use jQuery for my next project?

+4  A: 

It's a personal preference just like anything else. JQuery is very simple to use and its chaining capabilities are quite powerful. The documentation and distribution of plugins make it accomodating to most developers. I would suggest you dabble with jQuery and see if you like it before changing.

SaaS Developer
I would argue that it's not entirely a personal preference - there are concrete factors such as speed, filesize, and features that differentiate the various popular javascript libraries.
matt lohkamp
+8  A: 

True to some extent, especially after MS also announced its support for JQuery.

+17  A: 

Have a look at this (very similar) question:

Should I convert from MooTools to jQuery?

My personal take on it is that I'm happy to see some form of consensus with regard to JavaScript libraries. There's so much code out there locked to a specific library or framework that you simply cannot use if you happen to have selected a different one.

It's probably not worth revisiting all your old code to convert it, with the possible exception that it's something you expect to be maintaining and expanding indefinitely.

But if you're in a position to do so, I think it's definitely worth embracing jQuery. It is, after all, an excellent piece of code. And with the clout of MS and others behind it, it's only going to become more popular.

I will be doing so, even though jQuery wouldn't have been my first choice.

+3  A: 

I believe a majority of the popularity has been due to the lack of updates prototype have been seen recently for the downfall of it. While they just released an update last week, the large time gap hurt it.

With MS adding Visual Studio support for JQuery that will only boost it's popularity. Ideally they would open it up for support of any framework.

+179  A: 

Having used Prototype, Scriptaculous and jQuery. I find jQuery to be far more powerful, in that I tend to write far fewer lines of code than with Prototype.

I think what makes it particularly useful/powerful is:

  1. The chaining of queries (each jQuery returns itself so you can chain them together)
  2. Working with arrays/collections of results as a single unit eg: $('.tab').hide() could hide all elements of class tab
  3. I find the API extremely 'discoverable' and common sense in that in having a little knowledge I can achieve the results I am after eg: $(':input').parents(':not(:first)').show() would show all the parents of every input element except the first parent.
  4. and probably most of all is the extensibility and plugin architecture of jQuery is incredible and has created an awesome community of plugins, where I can find practically anything I should ever need.

Do yourself a favour and definitely use jQuery... and donate some money while you're at it :)

Number 1 certainly is not an advantage if you're sharing work across a large team as it makes code quite unreadable, however for quick 1 man projects it sure speeds things up.
@mcivilian: I can't disagree more! What is so difficult to read about: $('#some_element').addClass('highlighted').show(); ?
Maybe Microsoft can donate some of its billions ;-o
Seventh Element
@mcivilian: Chaining is imho very nice feature, if used wisely.
I dont know that it is a cardinal sin of readability, but it is less readable. My biggest problem with chaining deals with the fact that there is not existence checking. If $('#some_element') doesn't already exist, then addClass will throw an error. And for those of us with browsers that alert on every js error that is uber-annoying.
Is Microsoft still working with the people at jQuery H.Q to get jQuery implemented into it's framework/.net engine?
@Goblyn27: I'm not sure what you mean, if $("#some_element") isn't found you won't get any error, the selector simply found no match and doesn't continue the chain...which for every instance I've ever come across is exactly what you would want to happen. This allows generic code in a main JS file for your site that loads on all various pages, if the selector doesn't apply to that page it quietly does nothing...this has the added benefit of less IFs and fewer http requests as well.
Nick Craver
BTW: $("#some_element").live('click'...) is perfectly valid for elements that don't currently exist, but might eventually ... :)
Scott Evernden
@nick/goblyn27 - Actually `$("#some_element")` returns an empty jQuery object, calling `.addClass()` internally does a for loop over each DOM element, meaning it basically returns `this` immediately, not breaking the chain, but not throwing an error.
Chaining causes problems for me primarily because when I come to have to change things, it's difficult to tease apart what is going on as I have to work through the chain to figure out what is actually being called. It also breaks the law of demeter as attributes are often pulled out in the chain. What you end up with is scattered bits of code that should be in methods. Luckily you don't have to use it, and I don't. Code seems much easier to read, if longer. I find jQuery syntax very awkward.
I'm pretty sure prototype can do all 1-3 AND with better/human-readable syntax. The prototype library is definitely built to be more extensible, and maintainable. jQeury is built more for quick-turnarounds with shortcuts and cryptic syntax. As for community support, I agree jQuery wins in that avenue. But come to think of it, if you just 2 libraries - Prototype and Scriptaculous, your code is more portable or reusable on other projects. Good reference to read about jQuery vs Prototype -
+2  A: 

You'll find that most of the JavaScript libraries will accomplish what you need them to do, often with similar syntax. Often, it comes down to personal preference. I personally prefer MooTools, but the reason I think jQuery is taking the lead in usage is because it really makes an effort in the community area as it caters to beginners and has a lot of plugins that are accessible right from the main site. You definitely don't have to be a beginner to use jQuery, but if you're just starting out, it's a good place to start.

+12  A: 

Regarding the chaining thing: Prototype has had this for a while now, unless I'm missing something. From the documentation you can do this:

  .update('I read this message!')
  .setStyle({opacity: 0.5});
Yes, but in prototype you have to use invoke() to call the same method on all elements returned, and you can't chain at all beyond that point.$$('.foo').invoke('hide'); // no more chaining
Joel Mueller
Joel said it. The point is that you can't write the following in prototype. $('a').attr('rel', 'external').click( function() { alert( $(this).attr('href') ); return false; } ).addClass('external_link');
@thenduks, this is horrible code to:1. read2. comprehend3. maintain
@Art: I, and many others, disagree with you. I don't work with anyone who couldn't do all 3 things on your list there re: this code. Not to mention much more complex code than this (where the click handler is many lines long and other event handlers are chained, child elements are found and the selector backed out of with `end`, etc).
+42  A: 

John Resig himself created really nice presentation comparing the different JS libraries out there:

It gives a really nice overview of what it does and what it does not.

As for me, I really like the chaining that results in very succinct, but readable code.

Here are some more presentations about jQuery from him:

Tsvetomir Tsonev
I love it when people are referred to as "himself". Indeed, yes, it was that same John Resig :)
@thomasrutter What if Raab Himself wrote something, how would you refer to him :P
+6  A: 

I find the scriptaculous documentation has, historically, been really lacking. Time has been spent documenting the API for all aspects of jQuery, proving good quality demos, examples and source code.

Chris MacDonald
Agreed! jQuery documentation blows prototype/scriptaculous out of the water.
I thought the Prototype documentation was pretty good. Scriptaculous drags Prototype down.
+8  A: 

I migrated a project from MooTools to jQuery. Big turnoffs for MooTools were:

  1. Total DOM Pollution and "magic at a distance" by hacking all the base classes with 'monkey patching'

  2. epic slow performance in JavaScript

  3. significantly overweight codebase.
  4. Scattered/Incoherent API documentation.
Kent Fredric
+1  A: 

Modular design, and a newer approach at things. Seriously, try some of the jQuery plugins that do what scriptaculous and other Prototype-based libraries do, and you'll understand.

+37  A: 

One major point has been left out:

All of the out-of-the-box functionality in jQuery are in reality extensions. This includes all the shorthands, like click(), hover(), toggle(), etc., but also the core-methods like bind(), each(), animate(), and so on.

This means that you can detach functionality you are not using, making the library even smaller--file-size wise, as well as memory-footprint wise.

This is pure design-genius!

I don't understand your comment. Can you comment more on this?
click, hover, toggle, etc. are shorthands for the bind function. In essence; click() calls the bind function (which is the function used to attach all events). Think of the shorthands as overloads to the bind function. So click is a shorthand for calling the bind function: `bind("click", function () { });`
+6  A: 

In the end they all do the same thing. I started with Prototype + but never liked it. Syntax and API felt awkward. Then I tried jQuery and fell in love with it. Coding style was more suitable for my preferences.

Mika Tuupola
+2  A: 

jQuery is, for me, the perfect framework choice in most web projects. It offers what I need the most: Easy DOM traversing/manipulation and good cross-browser compability, plus great documentation and lots of third-party plugins. OK, there are many good libraries out there, but I can't help instantly liking jQuery more than e g Prototype.

In a project where speed and code size has higher priority, I might use Robert Nymans DOMAssistant or DLite instead. If I am going to make some sort of big custom Webb app GUI I might turn to YUI or Ext JS. And if I would prefer a class-based approach when programming I could see why people like Mootools, qooxdoo or Prototype.

+1  A: 
  • single dollar($) function, while prototype use $, $$, $A, $F ... so easier to remember
  • effects integrated in prototype you need to ride along with scriptaculous to have this
  • shorter and easier syntax (its more like writing a sentences than javascript codes), $(function(){}); do the DOM ready check while in prototype you need to declare and observe onload method
  • tons of plugins and active community
+12  A: 

While jQuery has awesome chaining, I find some drawbacks in it. In fact, the same aspects that are considered as "features" in some answers here, I consider as drawbacks.

  • I find prototype more readable. That is important when you are not working alone and need to teach others in your team what the code does, or rely on them to learn it. In jQuery the $ function just does too much stuff. In prototype it is split to several names.
  • Same goes for the chaining in jQuery. It is powerful but can actually be less comprehensible. It's a matter of personal style.
  • I find Ajax support in prototype to be better.
Agree with the comment that jQuery's $ function does way too much!
+1: Cannot agree more. Exactly my thoughts. I can barely read someone else’s jQuery-based code and sometimes I cannot read even my own.
Jan Zich
You don't have to use just `$` you can rebind it to another variable, or just use `jQuery`, which helps when working with other libraries
Alex Larzelere
@Alex Larzelere, It's still the same function, with the same interface and functionality. It just has a different name.
@strager Different names affect readability. `int a` and `int numberOfCows` can be exactly the same but the latter is much clearer.
Alex Larzelere
@Alex Larzelere, I agree. However, @Yoni was complaining that the jQuery function did *too much*, and that they preferred the functionality to be split across various methods as in Prototype. What would a good alternative name for the jQuery function, assuming you didn't need to use it in 30 places (where it'd be annoying to read/type if it was long)?
I think of `$` more as a namespace than anything.
Chris T
+13  A: 

I spent a few hours (with a JavaScript expert) coding some features in Prototype for a Rails app about a year ago. The next day, I decided to try jQuery instead, and was able to code the same functionality in about an hour or 2.

The developer experience between the 2 was night and day. With Prototype, I had to look up every function I used, and always guessed wrong when trying to find the right function to use. With jQuery, I found that the method names were exactly what I would have expected. I also found the jQuery code to be about half the size.

I've not tried any other JavaScript libraries; I wish I had the time to look at a few others. But I'm definitely sold on jQuery.

I find it very unsurprising that implementing the same thing on day 2 went faster.
+2  A: 

Well, a couple of months back I was deciding upon a framework to quickly implement some cumbersome javascript validations in an existing application. I checked out Prototype, Mootools & JQuery and finally settled on JQuery because

  1. The documentation was very intuitive & laced with examples.
  2. It seemed easiest to inject JQuery into the existing framework vis-a-vis other choices.
+3  A: 

In addition even Microsoft has chosen it for inclusion in Visual Studio and they will even be providing support - it is especially useful when used in conjunction with the new ASP.NET MVC framework.

FYI: Palm includes prototype in their WebOS.
JJ Rohrer
+9  A: 

Stackoverflow is using it - so it must be good !

Ah, so SO is the new Google now !
+1  A: 

Because it got Microsoft, & because of John Resig. John Resig is clearly making some noise here in Javascript space. He knows how to work the marketing side, even if it was not obvious.

+5  A: 

There was an excelent article on the jQuery vs MooTools posted on delicious this morning. It seems to have died at the moment but it is well worth a read if it comes back up again

Sorry i'm a new user so can't post hyperlinks at the moment :(

**A** vs **B** comparison made by **B** author :)
+17  A: 

People keep saying that jQuery's chainability makes for less readable code, but they seem to forget that readability is also a function of layout, not just of syntax. Compare e.g.:

$('#elem').click(function () { /* ... */ }).css({ color: 'red', opacity: 0.5 }).show();


  .click(function () {
    /* ... */
    color: 'red',
    opacity: 0.5

I find jQuery lets me write better, more readable code, provided it's properly formatted. Which really applies to any source code.

+2  A: 

I think because jQuery has been taken in by so many users that the community is ever growing, and it just keeps getting better because of it.

I have never created plugins for the other libraries, but in jQuery it is so easy to make a plugin, even if it's just for simple repetitive tasks you find yourself doing/copying code.

With the community growing ever more in jQuery, bugs are found quite quickly and so many people contribute to this bug finding and producing/debugging plugins.

When i used to use MooTools i loved it! But when jQuery came along, it was really nice, i found things easier to do (even the learning curve is fairly quick to get over) and it's just got better and better. The more you find yourself learning the easier things get next time around too (there are so many nifty ways of doing things in jQuery)

If you want readability, ease of development, and most importantly it' scalability, i would always choose jQuery.

jQuery selectors are just fantastic

Before you say it, im going to - im a self-confessed jQuery addict!

Don't get me wrong though MooTools and proto./script. are both very nice and also have their own benefits (MooTools i sometimes find smoother animating).

But i find there more benefits in using jQuery, and with it being newer it will probably still be around after the other two libraries become used less (or until something even better comes along! - Anything hiding up your sleeve Mr Resig?!)

+1  A: 

Some people like jQuery more to Prototype because:

  1. In IE Prototype tends to be slower based on the benchmarks around the web
  2. Prototype is opiniated as it is closely related to Ruby on Rails. Note: Sam Stephenson is a 37signals employee and former Rails core developer
  3. Prototype does not come with animation out of the box as you need to plug scriptaculous as an add-on, in return you are adding more javascript library to your webpages and having to download more javascript library
  4. jQuery syntax for doing ajax and DOM manipulation is more concise
  5. Eventhough prototype provides many other cool and useful utility functions, most people use ajax and DOM manipulation more (see point no.4).

So use jQuery depending on what you need. If you only want a concise DOM manipulation and ajax library, jQuery should be worth it for you. But if you want to go beyond that (e.g you need OOP framework too) Mootools should be sufficient and much nicer compared to Prototype.

+10  A: 

I know this is an old one but I couldn't stop myself from answering anyway. Just for the record.

jQuery is modular, its core library works faster than any other, it's quite capable and has a small footprint. Which makes it perfect for adding small bells and whistles to your forms like validation and AJAX updaters. It's also quite powerful and stands on the shoulders of giants like CSS3 selectors (which every web developer knows well). John Resig also makes sure jQuery always has all the features on the market and performs them the fastest.

Nevertheless, Prototype was the first library to decouple the language from browser APIs such as the DOM API and XMLHTTPRequest API, which were clearly designed to be language agnostic. Sam Stephenson laid a really well thought out framework for front-end development that focused on the good parts of JavaScript (the ones Douglas Crockford has been talking about even before the first browser wars). And when you compare with jQuery UI, the animations are much realistic, smooth and and the framework is clearly advanced. And jQuery was obviously heavily inspired by the ideas first utilized in Prototype (the use of $ to begin with).

Even though it was really a pioneer, Prototype was coming along with the Rails framework, so some of the basic building blocks like Array.each was designed to mimic the Ruby way of programming. It was extending the Array object which caused previously written for-in loops to fail. And to tell the truth, especially when combined with, you couldn't really call it lightweight at all. You could feel your website staggering as soon as you include the libraries. It came a long way since then but not before jQuery won the hearts of the majority.

I believe most of the popularity of jQuery came from the fact that you could easily download plugins for almost anything and install them into your code with ease. This enabled those who don't want to write JavaScript to have quite elegant front-end features on their websites, such as slideshows and validation.

To tell the truth, even though I like Prototype more than jQuery, it seems more practical to use jQuery for everything where Prototype seems like an overkill.

Mehmet Duran
+5  A: 

If you're going to read the source code yourself to understand what is actually happening, Prototype is a good choice.

Chris Ballance
True, but most these jQuery evangelists are not interested in reading source or contributing to the expansion of the code, most are in it to make life easier for them. With that being said, I can totally understand the need for these people to praise their holy grail for without it they would probably not be capable of deploying half the functionality jQuery has simplified for them.
drlouie - louierd
If you just cut and paste code you do not understand, you are no better than then next script kiddie.
Chris Ballance
@ Chris Ballance. I never imagined myself reading prototypejs, mootoolsand jquery source code one year ago. Now, I always do it. It can be fun.
Thorpe Obazee
+1  A: 

I've used both Prototype and jQuery. Neither are difficult to use, but jQuery is simply the easiest and has the tersest syntax. Why jQuery's Philosophy is Better shows a number of example comparisons between the two.

Chris Tek
+2  A: 

I think a lot of posts here are overlooking the fact that Mootools, while it does have overlap with jQuery in terms of what it can do, is not really comparable to it.

Mootools is a framework that is focused on extending core Javascript functionality. jQuery does have elements of this, but is really just a friendly API for traversing and manipulating the DOM. In that sense, it's questionable whether you'd call it a framework at all.

So if you want effects and quick and easy access to elements, go with jQuery. As many have said, it's by far the most popular and there's a huge community for it.

However if DOM tarversal/mainpulation isn't your main focus, and you're going to be focused more on using and implementing native JS objects like String and Array, Mootools might be better.

Mootools might also be better for bigger applications. Mootools is more about storing repeated procedures on object prototypes, whilst jQuery is more about plugins and good old-fashioned functions. (That said, there's nothing stopping you going the prototype route in jQuery - it will never prove itself obtrusive if you want to do your own thing and ignore its strategies).

Another issue, though, is proficiency. jQuery is much easier to learn. That alone might swing the argument for you. Mootools, as someone said, can sometimes seem like its own language, particular with its advanced simulation of a C-style class system, including inheritance, something Javascript natively lacks.

Mootools will also ultimately involve more lines of code as it doesn't quite go to the extent that jQuery does when it comes to chaining (and often manipulating at the same time) multiple elements. You either find those long jQuery chains confusing or intuitive.

In summary, it depends what you want to do. They are not interchangable, although they do have some crossover.


Very interesting, I've been working with prototype, but I'll try jQuery this time. In fact, I started checking out the documentation but it's being kind of hard, it feels kind of... scattered.

Is there a faster/better way of learning jQuery? Maybe a cheat sheet?

Thanks 4 your help.