I have to agree.
Although there are many frameworks today, there are only a few that truly deserve recognition. I've experimented with a few, and thought that it would be good to have a formal review of the top libraries.
I only consider myself to be a professional at one: jQuery, so beyond that, I will need some help. I've built whole applications in jQuery, so I know its power better than most.
1.
YUI:
This has got to be one of the coolest things going. Although it is somewhat bloated compared to some of the other frameworks, it has some very innovative ideas in it, and offers some of the richest user interfaces anywhere. Yahoo Maps is a work of genius, and is a testament to the power of this library.
2.
Prototype:
This is one of the oldest libraries in existence, and was the most widely used one, until jQuery came along. It is impossible to talk about Prototype without mentioning
Scriptaculous, which is of course Prototypes user interface library.
Prototype is extremely important in the history of frameworks, and I think of it as the granddaddy of many of the younger ones. Many newer libraries based their systems off of its ideas. The way jQuery selects the DOM is basically an improvement of the Prototype system. I've read online tutorials by
John Resig, the creator of jQuery, and he often gives Prototype examples in his scripts. It is definitely worth studying because of how widely used it still is.
3.
jQuery
'Nuff said. jQuery is a whole new way of thinking about JavaScript applications. It is now the most widely used framework in the world, and is famous for only being about 15K when Minified and Gzipped. jQuery is all about writing short code, and I am continuously amazed when I come up with simple one-line jQuery statements that replace whole blocks of code that I may have used before.
Here is a one-line suckerfish-style dropdown that I invented (the rest is being controlled by the CSS document):
Code:
$("#nav>li").hover(function(){$(this).addClass("open");}, function(){$(this).removeClass("open");});
Everything in jQuery is chained to the "global object" that can be expressed either as $ or jQuery. YUI does a similar thing with the YAHOO global object, by making everything a product of a chain to its object, to prevent the functions(or methods) from clouding the global namespace. jQuery's user-interface library is called
jQuery UI.
4.
MooTools
Also a very compact library, with a rich, object oriented structure, I don't know very much about this system, though it has a lot of popularity on Webmaster-Talk. I'll have to leave it to VirtuosiMedia to explain this one, as he seems to be the resident expert.
Unfortunately it isn't very well documented, though it obviously has a very high-level codebase. I'm interested in studying it because of the fanfare it has around here. I like that it is so compact.
5.
MochiKit
This is another interesting one. I don't know much about it, but supposedly adds some Python-like features to JavaScript. It is very lightweight, and object oriented. Unfortunately, I heard that development has slowed down somewhat, and certainly isn't happening at the pace of many of the other libraries here.
6.
Dojo
I shouldn't have put this one so far down the list. Although it is not as small as the lightest ones here, it is still small(about 26K Gzipped), and has a very good reputation for running high powered applications.
Dojo has also made a lot of headway recently into mobile applications. I don't know very much about the mobile version, but I heard its code is really small.
I wish I knew more about this library. It is considered to be one of the most important ones around. Dojo's user interface libary is called
Dijit.
7.
ExtJS
This one almost didn't make the list, but I think it is an important framework, and it has been growing in popularity. This is one I have experimented with, and it is completely different from most other libraries, which are usually a core codebase with an optional user-interface library. Prototype has Scriptaculous, jQuery has jQuery UI, etc. ExtJS is different, because it is really only meant to be used as a UI library. Although it does have a relatively lightweight core, the core is not very useful without the UI libary. I don't like the way it does event handling or DOM selection, which is why it almost didn't make the list.
ExtJS is made for building table-based, spreadsheet-like web applications. Almost everything you will build in an ExtJS application will be inside of their specially functioning table. It has some very cool features for nesting functionality inside tables in a way that imitates desktop applications. I think this library could be vastly improved, but it has huge potential, that is why I put it on the list.
________________________________________________
That does it for the list. Only 7. If anyone thinks the list is too short (or too long?), please feel free to tell me I'm wrong.
Here is a summary of the node selection of a few of the most important libaries as found on a shared slide found
here:
- jQuery is based entirely around node selection
- Prototype has node selection as a key API
- YUI and Dojo just have getElementsByClassName
