I have recently been doing quite a bit of development with both ExtJS and jQuery and I thought I would share my experiences with both of them. One thing to keep in mind is that I’m not going to say whether one is really good or bad - they’re both excellent libraries and your choice for any given project might simply come down to personal preference. That said, the rest of this will be my opinion on the two.
First of all, Ext really is just freaking massive. Although jQuery isn’t exactly minuscule it’s still a hell of a lot smaller than Ext. Loading my Ext application, even on a local connection, takes quite a while and freezes the browser while all that code is processed. Admittedly this is more to do with my browser being slow as a dog than with any inherent flaw in Ext. Still, if you want to have a lightweight site Ext is pretty much immediately out of the running.
One thing that I initially loved about Ext, that I am now starting to loath, is that it tries to be too much like Java or some other desktop programming language/library. Basically you can (and probably should) build the entire interface through JavaScript calls rather than use HTML and CSS. The problem with this is that, at the end of the day, it’s not Java and Ext just ends up doing fancy DOM manipulations anyway (for the layouts anyway) so all it’s really doing is obfuscating what’s going on and making sure you are forced to rely on the Ext interfaces rather than DOM manipulation or CSS or the like. Now, 98% of the time this won’t be an issue for you but I’ve run into a few cases where it’s tripped me up because I can’t work out how to get around all the Ext-ness.
In comparison jQuery provides almost nothing but DOM manipulation helpers, which is really useful if you already know what to do but if you want to build a layout like Ext does then you’re going to be messing around with HTML and CSS quite a bit. That said, it really isn’t that difficult to get the basics up and running but emulating something like SplitPane would be painful … unless you find an appropriate plugin. So, for what it does, jQuery is stunningly good. It makes enhancing web sites trivial and removes a lot of the sharp edges from JavaScript without attempting to fundamentally change how you use it.
As an example of how the two differ, here’s some code to run logic when a user clicks on a link and to disable the normal execution of that link.
For Ext:
Ext.select('#links a').on('click', function(event) {
alert("You clicked: " + Ext.get(event.target).dom.innerHTML);
},
this,
{stopEvent: true}
);
For jQuery:
$('#links a').click(function(event) {
alert("You clicked: " + $(this).html());
return false;
});
As you can see, the jQuery code is a bit shorter and easier to understand. To disable the normal browser action of following the link, Ext has a special option on the event handler whereas in jQuery you simply return false from your click function. This might seem counter-intuitive if you don’t know JavaScript so if you don’t, compare the above to how you’d do this without the libraries:
<a href="/foo/bar/"
onclick="alert('You clicked: ' + this.innerHTML); return false;">
Click here
</a>
You can see that returning false is what you normally do anyway so, instead of encapsulating this, jQuery basically just lets you use the normal way of doing things. Ext, on the other hand, makes things more programmatic and Java-esque by having an extra configuration option to the event handler.
I am still developing web applications with both of them so I can tell you that both libraries are suitable for RIA development, it’s mostly just a question of whether you prefer developing apps entirely in JavaScript or using JavaScript for logic and a little layout, as well as whether or not you need all the advanced features Ext comes with. I think that I would normally pick jQuery because I prefer the simplicity of it and like more control when writing an application. Hopefully this little post has given you an idea of what the two libraries are like and encourage you to try them both out. I’d like to hear the experiences of others working with these libraries, as well as others like Prototype and Mootools, which I am also interested in.
Ext does support building this from mark-up. Also, if you prefer to do raw dom manipulation yourself, every Ext component has a "el" property to give raw dom access.
As for your event handler, the proper way to stop the event in Ext would be to use the w3c way (call stopEvent on the event object). As for the innerHTML call, there’s a variety of way you can make it shorter. Just using "this" would be the easiest.
Ext.select(’#links a’).on(’click’, function(event) {
event.stopEvent();
alert("You clicked: " + this.innerHTML);
});
Ext also offer an option in this scenario that no other library offers - automatic event delegation. This way, you can gain better performance, consume less memory and write ajax friendly code.
Ext.get(’links’).on(’click’, function(event, target) {
event.stopEvent();
alert("You clicked: " + target.innerHTML);
},
this, {delegate: ‘a’});
In this scenario, only 1 event handler is attached (to links), Ext will filter the clicks to only "a" elements and adjust the target argument to the link that was clicked.
Thanks for the comment Chris!
Your revised method for adding event handlers is much shorter than my code! I’ve been mostly working from the API documentation so I’ve obviously missed some of the better ways of doing things.
As for the event delegation I’ll have to look into this further - it would be quite useful for dynamically added elements but I’m can’t see why it would consume less memory and run faster. I assume it has something to do with how bubbling works compared to DOM traversal?
> I’m can’t see why it would consume less memory and run faster.
Less memory because less event handlers are attached. Every time an event handler is attached to a node, it is wrapped to provide scoping, options and other features. The more of these you attach, the more memory is being used. With 1 or 2 or 5 it’s not much of a difference, but if used throughout an application it could add up.
As for performance, attaching a single event handler is faster than attaching multiple handlers. Using delegation, routing of events is deferred until the event occurs. Similar to above, in the case of a small number of handlers, it’s not a big deal - as applications get large it can help start up performance.