The Best JavaScript Library

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″]

Advertisements

0 thoughts on “The Best JavaScript Library

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

    • 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! 🙂

      Like

  7. Pingback: The Best IoC Container? | Emad Ibrahim

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

  16. 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! 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s