Top AJAX toolkits compared (pt 1)
Let me preface this post by saying that I am not a JavaScript programmer. I play with JavaScript. I have used it for nearly 10 years, and have simply never felt the urge to dive in and become a ‘master’ in any sense. However, with lots of sites popping up that are using stunning, cross-browser ajax (eg: netvibes), it have started to grow curious if it’s even necessary for me to learn the language, if there are such tremendous tools out there to do so much now. Having made this start to a journey, I’ve decided to review the ‘top’ (easiest to find in a google search) AJAX libraries / toolkits.
NOTE: If anyone who works with / owns / represents one of the sites listed below, and would like to offer some help on representing your toolkit accurately, feel free to contact me, I’d love to have your help.
I’m sure this is going to take some time, but I figured I’d get the ball rolling and just fill you in as I go. I’m researching the various AJAX frameworks for a project I’ve got coming up, and I realized that the number players in this field is actually growing, and the differences between these players seem to be shrinking. So, by what criteria could I choose the ‘best’ for what I’m doing.
First things first. Let’s identify the big players in the game. (if your favorite framework / toolkit isn’t listed, feel free to shout about it, and I’ll happily take a look). In no particular order.
(just to reiterate, this is not a ranking. I only used an ‘ordered list’ to be able to quickly reference these individually later)
Next, we’ll consider a variety of criteria including:
Though I’ll have more to offer as I’m able to actually implement some (maybe all?) of these, I’ll start with the simple information I get just by going to each of their site… the footprint. Now, this information won’t necessarily include a gzipped, minified version of the code, nor will it necessarily include the full range of functionality, but I’m curious to know the basics. How big is the core group of files that is needed to run a few simple tasks (tabs, tooltip, hide/show, etc…)? In order to accomplish this, I figured I’d run a test.
I want to build a page which contains 2 separate lists. Each list should contain sortable items. Any item should be able to be dropped at any position in either list. Then, I want to rate each of the above toolkits on the above listed criteria. The nice thing about this, is a lot of the toolkits come with demos / tutorials which contain something that does pretty much exactly what I need. I’ll have to do some scaling back to make it all as fair as I can, but it should be a pretty controlled experiment. I’ll keep you posted on the progress, but for now, here are my initial reactions. (first impressions are everything, right?
It isn’t fair to call this a ‘first impression’, since prototype / scriptaculous was my introduction to AJAX (as was the case for a lot of people, from what I gather). However, my impression is that they have (together) grown into a pretty solid toolkit. With prototype, you get all the basic functionality that you need for DOM manipulation and Asynchronous data handling, and with Scriptaculous, you get all the ‘goodies’ like drag and drop, tabs, effects, etc… The footprint is probably going to be one of the smallest, if I had to guess, and the community will probably be one of the largest. However, it’s everything in-between that I’m curious to know. How hard is it to customize, really?
Yahoo has begun to impress the hell out of me lately. I heard about the Yahoo AJAX toolkit about a year ago, I guess, and I really didn’t give it the time of day. Mainly because I had started to just wait around for Google to simply release a one-to-one suite for everything Adobe and Yahoo ever did, and presumably … a much better one. However, with the YUI theater and a massive documentation site for YUI, I am now irrevocably intrigued. I plan to dive in deep with this toolkit, and spend as much time as I can. However, my first impression is… HOLY CRAP THERE’S A LOT OF STUFF HERE.
The site is cluttered. Ugly. Non-intuitive to navigate. Will that be the downfall for my ability to master the YUI toolkit and therefore offer the coolest, most compelling features through a single AJAX framework? We’ll see…
Dojo is a fairly new player to the AJAX toolkit game, and thus, I’m able to give them a little slack in the area of documentation. That being said, their documentation sucks. There must be a happy medium between Yahoo’s 90,000 articles on the front page, and Dojo’s 3 different sites that offer the same links over and over again. From what I can tell, this is / will be a lightweight, powerful toolkit. However, the chances of my being about to jump in and start writing custom methods and functions any time soon without more than their lack-luster documentation … pretty slim.
JQuery
JQuery is fast. The examples on their site are fast, the demos on the jQuery UI site are fast. I downloaded this package, and threw up a tabs / datepicker / accordion in about 10 minutes. It’s a just fast. So far, I’m really diggin’ jQuery. The potential challenge here is the fact that they use ‘themes’ for their javascript components. It’s a great concept, but I’m curious to know how easy their css is to traverse and cleanup for my own needs.
MooTools
Mad4Milk is one of my favorite development sites to go and look at, primarily because they don’t seem to know that the rest of the web doesn’t look anything like them. I love that. They’re tools are presented well, which leads me to believe that they will be written well. I’m anxious to get started using some of their code and really get my hands dirty with MooTools.
BackBase
When I hit backbase for the first time, my jaw dropped. This is the most unbelievably deep and complex XSLT, JavaScript, XPath, CSS, XML, and HTML code I’ve ever seen. It’s amazing. The problem… it’s the most deep and complex XSLT, JavaScript, XPath… etc… It’s super easy to implement. But after downloading their basic package and throwing together a few sample tools (tabs, accordion, etc), I sat and waited a full 2 seconds for the first load of that page. ON MY OWN MACHINE. No http connection. All local calls. Just the javascript itself loading up with that many cross-references to layers and layers of XLST styles and XML dataSources. I was totally bummed. I’m sure there must be a way to make this smaller and faster, but at the moment, I’m very disheartened about the shear size and clumsiness of the page load experience I just had.
The rest of this list is simply yet to be seen. I’ve seen the demos online for each. Some are much more compelling than others. However, I simply haven’t had the time to download and run each one. When I do, you’ll hear about it. ;-)
Google Toolkit
mochikit
Spry
Rico
SmartClient
AjsJS
fleegix
Saja
qooxdoo
zapatec
