Choosing an AJAX Framework: Dojo vs. ExtJS vs. YUI

February 10th, 2010

I recently started a new project, and one of the first things I had to do was figure out what our main JS tool was going to be. As I concluded in a previous post on selecting a javascript framework, the place to start with this sort of decision is to break up the tools into three major categories:

  • Level 1: JS Languag Enhancement Libraries
  • Level 2: AJAX Frameworks
  • Level 3: RIA Development Platforms

But what decision did I come to? Well, Level 1 was determined to be too light for our needs. Features such as widgeting systems, and more advanced RPC methods are missing, or only available as non-standard third-party features.

Level 3, on the other hand, was too much commitment for where we’re at right now. Perhaps in the future, we will revisit these tools, but right now, we’re prototyping, and trying to get a beta product in front of clients, so the barriers to entry that level 3 presents, both in learning curve, as well as in our own lack of clarity in what we’re doing and the possibility of going down the wrong path lead us to forego this level of complexity.

So, we went with the goldilocks solution — we found the middle to be just right for what we’re trying to accomplish, more complex tools and available widgeting systems, without too much commitment up front.

In our reveiew, we considered the following:

  • Conversion / Creation of a custom object framework that had no relevance to the framework
  • RPC methods
  • Widgets (events included)
  • Learning Curve / Barriers to entry
  • Selectors

General Application Design / Custom Object Creation
Item one was very important, as our needs are very custom, so we foresee a lot of time building out an application framework from the ground up. Of the three frameworks tested, Dojo came out ahead. It had the clearest object inheritance framework, and we were able to convert our objects quickly and into a format that was familiar to someone that has worked in Java and really likes JQuery. There were some differences, but they were rather minor.

Ext JS is a different story. Initially, I struggled to understand how object inheritance works, but I have to admit it’s more to do with what I’m after, then any failing on the part of Ext JS. What I failed to realize early on was that Ext JS is geared specifically toward the user that is after a widget/component library, not one who is trying to build a general JavaScript application. So, for our project, where we know that a major portion of it is going to be client-side logic for generating reports and calculations, independent of any UI framework, this is subtle, but important difference. So, something simple like creating a class is ignored outright by Ext JS. Instead, you’re meant to create your own classes in whatever you see fit, until you are ready to take on its component architecture. This may or may not work for you.

Yahoo is very much like Ext JS in its philosophy. In fact, if you consider it’s name — Yahoo User Interface  — you can see what it’s about. So, again, you have a framework that is really geared toward the very narrow focus. The stated goal of YUI 3 is to fix the DOM & Event issues that are associated with multiple browsers, and to make them sensible in general (quote). Ultimately, Yahoo’s implementation is the theoretically the best, because it’s recently built from the ground up, benefiting from the experience and failing of all three. However, at the time of this writing, there’s one major problem with YUI – Yahoo hasn’t ported / created its YUI 2 widget library over to 3, so much of it is either missing or in beta.  This makes YUI at the moment a no-go for large application development, because it’s just not a good idea to throw your hat in with a deprecated language version, and the new version doesn’t provide the vast library of widgets that the competitors provide.

RPC Methods

RPC Methods will be more throughly discussed at a later date.

Widgets
For someone who is trying to get up and running quickly, Ext JS has the most robust widget library. Pretty much what you need to get going if your application fits into the traditional data input/retrieval paradigm.

Dojo Is close, but not nearly as neat, tight or attractive. As far the UI is concerned, the major difference with ExtJS was that ExtJS has an “element” Object. This is very much like jQuery’s $ object. For the UI widget developer, this is a much more intuitive approcach. For the middle-ware and back-end developer, however, this object tends to confound View code with Buisness Logic, so you may find Dojo’s separation preferable if you’re coming from the Java/C# side of things.

YUI3 has few or no widgets as of this writing, but has probably the best event handling of all three, so its’ really hard to judge this one other than to say, we hope to see more here.

Selectors
Selectors will also be compared in a future article, but suffice it to say, we like jQuery, and made our choice independent of this category.

