Choosing a JavaScript Toolkit For Serious DOM Manipulation

It has finally become clear to me that you can’t get by solely with the MS AJAX Library for sophisticated DOM manipulation. The plumbing is impressive: classes, namespaces, interfaces, enums, etc. However, the Sys.UI.DomElement class doesn’t get you very far. Writing own code to traverse and manipulate DOM gets very boring very fast and is very unproductive.

The AJAX Control Toolkit Common Library

The toolkit relies on a top-notch library full of DOM manipulation goodness. You can find it in AjaxControlToolkit\Common\Common.js. However, it seems to have been written on the go, with functionality put in as needed by involved developers. I may be wrong in my assumption, but I don’t understand why many essential primitives found in other libraries of the same caliber (Prototype, JQuery, Mootools, etc) are missing. Also, common.js doesn’t appear to have been written to be used on its own, but with control extenders only.

JQuery

Once it got tedious to plug holes of the mentioned libraries and write the same code over and over, I decided to look around for a comprehensive library. The usual suspects are Prototype, JQuery, Mootools, and Dojo. I bet you can list a handful more (suggestions?). My goal was to use the MS AJAX Library for plumbing and a toolkit for heavy DOM lifting.

Dojo was disqualified right away. I’m not touching anything ver < 1.0. Even though I used to like Prototype a lot, I dislike its object extension model. I actually like Microsoft’s approach much better.

Mootools is very solid but its DOM querying and traversing capabilities are not up to par with JQuery.

Which leaves JQuery by John Resig. JQuery lets you get away with some pretty insane syntax which surpasses other toolkits, AFAIK. I’ve been able to compress many, many lines of code into one-liners. Also, the community around JQuery has produced a bevy of plugins for all kinds of occasions. The one plugin I like in particular is Interface.

What do you, guys, use?

i would have to agree with you on that.

ive tried most of them and jQuery is clearly the most fitting for me.

Im currently building a boilerplate for my web projects that makes heavy use of both jQuery and asp.net ajax. Im really enjoying it (so far) :-)

Same setup here, I like the MS Ajax server-side integration and easy web services but when it comes to the user interface its jQuery all the way.

jQuery is the way to go! I'm using it all the time, and I only reluctantly use the MS AJAX library when I absolutely need to (jQuery-independent code).

jQuery is very fluent, easy to extend, and fast (especially since 1.1.3.x). It has a lot of well-written plug-ins available. It's a no-brainer folks!

I've been using mootools with the CNET extensions, and it's been extremely useful. I haven't tried JQuery yet, but will have to take a look at it given everyone's endorsements of it. The think I love about mootools is the easing equations by Robert Penner, which if I understand correctly are what the Flash community has been using for a while. It makes transitions and effects look just like Flash. Does JQuery have something similar, or have the equations been ported to that framework?

Animation in JQuery is quite basic, but it's ok. The Interface plug-in provides some transitions and visual effects, though.

Hey Milan, here at work and on all my personal stuff, I'm a jQuery fan. I think the more you dig into it, the more you'll like it even. It's getting better every day with the friendly competition between libraries on Selector speed and very powerful, not to mention size-conscious. Also allows for very short, very simple scripts to do things which are more often than not very redundant and bloated tasks.

I've been using prototype and scriptaculous for awhile now but have been looking into JQuery. I tried a JQuery based slideshow and it ended up not working in Safari.

Unfortnatly mootools not working with ASP.NEt AJAX, i hope JQuary has no problems with it.
another thing anybody try www.extjs.com/ ??

Has anyone experimented with the Yahoo! User Interface Library (YUI)? I haven't tried it, but it looks promising...and it appears to be pretty modular. It's a lot more than a Javascript Toolkit.

Can you use the minified/compressed version out of the box in IIS6 and IIS7?

Ed, I don't think it matters if it's II6 or 7. Minified scrips are "simply" crunched code which any browser understands. Ditto for compressed scripts---modern browsers know how to unpack compressed content.

Take a look at this post to decide on size vs performance.