Well the hype of Web2.0 has certainly revitalized Javascript in the web development community. Just when you think it’s dead… I look forward to researching each of these libraries more thoroughly and then incorporate the best suited one into Kinetic CRM.
Here is the summary of the 4 main libraries as described by Sitepoint.
Dojo:
The great thing about Dojo is that it’s so rich in features. The Widget system provides a raft of useful controls such as a DatePicker, a RichText widget, as well as a considerable number of controls that you would expect to find in something like Microsoft’s MFC. In addition to this, you can build your own widgets on the framework using HTML, CSS and JavaScript (see this article for details).
But JavaScript need not be limited just to the browser, and Dojo is designed with this in mind. Dojo’s platform independence could make it an interesting platform for desktop widget development, as well as many other potential applications. As an example, Open Laszlo recently announced that it was licensing Dojo for its JavaScript implementation of the platform.
Dojo’s design has quite a Java-like aesthetic without trying to be Java. In fact, I’d say Dojo utilises JavaScript as a language exceptionally well. One downside of the library’s design, though, is the sometimes long package strings that you need to type out to call the methods or instantiate the library’s objects — it would be nice if Dojo could provide a way to “mix” a package into the global or local scope. This would provide ready access to a certain package if you planned on using a lot of methods from it, although I’m not sure how easily it could be incorporated.
Additionally, for all its features, Dojo is completely missing any functions that could aid the selection of DOM elements — something that’s quite fundamental to DOM Scripting. It seems to be quite a gaping hole in the library — it would be great to be able to select elements using CSS and/or XPath. Similarly, while some of the objects in the library seem to support a kind of iteration framework, Dojo is lacking in methods for iterating though arrays and collections, a task which seems to make up the bulk of DOM scripting tasks.
And at this point in time, documentation for Dojo is not at a premium. The official Dojo site contains some API documentation that’s far from complete, but it does have some well-written articles highlighting areas of the library. The JavaScript community has yet to embrace the daunting task of documenting Dojo, though, so independent on the topic articles are few and far between.
Mochikit:
First off, Mochikit’s logging framework is excellent. Simply add logging statements:
log("This is so much better than alert");
log("ERROR This thing is broke");
You can then use Mochikit’s bookmarklet to open a log window and view your log messages. You don’t need to add anything into your pages or include any extra script — it’s truly effortless and beats alert any day.
Mochikit also makes full use of JavaScript’s functional programming features to really enhance and simplify the library’s API. For instance, if you want to sort a group of objects by their name properties, you can use keyComparator to create the sort function for you:
var sortedByName = people.sort(keyComparator("name"));
There’s also the useful counter function. This creates a function which returns a value that’s incremented by one every time it’s called:
var nextId = counter();
nextId(); //=> 1
nextId(); //=> 2
nextId(); //=> 3
There’s also a full set of Python-style iteration functions, such as forEach, map and filter, which are sure to see heavy use.
As far as documentation goes, Mochikit has some very good API documentation, but details on some very basic parts of the library are a little lacking. In particular, after reading all the docs, watching the screencast and writing a few Mochikit-based scripts, I’m still unsure which version of the library is best suited for any purpose. Do I use the packed version or the main Mochikit.js? How can I load individual parts of the library?
However, Mochikit does have a mailing list, so answers to these kinds of questions are, no doubt, not far away. All in all, Mochikit may not be what you’re used to in terms of a JavaScript library, but it’s beautifully designed and I’m looking forward to seeing where Bob takes it.
Prototype/Script.aculo.us:
Convenience is king with Prototype. Most notably, the $ function (which selects elements by id) and the $$ function (which selects elements using CSS selectors) provide extremely quick access to elements on the page. The $$ function even supports CSS3 selectors — most browsers don’t. When you use it in conjunction with the enumerable methods and Prototype’s other convenience methods, you can come up with some pretty concise statements. For instance, to hide all div elements with a class of /#c#”obscene”:
$$("div.obscene").map(Element.hide);
$$("a[href='http://']").each(function(element)
{
Event.observe(element, 'click', openNewWindow);
}
);
As we all spend most of our scripting time working through lists of DOM nodes, this buys us a lot of power indeed. The compact and intuitive API really is the killer feature of Prototype for me.
Scriptaculous is a great, extensive effects library with solid drag-and-drop support that, again, is ridiculously easy to use. Consider this:
new Draggable('my_element');
This produces an element that the user can drag. You can then add further configuration using object notation, like this:
new Draggable('my_element',
{
revert : true
}
);
Documentation was very limited for a long time, but recently many people have filled the gap, making Prototype one of the most widely documented of the big JavaScript libraries, albeit that that documentation is a bit splintered. There are no central API docs, but there’s a whole raft of libraries that cover parts of the library, as well as Jonathan Snook’s excellent cheat sheet detailing the entire library. The prototypedoc.com site also maintains a pretty thorough list of articles about Prototype to help you get started with the library.
Yahoo UI Library:
The documentation provided by Yahoo! for the library is excellent. The site has formal API documentation, plenty of examples, a mailing list and some brief but clear explanations of the main features of each part of the library. However, as with Dojo and Mochikit, the library has not quite managed to capture the imagination of the developer community as much as Prototype, so independent articles are still thin on the ground at the moment. The best place to check for articles about YUI is Yahoo! developer, Dustin Diaz’s site .
As I implied above, the event handling implementation is one of YUI’s main strengths, and the fact that it is decoupled from the other parts of the library means that it could well see a lot of use independently from the rest of the library. However, the rest of the library, while being very functional, doesn’t contain as many innovative features as the likes of Mochikit, Dojo and Prototype, and because of the long package strings, coding with YUI sometimes feel rather long-winded.
Yet the growing list of components is very rich. For instance, the Calendar component supports several languages and multiple date selections, and the Container classes give you the power to implement all kinds of windowed interfaces. One downside of using these components is that they tend to be very heavily dependent on the other libraries; in discussing this, Dean Edwards highlights as an example the treeview control, which uses around 260K of JavaScript.
So Who Wins?
Well, the short answer to this question is that there is no real stand-out solution that excels in all situations.
Prototype is the most comprehensively documented — albeit in a splintered way. It is also seemingly the most widespread library at the moment, possibly because it really excels at the kind of tasks developers complete most often, like selecting nodes and working with lists. Of course, it’s going to be the natural choice for Ruby developers because it sticks to many Ruby idioms. One other great thing about Prototype is that it has the mighty weight of Rails behind it and, as a result, there are many developers providing bug fixes and patches to Prototype. Finally, it offers a wealth of add-on libraries such as scriptaculous, Rico, and Behaviour that make it a good, solid choice for many developers.
On the other hand, Prototype has a very under-developed event handling framework, which is a major problem for an otherwise powerful library. Also — and this is purely a matter of taste — Prototype’s super-pragmatic approach to things (like the heavy use of the innerHTML property) can seem a little “dirty” sometimes.
For smaller projects, the decoupled design and fully-featured components of YUI may well be a big plus. It’s very easy to drop in the Connection Manager or the Event library and get going on some basic tasks without having to traverse too much of a learning curve. On the whole, though, it doesn’t have much to offer in terms of cool or powerful features.
Dojo is definitely the daddy of the bunch — you can almost always rely on it for the most powerful implementation of any feature. And Dojo’s focus on performance is an absolute godsend if you’re planning a very JavaScript-intensive application. The widget implementation also has enormous potential for building complex UIs. However it really is quite big — both in terms of its file size and the size of the API — so I wouldn’t recommend it for smaller projects.
In my opinion, Mochikit is by far the most well designed and well thought out of the four, and Python/Twisted/Nevow developers will definitely find its API very familiar. However, its documentation is a bit thin in some places (for instance, I’m still a little unsure as to which version of the Mochikit distribution to put in the script tag). Also, some of the idioms and functional techniques that it uses may be confusing for beginners or those who aren’t well versed in functional programming techniques. However, it really is worth a look. Mochikits’s capabilities will probably surprise you — the createDOM function, iteration tools and the asynchronous architecture are a work of art.
