comparisons between ExtJS and jQuery, I thought I would go into a bit more detail with some of the other features that the two frameworks offer.

"> More ColdFusion and ExtJS Core and jQuery comparisons

More ColdFusion and ExtJS Core and jQuery comparisons

Tags: extJS, Coldfusion, Ajax, jQuery

Following on from a previous post I made about the comparisons between ExtJS and jQuery, I thought I would go into a bit more detail with some of the other features that the two frameworks offer.

I have to admit that I am sort of at a loss to explain why so many people are jumping on the jQuery bandwagon, I keep hearing but it is free, or I hear well it is because it has a smaller footprint. The reality is that these are both myths, in fact if you want to be a little more specific ExtJS Core is only marginally bigger, and with that I can safely say that it actually gives more out of the box than jQuery does.

And in my eyes that means that there is more power to you to do what you need.

So with that in mind lets have a look at how some of the features of the two are so similar, that it is hard to decide actually which is the better.

Document ready

Both of these frameworks don't require you to use this feature, but it is perhaps good practice that anything you want to do with either, check to see if the framework has indeed been loaded.

This is done with the following code.

jQuery:
$(document).ready(function() { // do stuff when DOM is ready});
ExtJS
Ext.onReady(function() { // do stuff when DOM is ready});

DOM

Now jQuery has been heralded as being very easy to do DOM manipulation ad this is very true, however it is not the king of the castle because ExtJS is also very good a DOM manipulation as well. The difference between the two are more to how much you want to reuse code and or build upon.

To give you more of an example lets look at getting an element from the DOM, in this example we are getting the div with the class of formerrors.

In jQuery we might do something like this.

var jErrorDiv = jForm.find( "div.formerrors" );

And in ExtJS we might do any of the following.

Ext.get('elementById');
Ext.select('div.formerrors');
Ext.getDom('elementById');

The difference in the code is very subtle until you start looking at what is returned by each, as it can be very important without you realising it. In the case of the jQuery we get a HTML Element that has no more methods to manipulate the DOM, and I might be wrong here but from what I can tell you have to chain more jQuery commands to some simple stuff.

With the examples I gave you above for ExtJS each one also gives you different results, all being able to do different things. The first one which is getting an object based on the ID of an element, this returns an object with many methods and properties that are at your disposal.

The most powerful example I can give you here is the following code.

myDiv = Ext.get('myDivId');
myDiv.load();
or
myDiv = Ext.get('myDivId');
myDiv.update();

The code above pretty much does the same thing, but with more params passed into both methods I can then apply dynamic loading via Ajax to update the content.

Now that doesn't mean jQuery can't do this either, because it sure can.

$('#result').load('ajax/test.html', function() { alert('Load was performed.');});

However the difference that I can tell and I might be wrong on this, but jQuery is limited to the url and some data as well as a callback for complete. ExtJS is different because it reuses the actual Ajax.Request and that means more power back to the user, in terms of being able to send extra headers along with the request, or a success callback and/or failure callback. You can also do a post or a get depending on if you want to do restFul or not, but all in all you can do a lot more with ExtJS in this case. The jQuery Docs don't indicate that this is either changeable, or even anywhere near as flexible either.

Events

Even the way both do events is even similar.

// Binding an event in jQuery
$(".btn").click(function() {
// Do something on button click
});
// Binding an event in Extjs
Ext.select('.btn').on('click', function() {
// Do something on button click
});

Ajax Requests

When it comes to doing Ajax the code is very similar as well.

// Basic request in jQuery
$.ajax({ type: "POST", url: "myurl.php", data: { foo: 'bar' }, success: function(msg){ alert( "Data Saved: " + msg ); } });
// Basic request in Ext
Ext.Ajax.request({ url: 'myurl.php', params: { foo: 'bar' }, success: function(msg){ alert( "Data Saved: " + msg ); }});

Again as with the load/update the Ajax side of things in jQuery appears to be post only and not able to a get, or even be able to send extra header info along with the headers of the request. I could be wrong, but I was not able to find anything on this.

Conclusion

So if you were to chose one of these frameworks, which would you choose. Personally I would be going with ExtJS and I don't make that decision based because I use it more in my day to day life than jQuery. But because I find that having an object to do further manipulation means better reuse of code, it also means that being an Object OOP also applies which means that if you don't like the way the object is being returned and or want to provide more behaviour to it, then you can extend the object.

The real power is when you start extending objects, you end up with a very powerful set of components. From here you can do some very crazy and exciting things, and if you don't like it or need to modify some behaviour in the next project, again extend and change only what you need to do.

I don't see this in jQuery with the ease that I can in ExtJS.


TweetBacks

More ColdFusion and ExtJS Core and jQuery comparisons - http://cfbloggers.org/?c=45046 Oct 12, 2010

Comments (Moderated) | Add Comment

  • Scott Stroz's Gravatar If you want jQuery to return an object that you can further manipulate, you wold not use var jErrorDiv = jForm.find( "div.formerrors");. You would use a jQuery selector - which returns you a jQuery object.

    var jErrorDiv = $("div.formerrors");
    # Posted By Scott Stroz | 10/12/10 6:09 AM
  • Andrew Scott's Gravatar Thanks for that Scott, I will admit I wasn't sure if you could. So it is good to know you can.
    # Posted By Andrew Scott | 10/12/10 6:20 AM
  • andy matthews's Gravatar  Wow. You BARELY did your research about jQuery before writing this. Most of your findings about jQuery are incorrect. Where to start?

    Like Scott said, to get a jQuery element:

    var $myDiv = $('#myDiv');

    This returns an array of jQuery objects, each of which reference an actual DOM element containing the full stack of built-in properties, and methods.

    Your statement about jQuery.load is partially correct. At least you got the code right, but it can be simplified:

    $('#result').load('ajax/test.html'); // uses GET

    By default it uses the GET method, unless you provide params in which case it uses POST. 

    $('#result').load('ajax/test.html', {'var1': 'my variable'}); // uses POST

    <a href="http://api.jquery.com/load/">http://api.jquery.com/load/</a>

    You're completely wrong in your conclusions about jQuery's AJAX though. Ajax() is the lowest method for remote calls and has a plethora of parameters, including the ability to provide ANY standard type of request including GET, POST, HEAD, DELETE, etc.

    Furthermore you can specify header information using the built in beforeSend setting of the AJAX method.

    <a href="http://api.jquery.com/jQuery.ajax/">http://api.jquery.com/jQuery.ajax/</a>

    You apparently like ExtJS and that's fine, but don't write a comparison between the two unless you actually do your homework. It's deceptive and serves no one well, even you.

    Oh, and you might want to consider reformatting your blog post as it has WAY too much space between the paragraphs making it hard to read.
    # Posted By andy matthews | 10/12/10 6:59 AM
  • Andrew Scott's Gravatar Andy, you are right that it returns an array of HTML DOM elements as for their own methods etc., I went looking for that in the documentation and can't find this information.

    When looking at the following code

    myDiv = $('blogEntryId');

    From within firebog all I see is as you described, a DOM Element with no methods. At least with ExtJS I can see what methods are available.

    For example I can see that

    myDiv = Ext.get('blogEntryId');

    has a method where I can get the box of the element

    myDiv.getBox();

    Which returns the x,y, width and height of the element, I can't see this with jQuery at all. So it might have been an assumption becuase a) I did not see it in firebug, and b) I couldn't find the information in the jQuery docs. Which appears to be not well written and totally disorganised, and yes that is an opionion.

    As for the load yeah I missed that, but at least with ExtJS I can do a get with params so one can do restFul calls. So I think ExtJS still wins there.

    As for the header information with Ajax, when I looked at the docs I did not see that so I will stand corrected there.

    The comparison was actually to show how similar they are, you seemed to have forgotten that small bit of information.

    And yes I am aware of the formatting issues, as well other problems with the blog. I am about to release a new version of the Application which has been totally re-written from the ground up in ColdFusion 9 and CF-ORM and ExtJS Core and ColdBox 3.0

    I am hoping to have the final code released this side of Xmas.
    # Posted By Andrew Scott | 10/12/10 7:20 AM
  • Joel Stobart's Gravatar I'm finding your conclusions to be pretty poor also.

    to reference an id $("#the_elements_id").

    if you want the height try $("#the_elements_id").height(), or $("#the_elements_id").innerHeight(), or theres a whole bunch here:

    http://api.jquery.com/category/dimensions/

    You dont seem to mention that Ext costs $1000 a license.

    If you take into account users comments every single thing you can do in Ext you can do easier, and less verbosely in jquery. That's probably why they choose jquery.

    regards,
    Joel
    # Posted By Joel Stobart | 10/12/10 8:31 AM
  • Andrew Scott's Gravatar Joel,

    Let me address the first thing, if I want the box or what is known as the x, y, width and height. In ExtJS I do getBox(), if I want them individually I can do the exact same thing as jQuery. getHeight(), getWidth() etc.

    I picked on getBox() for a very good reason, because jQuery doesn't have the equivelant.

    Now I find your lack of reading and understanding very poor, to coin your phrase. Lets look at something shall we, why do I not mention that ExtJS Core costs anything? Well I actually have said it over a few blog posts now, it is actually free.

    ExtJS Core is 100% free, let me repeat that again.

    ExtJS which is a completely different package, which is also the core and the widgets as a bundle is costly to some degree.

    But the Core package is a separate and freely downloadable, and costs nothing to use in any of your projects.

    Secondly on top of this, if you have purchased ColdFusion 9, ExtJS is free to use in ColdFusion. That means you are free to download any future updates to ExtJS and use them free (as the ColdFusion license covers this) in any of your projects.

    Now you might understand why I don't talk about costs, Adobe have already publicly indicated that.

    And Joel the # is optional in jQuery, I have tried both with and without the # and the exact same info is returned.
    # Posted By Andrew Scott | 10/12/10 8:37 AM
  • Carl Von Stetten's Gravatar Andy,

    The # sign prefix in the jQuery selector has a specific meaning, and results in a different set of DOM elements being selected than if you omit the # sign.  The jQuery selector prefixes work as follows (based on CSS3):

    No Prefix (e.g. $('h1') ) will select all DOM elements of that type (all h1 elements).

    # Prefix (e.g. $('#myDiv') ) will select all DOM elements that have the ID attribute set to 'myDiv'.

    . Prefix (a period; e.g. $('.someClass') ) will select all DOM elements that have a class of 'someClass'.

    So $('myDiv') and $('#myDiv') will result in different sets of DOM elements.
    # Posted By Carl Von Stetten | 10/12/10 11:21 AM
  • Henry's Gravatar pls stop using Ad's that autoplay audio...
    # Posted By Henry | 10/12/10 2:04 PM
  • Andrew Scott's Gravatar Carl, thanks I did work that out a little later and when I wen to edit my comment to remove that remark. My hosting providor had an outage so I was not able to do so.
    # Posted By Andrew Scott | 10/12/10 4:20 PM
  • Andrew Scott's Gravatar Henry, I have no control of what ads get displayed. However I will forward that comment onto the people who serve the ads.
    # Posted By Andrew Scott | 10/12/10 4:20 PM

Comments (Moderated) | Add Comment