Why I like jQuery (over Dojo)

With the caveat that I’m not an expert with Dojo/Dojox/Dijit, I’m currently switching a site off of Dojo onto jQuery. I’ve used jQuery on a few other sites, but typically just simple effects type stuff. This site has a lot of AJAX driven stuff going on: AJAX catalog navigation where we replace about 12 elements on the page with AJAX loads of other URLs serving back fragments, dynamic tabs which hide themselves if the AJAX source URL returns certain stuff instead of other stuff, etc… I’ve been writing lots of this JavaScript based on the Dojo framework, as that’s what was handed to me, so I’ve done a lot of on the job Dojo learning. I was able to get things to work, so that was good. However, now that we’re transitioning off of Dojo and onto jQuery, I’m amazed at how much easier the jQuery framework makes things. Aside from being smaller, simpler, and easier to understand (for me at least) I’m able to do the things I want to do, much more easily.

*note: some of the examples might be bad Dojo coding (some mine, some inherited) or might be due to me missing the “best” way to do something, however with both Dojo and jQuery I’m mostly using their documentation and/or Googling for how to do something, so any failings in the Dojo implementation are related to the quality and clarity of the documentation and available related pages.*

For instance, the Dojo code that was handed off to AJAX load a page into a div looks like this:

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
dojo.xhrGet( {
// The following URL must match that used to test the server.
url : url2,
handleAs : “text”,
timeout : 5000, // Time in milliseconds

// The LOAD function will be called on a successful response.
load : function(response, ioArgs) {
dojo.byId(“brandsDiv”).innerHTML = response;
return response;
},

// The ERROR function will be called in an error case.
error : function(response, ioArgs) {
console.error(“HTTP status code: “, ioArgs.xhr.status);
return response;
}
});
[/javascript]

That times 12 for the 12 divs we’re updating via AJAX. With jQuery I’m replacing that block with:

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
$(“#brandsDiv”).load(url2);
[/javascript]

Simpler, no?

Also, with Dijit tabs, there’s no easy way to hide a tab and resurrect it later. You have to save off the panel into a JavaScript variable, and reinstate it from that variable later. See how I handled hiding Dijit Tabs/ContentPanes in a TabContainer.

With jQuery Tabs I just use the built-in disable and enable methods along with one line of CSS to solve the same problem. Much easier.

I’m also loving the looks of the new jQuery Tools library from the FlowPlayer folks. Hopefully I’ll be using that library soon on a few projects.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Posted

in

by

Comments

6 responses to “Why I like jQuery (over Dojo)”

  1. Charles Z Avatar
    Charles Z

    It all depends on if you want to have any control of loading dom or not (a good programming practice is to have error handling when something goes wrong). You don’t have to copy the who 12 lines of to make the call. You could use a wrapper function for those 12 lines of loading pages by using the following code:

    my.loadPage(domName, url2) {
    dojo.xhrGet( {
    // The following URL must match that used to test the server.
    url : url2,
    handleAs : “text”,
    timeout : 5000, // Time in milliseconds

    // The LOAD function will be called on a successful response.
    load : function(response, ioArgs) {
    dojo.byId(domName).innerHTML = response;
    return response;
    },

    // The ERROR function will be called in an error case.
    error : function(response, ioArgs) {
    console.error(“HTTP status code: “, ioArgs.xhr.status);
    return response;
    }
    });
    }

    then just use call
    my.loadPage(“#brandDiv”, url2)

  2. Dwight Vietzke Avatar

    Hi all,

    While I don’t begrudge the author here for wanting to find a ‘simple’ solution to his AJAX calling problem, it might be worth mentioning that things rarely stay simple and that more control over the process is usually need at some point in the future. The Dojo example is more ‘complicated’, but offers much more control and script interface transparency. For many of us, this easily outweighs the need for simplicity. And the comment and example by ‘Charles Z’ is right on.

    I’m not familiar with all of jQuery’s functions, but I imagine that similar AJAX control and program interface options are available too. The simple call shown above just uses default values which could be modified otherwise (I suspect). If not, the above would be useless to me for serious web programming (which I doubt is the case since jQuery is held in such high regard). Anyway, the point is that jQuery is very useful and so is the Dojo Toolkit. The above example doesn’t present a strong argument either way. Just use what you prefer or what works best for your current project. I happen to use Dojo more, but jQuery is just as good an alternative for many (most?) cases.

    1. Devon Avatar

      Fair enough. Dojo may work well for some people. Personally I prefer jQuery. Use what you want.

  3. Lian Lee Avatar
    Lian Lee

    Well, DOJO does give you simpler way to do things:

    older version of DOJO:
    dijit.byId(“brandsDiv”).setHref(url2);

    new version of DOJO:
    dijit.byId(“brandsDiv”).attr(‘href’, url2);

    DOJO gives you full stack and control and all hosted in one standard place. It is a painful experience to look for right plugins, and you’re on your own to make sure a plugin is well written, code to standards, tested, scalable and maintainable.

  4. Josh Misumi Avatar
    Josh Misumi

    Couldn’t agree more with this, extremely interesting article. Thanks A Lot.

  5. Ben Carlson Avatar

    Hey Devon,

    Just an FYI, I wrote up a how-to document on switching the ATG Commerce Reference Store (CRS) to use dojo from Google’s CDN. We’ve used on a couple of high profile client sites successfully in recent months. Here’s a link: https://community.atg.com/docs/DOC-1969

    -Ben

    P.S. For the record, dojo is complicated and confusing to me, whereas jQuery _just makes sense_.

Leave a Reply

Your email address will not be published. Required fields are marked *

PHP Code Snippets Powered By : XYZScripts.com