Delphinidin

When you select a framework, you have about 20 JavaScript libraries to choose from, with five of those libraries being the main players. These five main players — YUI, Prototype, MooTools, Dojo, and the topic of this book, jQuery — have risen up above the rest because of their ease of use and the enormous audiences they have. The main differentiators between most of these libraries include size and browser support.

The five libraries I discuss are open source, which means that anyone can contribute to the source code that makes up these libraries. Microsoft software, for example, is not open source — it is propriety software owned by Microsoft . Microsoft employs its own programmers to develop it. Microsoft then sells their software for a licensing fee. The licensing fee allows you to use the software, usually for a set period of time, and gives you access to support from Microsoft if you have problems.

Open source software is different. Anyone can download the source code and contribute changes to it — which makes for better code because it's all created on a volunteer basis with a goal of writing better software, not making money. Because you are not paying a licensing fee, you are free to do whatever you please with the library. The open source community on the Web is huge, with millions of users contributing through blogs and forums, and it's now quite easy for designers and developers to find support when they need it.

One important thing to keep in mind is that when you are learning a JavaScript library, you are learning to read and write in what feels like another language — it is another interpretation of the JavaScript language.

- YUI
The YUI (Yahoo! User Interface) JavaScript library was created by the Yahoo! Developer Network in 2005 and is under the BSD (Berkeley Software Distribution) license. The BSD license allows software to be distributed as permissive-free software, which has the least amount of restrictions for distribution purposes compared to other similar licensing options such as GNU General Public Licenses. YUI is fully supported on Internet Explorer 6 and later versions, Firefox 3 and later, Safari 3 and later, and Opera 10 and later.
The total file size of the YUI library is 31 KB. To give you an idea of what YUI code looks like, here is some sample JavaScript code showing how to implement a click event using YUI. There are two parts to the click event here: the function that is called when the click occurs and the actual click event itself. The code is not that elegant and uses a lot of YUI-specific syntax.

function handleClick(e) {
Y.log(e);
}
YUI().use('node-base', function(Y) {
Y.on("click", handleClick, "#foo");
});

- Prototype
Prototype, a JavaScript library created by Sam Stevenson, became popular because it was the fi rst JS framework to be bundled with the also-popular rapid development-programming framework called Ruby on Rails. Because it's incorporated in Ruby on Rails, I have always felt that it wasn't meant for Web designers, but more for hardcore Web developers to use in conjunction with Ruby on Rails.

The Prototype library is a base library with Ajax functionality, which becomes more feature-rich with the addition of Scriptaculous. Scriptaculous off ers eff ects and user interface elements and only works in conjunction with Prototype. The major downside to this library is the size: Both .js files total up to 278 KB.

The documentation for the Prototype and Scriptaculous libraries can be hard to understand for inexperienced front-end developers. As with other libraries, a community of supporters exists, but Prototype can still be hard to learn because of some of its more complicated syntax. To give you an idea of what Prototype code looks like, here is some sample JavaScript code showing how Prototype handles a click event. The click event is very similar to setting up a click event in jQuery, but looks can be deceiving — many of the other methods in Prototype are actually more diffi cult and look less like jQuery:

$("foo").observe("click", function() {
alert('Clicked!');
});

- MooTools
MooTools was first released in 2006, and is a similar JavaScript library to Prototype — the syntax is aimed at intermediate to advanced Web designers and developers. The MooTools JavaScript library allows designers and developers work with an object-oriented framework to extend the JavaScript API and provide interactivity on the Web pages. MooTools is for those looking for a library similar to pure JavaScript. Here is some sample code showing how MooTools handles click events:

$('foo').addEvent('click', function() {}));

- Dojo
Dojo was first released in 2004 as a JavaScript framework for creating cross-browser compatible Web applications and for adding seamless interactivity to Web sites. Dojo's at experienced front-end developers, making it harder for beginners to use and understand. Here is some sample code showing how Dojo handles click events:

fooNode = dojo.byId("foo");
fooConnections = [];
fooConnections.push(dojo.connect(fooNode, 'onclick', foo));

As you can see from all of the preceding examples, JavaScript libraries can have pretty confusing syntax.

-jQuery
Now take a look at an example of how jQuery handles click events:

$('#foo').click(function() {
//click event
});