Learning Curve / Barriers to Entry
Dojo had the lowest learning curve of the three for a few of reasons. First, having a base object constructor helps. Second, not focusing explicitly on the widgeting, which is actually an add-on called Dijit makes it familiar to someone that’s worked with the Level 1 libraries. Finally, the documentation leads one quite easily through the steps required to get up and running quickly. One major problem I found, however, was that there were many places where search results pointed to deprecated functionality. This is not so much a problem on Dojo’s end, but still a very real source of frustration. Finally, there was a lot of documentation that was stubbed out, but not completed.

Ext JS suffered from the worst problems as far as barriers to entry go. Its documentation is outdated at version 2, when they are at version 3.1, and will soon be releasing 4. Also, the API documentation itself, which is written in Ext JS is buggy and error-prone. When running it locally in debug mode, i could see the errors.  As a web users, they’re hidden, so it wouldn’t be clear to the casual user why their searches aren’t returning anything in the API docs. I logged one bug in the forums, but have yet to receive a response. Finally, Ext JS seems to eschew the tutorial in favor of the example. This is great for advanced users who are willing to slog through code and work from example, but when considering that I may be bringing in junior developers in with less experience, this becomes another barrier to entry. From an open source project, this is par for the course, but from a commercial product who we were considering paying for, this is inexcusable.

With the commercial backing of Yahoo, I also expected much from YUI, but was left wanting. The documentation itself is well-written and easy to understand where Ext JS’s is scarce and poorly written. The API Docs are just OK. Compare them to something like the Actionscript online reference, and they fall way short of the standard.

Ultimately, the ideal situation as far as documentation goes is to have good API docs, with inline short examples linked to more complex examples and working code that can be inspected as a whole. If you could take YUI’s quality, with Ext’s samples and breadth, and blend them with Dojo’s format, you’d have something pretty good. As it is, they all fall short in one of these areas, but because Dojo provides all three, I was able to cobble together the right answer from all the available info, even if I had to jump around a lot.

Conclusion
For us, the choice was pretty easy. Dojo gives the best of both worlds, providing robust namespacing, class loading and event handling with enough widgets to get going and none-too-shabby language enhancements. While we longed for it to have the tight uniformity of the ExtJS widget system, we felt that the philosophy behind the object and event model behind Dojo was going to be the most familiar to well-heeled object-orineted developers, and the poor documentation just made paying for this framework a no-go. As for YUI, there just wasn’t enough there to really consider beyond what seems like a really great start. I’m sure we’ll be revisiting this decision from time-to-time, and we’ll see how it goes then.


2 Responses to “Choosing an AJAX Framework: Dojo vs. ExtJS vs. YUI”

  1. Lalit says:

    Hi,

    It’s a nice blog and help me in putting my thinking into a direction. I am almost hanging between dojo and yui. Interested to know how was your experience with Dojo? With the current development in yui would you recommend that.

    thanks againa

  2. admin says:

    Yeah, I’ve been meaning to write a new post on what’s happened since then.

    We ended up using less and less Dojo, and now only use it for the namespacing and classloading functionality, which are really great for keeping your code organized in a traditional object-oriented manner. We’re using JQuery for selectors and widgets exclusively. One big shortcoming we found in Dojo was in its core XHR object, which didn’t handle concurrent requests well. It suffered from a classic multithreading problem where it would send out requests, and give them back in a totally random order. We ended up writing our own XHR handler for this reason. Who knows, they may have fixed the bug, but I was never able to confirm my Dojo user account to log the bug/track it, etc.

    Looking at YUI now, it looks like they have gotten themselves a pretty robust widget library ported over, so I’d definitely give it a try, that was my only real complaint at the time. If that’s important to you, I’ll say our experience with the Dojo widgets was that they really were a bit clunky, so if that’s important to you, that’s something to consider. In the end, it’s most important to figure out what kind of work you will be doing, and pick the one that’s right for your work.

    Finally, we’re currently exploring using backbone for its data binding features, which is something we rely heavily on.

Leave a Reply