The Best JavaScript Library

Posted on by

I am in the process of creating a new web application using asp.net mvc and I am trying to choose the best JavaScript library to use.  I am pretty much sure that I am going to go with jQuery but nonetheless I wanted to review the libraries out there.  One reason is that I am writing a book and I want to be able to justify to the readers why I am going with jQuery and not the others.

What do I want from my JavaScript Library?

I want it to be easy (I am not a JavaScript expert)
I want it to be small
I want it to be fast
I want it to be extensible
I want good documentation and/or community support
I want good/easy AJAX support
I want it to be asp.net-friendly
I also want it to be testable (I am using TDD for this project/book)
Open Source would be nice but not required

What are my options?

jQuery – http://jquery.com/
Microsoft AJAX – http://www.asp.net/ajax/
Dojo – http://dojotoolkit.org/
Prototype – http://www.prototypejs.org/
YUI – http://developer.yahoo.com/yui/

This is a shortlist but if you want a more exhaustive, read this.  I only picked these, for the simple reasons that I have heard of them and are somewhat known by the community.

3 days later

It’s been 3 days since I started this post and I have spent all that time playing around with these libraries…  I have gone back and forth in my opinion on which library to use.  I love jQuery’s selectors, ease of use and community support.  Porototype is also very popular and somewhat similar to jQuery; but I would take jQuery over Prototype for the simple reason that I like jQuery.  YUI (Yahoo! UI) library is beautiful looking and very comprehensive.

jQuery

