Adventures with ExtJS and jQuery

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:

<pre> Ext.select('#links a').on('click', function(event) { alert("You clicked: " + Ext.get(event.target).dom.innerHTML); }, this, {stopEvent: true} ); </pre> <p>

For jQuery:

<pre> $('#links a').click(function(event) { alert("You clicked: " + $(this).html()); return false; }); </pre> <p>

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:

<pre> <a href="/foo/bar/" onclick="alert('You clicked: ' + this.innerHTML); return false;"> Click here </a> </pre> <p>

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.