Tuesday, May 29, 2012

Why does everyone like jQuery more than prototype/script.aculo.us or MooTools or whatever?

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?

Source: Tips4all


  1. 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:

    The chaining of queries (each jQuery returns itself so you can chain them together)
    Working with arrays/collections of results as a single unit eg: $('.tab').hide() could hide all elements of class tab
    I find the API extremely 'discoverable' and commonsensical, in that, 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.
    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 :)

  2. 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:

  3. 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!

  4. 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.

  5. 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 Script.aculo.us 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 Script.aculo.us, 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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});

  10. Stackoverflow is using it - so it must be good !

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

    Total DOM Pollution and "magic at a distance" by hacking all the base classes with 'monkey patching'
    epic slow performance in JavaScript
    significantly overweight codebase.
    Scattered/Incoherent API documentation.

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

  13. 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.

  14. 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 :(

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

  16. In the end they all do the same thing. I started with Prototype + script.aculo.us 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.

  17. 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.

  18. 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.

  19. 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.

  20. 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.

  21. 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.

  22. 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

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

  23. 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.

  24. 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?!)

  25. 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

  26. 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.

  27. Some people like jQuery more to Prototype because:

    In IE Prototype tends to be slower based on the benchmarks around the web
    Prototype is opiniated as it is closely related to Ruby on Rails. Note: Sam Stephenson is a 37signals employee and former Rails core developer
    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
    jQuery syntax for doing ajax and DOM manipulation is more concise
    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.

  28. 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.

  29. 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.

  30. Regarding readability, I think there are some clear cases when plain old JavaScript works just fine. There are other times when jQuery offers vastly superior functionality and the ability to transcend browser irregularities.
    Still, I offer this example of some jQuery hogwash, is there any slicker or more readable way to do this in jQuery?


    myTextArea.value += myString;



    $('#myTextArea').val($('#myTextArea').val() + myString);

    Say what now?