Pros

  1. Ease to learn and use
  2. Beautiful syntax (the least typing)
  3. Great community support and lots of fans
  4. Decent Documentation
  5. I already own the book
  6. QUnit test framework (http://docs.jquery.com/QUnit)

Cons

  1. UI isn’t that great
  2. Library is not as full-featured without plugins
  3. Plugins are somewhat inconsistent in quality depending on the author

Prototype

Pros

  1. Good documentation
  2. Good community support
  3. Lots of books
    1. Practical Prototype and script-aculo.us
    2. Prototype and script.aculo.us: You Never Knew JavaScript Could Do This!
    3. and many more…
  4. Great UI with the add-on script.aculo.us (http://script.aculo.us/)

Cons

  1. Couldn’t find a testing framework (but I didn’t look too hard)
  2. For some purely emotional reason, I prefer jQuery

YUI

Pros

  1. Great UI components and styles
  2. The best documented library out there, hands down.
  3. Distributed hosting of JS files – the script files will be downloaded from Yahoo server, so when my site becomes a mega-hit, it will scale better.
  4. Great test framework and test runner – check these demos
    image
  5. The most complete library
  6. PDF cheat sheets for every component

Cons

  1. Very verbose – not as elegant as jQuery, but that’s not too hard to fix e.g. I can assign YAHOO.util.Event to a variable $E and use $E as the shorthand.

The rest

I got tired of all the research and decided to wrap it up, so I glanced over Microsoft AJAX and Dojo and realized that there isn’t enough there to justify more research.

The winner…

When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This lead to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look & feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision because I still love jQuery the best.

[poll id="2"]

  • http://blog.dotsmart.net/ Duncan Smart

    “the icing on the cake was the free hosting of the JavaScript libraries” see: http://code.google.com/apis/ajaxlibs/

  • http://blog.dotsmart.net/ Duncan Smart

    “the icing on the cake was the free hosting of the JavaScript libraries” see: http://code.google.com/apis/ajaxlibs/

  • http://vstrac.devjavu.com/ Mladen Mihajlovic

    Another factor is the size of the libraries – between JQuery and Yahoo, JQuery wins…

  • http://vstrac.devjavu.com/ Mladen Mihajlovic

    Another factor is the size of the libraries – between JQuery and Yahoo, JQuery wins…

  • http://www.danhulton.com/blog Dan Hulton

    Why not use YUI and jQuery both? That’s what I do. YUI’s widgets are simply the best out there, and jQuery’s selectors are the tops. Combine the two and get jQuery’s beautiful syntax with YUI’s fantastic widgets. Heck, since YUI is so modular in terms of code files, you don’t even need to bother loading all the extra parts of YUI that you’ll be using jQuery for.

    BTW, big benefit of jQuery over Prototype – jQuery leaves object prototypes alone, making it easier to mix and match other script libraries.

  • http://www.techmale.com Ross Illingworth

    I totally agree with your choice of library, I do think YUI produces very good code.

    However, I also think too many people fail to undersand the power or limitations of Javasacript itself. eg: outside of the libraries, when do you see good functional code?

    JSTR is the only tool I have found that actually benchmarks javascript snippets and allows you to optimize you code properly, or to choose the correct code for the purpose.

    Do you know anything else like it?

  • http://www.danhulton.com/blog Dan Hulton

    Why not use YUI and jQuery both? That’s what I do. YUI’s widgets are simply the best out there, and jQuery’s selectors are the tops. Combine the two and get jQuery’s beautiful syntax with YUI’s fantastic widgets. Heck, since YUI is so modular in terms of code files, you don’t even need to bother loading all the extra parts of YUI that you’ll be using jQuery for.

    BTW, big benefit of jQuery over Prototype – jQuery leaves object prototypes alone, making it easier to mix and match other script libraries.

  • cosmo7

    If you like YUI you’ll like Extjs (http://extjs.com).

    It plays nice with jQuery too.

  • http://www.techmale.com Ross Illingworth

    I totally agree with your choice of library, I do think YUI produces very good code.

    However, I also think too many people fail to undersand the power or limitations of Javasacript itself. eg: outside of the libraries, when do you see good functional code?

    JSTR is the only tool I have found that actually benchmarks javascript snippets and allows you to optimize you code properly, or to choose the correct code for the purpose.

    Do you know anything else like it?

  • cosmo7

    If you like YUI you’ll like Extjs (http://extjs.com).

    It plays nice with jQuery too.

  • http://www.emadibrahim.com Emad Ibrahim

    @Duncan: thanks for the tip – I didn’t know. I wonder how fast do they get new versions to Google code for hosting???

    @Mladen: jQuery minified and zipped is 16kb. And according to this chart http://ajaxian.com/archives/yui-setting-the-rec… YUI will be at 8.9kb. without animation and drang and drop and 18.4kb with them. So size is not that big of a deal – specially if it is hosted for free :)

    @Dan: I might actually do that. I love jQuery’s syntax too much to completely give it up. I am glad to hear that you are already doing that and not having problems.

    @Ross: Never heard of JSTR but I will check it out. thanks.

  • vlad

    if good documentation is important to you, don’t use dojo.

  • http://www.emadibrahim.com Emad Ibrahim

    @Duncan: thanks for the tip – I didn’t know. I wonder how fast do they get new versions to Google code for hosting???

    @Mladen: jQuery minified and zipped is 16kb. And according to this chart http://ajaxian.com/archives/yui-setting-the-record-on-library-file-size YUI will be at 8.9kb. without animation and drang and drop and 18.4kb with them. So size is not that big of a deal – specially if it is hosted for free :)

    @Dan: I might actually do that. I love jQuery’s syntax too much to completely give it up. I am glad to hear that you are already doing that and not having problems.

    @Ross: Never heard of JSTR but I will check it out. thanks.

  • vlad

    if good documentation is important to you, don’t use dojo.

  • http://www.peterbe.cmo Peter Bengtsson

    Execution speed is important for me which, last time I checked, I think jQuery wins at.

  • http://patnakajima.com Pat Nakajima

    Prototype includes quite a nice unit testing framework actually: http://github.com/sstephenson/prototype/tree/master/test. There’s a runner written in Ruby that allows you to automate the running of your test suite in different browsers.

  • http://www.peterbe.cmo Peter Bengtsson

    Execution speed is important for me which, last time I checked, I think jQuery wins at.

  • http://www.emadibrahim.com Emad Ibrahim

    @peter: Do you have any links or reference to support your claim that jQuery is faster?

  • http://www.emadibrahim.com Emad Ibrahim

    @peter: Do you have any links or reference to support your claim that jQuery is faster?

  • dave

    not evaluating GWT was your second mistake. choosing asp.net was your first.

  • dave

    not evaluating GWT was your second mistake. choosing asp.net was your first.

  • Pingback: The Best IoC Container? | Emad Ibrahim

  • KiLVaiDeN

    YUI is very powerful, but I don’t find the documentation “that good”. In fact, it’s quite troublesome for some functions to browse the api and find out what the “OData” parameter is… Well after some practice you find out quite quickly, but it’s not crystal clear. YUI has a great support for grids and such which is quite exciting too.

    I like the prototype documentation and syntax, and jQuery is a clean library that’s for sure. Extjs is a good option too, but it’s not free for commercial use.

    In the end of the day, I’d still prefer YUI because it has a great support in the person of Yahoo, and it works pretty well.

    K

  • KiLVaiDeN

    YUI is very powerful, but I don’t find the documentation “that good”. In fact, it’s quite troublesome for some functions to browse the api and find out what the “OData” parameter is… Well after some practice you find out quite quickly, but it’s not crystal clear. YUI has a great support for grids and such which is quite exciting too.

    I like the prototype documentation and syntax, and jQuery is a clean library that’s for sure. Extjs is a good option too, but it’s not free for commercial use.

    In the end of the day, I’d still prefer YUI because it has a great support in the person of Yahoo, and it works pretty well.

    K

  • H.Guliyev

    http://mootools.net/slickspeed/
    At least, This shows that YUi is the slowest. That is the biggest problem I have with it.

  • eibrahim

    wow… that is a really cool… Thanks for the link.

    I think using both jQuery and YUI is the way to go. I can use jQuery for
    all my manual script writing and just limit YUI to User Interface stuff -
    which is where it really shines.

  • http://patrickz.developer-labs.com Patrickz

    Where is Ext-js? :D

  • kevin

    Framework with beautiful widgets. (best i have seen so far) -> mix jquery with extjs widgets and you got a perfect library.

  • Binoy

    Extjs Extjs Extjs

  • Rod

    Ext JS is my favorite. I've tried them all, JQuery, YUI, Dojo (ugh – I really tried, just couldn't get my head around it) Its a coders lib, not a designers snippet library.

  • jhuni

    I agree about YUI I actually use it because it is good for modular code and separating the user interface from the application logic (MVC) none of the other libraries seem to have that advantage.

  • http://ericmiraglia.com Eric Miraglia

    Great discussion and many interesting points made in the comments. I would add only the following regarding the Slickspeed measurements: Be careful of conflating Slickspeed results with overall library performance. Slickspeed measures the performance of a selector engine against a specific DOM structure (relatively long, not too deep). Your results will vary if your DOM structure varies. More importantly, element selection via the selector engine is just one small aspect of library performance. Slickspeed tells you how Selector engines perform against a specific task; it does not give you insights into the overall performance of library code.

  • http://www.malcolmcoles.co.uk malcolm coles

    With no javascript experience whatsoever, I managed to get the jquery slider panel working on my mum's website (http://www.sabc.co.uk/st-albans-office.html) – so I don't know about the others but Jquery gets my vote!

  • Kavih

    This site seems to use both jQuery and ExtJS: http://www.browsernotincluded.com They built a desktop app that allows 3rd party developers to build web modules in javascript. jQuery is used to parse the DOM and ExtJS is used for the user interfaces. Pretty cool IMO.

  • Bob

    totally agree,prototype is too intrusive,meaning if you use it,you can't play others meanwhile.

  • http://launchpad.net/gold-os/ Jhuni

    I agree about the YAHOO user interface I have used all the libraries myself MochiKit, jQuery, MooTools, Prototype, Dojo, and I simply like YAHOO User Interface the best. It puts everything in an unobtrusive global namespace and it is the most well designed IMO. People say “it is not as elegant …” If you actually look at their code they have dealt with that in the best possible way.

    People also say YUI is bloated and heavyweight. That is because YUI contains more components then you would ever need.

  • mondongo

    try EXT JS !

  • steve

    I disagree that YUI is beautiful. In fact I think all of the libraries are overly replicated with bloated code and long names. Their widgets are not efficient, intuitive, innovative and they are barely optimised. Many don't even provide for xhtml validity. The reason you like Jquery is because it cleans out the garbage that the equivalent – YUI creates. Jquery is incredibly optimised and so easy to understand when looking at the code. So Jquery doesn't have all of the features of say – scriptaculous, or dojo, and thank god YUI. A good javascript programmer can extract the code from other libraries and use them with Jquery. As for prototype, I think it paved the way forward as a major stepping stone in javascript libraries, but jquery is twice as optimised and has taken the essential functionality from it, and left out all the dangerous functionality like – currying for example. Prototype provides a whole load of features that I would never want to use and never want to have to troubleshoot in someone elses code. Much like php, which provides an incredible amount of features that would scare a .net developer through poor programmatic practice.

  • http://www.emadibrahim.com eibrahim

    My JavaScript knowledge has increased significantly since I wrote this post
    and I can tell you that now I only use jQuery and I don't need YUI for their
    UI anymore.
    Plus jQuery has significantly improved its UI-related stuff just check the
    gallery at http://www.jqueryui.com

  • tamimi

    The problem with Extjs, is that is not totally free, which make the developers try to avoid it

  • Shady

    Nevertheless, you can hotlink jquery from google CDN directly and use it in your applications.

  • rkssaravanan12

    hi ,

    My point of view JQUERY is the best javascript library for the dynamic website. The jquery has syntax ,easy to learn and good manual.

  • Jeff

    jquery, dojo, and prototype also have free hosting of the javascript libraries through a cdn (content delivery network for faster speed).

  • Alik

    We used dhtmlx (http://dhtmlx.com) in our asp.net project and were pretty satisfied with the tools. They have very powerful grids, and special connectors for .net were a great help.

  • jordangray

    In the case of jQuery 1.4… The latest version was being hosted on the day that it was released. So pretty quickly, I would imagine! :)

  • jordangray

    In the case of jQuery 1.4… The latest version was being hosted on the day that it was released. So pretty quickly, I would imagine! :)