I have seen some writing by TexasSwede about how to use jQuery for manipulating the DOM and it seams easy but why import another toolkit for manipulating the DOM? Well perhaps if you know jQuery that might be the case or that you think jQuery is better.
Let’s compare jQuery vs Dojo for some simple DOM changes. I’m using the latest jQuery 1.9 vs Dojo 1.6, why not the latest version well because XPages currently has 1.6 and because 1.8 has a different syntax.
let’s add the class pretty to every a tag in the page
jQuery
$("a").each( function() {
var tag=$(this);
tag.addClass('pretty');
}Dojo
dojo.query("a").forEach(function(node, index, arr){
node.addClass("pretty")
});The code is quite similar in both Dojo and jQuery, I don’t know about speed perhaps some of you readers know?
I’ll move forward in part 2 with some more Dojo stuff, stay tuned.
PS!Don’t forget to change your email signature
You could just do the following in jQuery:
$(‘a’).addClass(‘pretty’)
Well, using Dojo you also can abbreviate that:
dojo.query("a").addClass("pretty")also works.
But shorter isn’t better generally – in C (or C++, Java, JavaScript) you can cram whole loops and complex computations on just one line – which leads to unreadable code. Personally I prefer “girly code”, which takes longer to type (a bit), but helps unterstanding what is going on. Just a matter of taste, I presume.
I think the point of this post is, that you can achieve the same things with the same effort in both frameworks – so there really is no point in installing JQuery on top of XPages with Dojo built-in for just DOM manipulation. And I totally agree with that.
I don’t know about performance differences, but I would bother about that only if necessary (for very complex operations).
Just my 2 cents.
I cringe every time I see someone importing yet another framework when there’s already one available.
I doesn’t just add another HTTP request (at best) it adds parsing time as well as memory consumption (and most likely more battery if you’re on a mobile device).
But, anyway. You could simplify your Dojo statement as well:
dojo.query(“a”).addClass(“pretty”);
I get your point, but I still think it’s unfair to compare an 1.5 year old release with a brand new one… Why not use the equivalent JQuery version of the time?
/J
The syntax for older versions of jQuery that were out when Dojo 1.6 was current would be the same:
$(‘a’).addClass(‘pretty’)
Yes, for now. I was thinking more in the lines of future comparisons, like for performance and/or features.
You are also comparing totally different functions.
JQuery’s .each() method is more like Dojo’s .every() method, where if/when the callback returns false, it breaks the loop. Dojo’s .forEach() does not exhibit this behavior. It’s based after Javascript’s native array.forEach() method.
And another BIG difference:
JQuery’s .each() assumes that “this” in the callback is the node. Dojo’s .forEach() does not when you use the full syntactical declaration like your example.
I agree with Joacim – I cringe when I see somebody importing another framework on top of Dojo. Though I’ll point out that JQuery is not a framework – it’s a JS library.
As far as DOM manipulation jQuery doesn’t do anything dojo can’t.
jQuery has the upper hand though when it comes to the selectors determining what is to be DOM manipulated. jQuery has a number of custom selectors above and beyond Dojo’s CSS3 selectors which are pretty useful 🙂
http://api.jquery.com/category/selectors/
I use a CDN (Content Delivery Network) to access the jQuery library. Sure, I could reference the Doje toolkit on my server, but I think Google/Microsoft might have faster servers than me…
But in both cases I need to include the script location on my page, correct? All my development have been done on classic Domino design elements (pages or forms). AFAIK, I can’t just enable Dojo on those elements, I still need to add the same code as if I used an external host for teh framework, right?
CDNs are generally preferred, generally. It’s not a silver bullet.
Living in Sweden I usually have a better speed not using a CDN, or at least Googles CDN. Also, I’ve had problems with their link simply cease to work (using SSL), for what ever reason.
CDNs aren’t just because of the download speed though, you split your requests over more domains which allows the browser to do more concurrent downloads. Particularly older browsers are bad at this (IE < 9) and using a CDN here will yield more of an performance improvement in this area (since Domino solutions by tradition have a lot of HTTP requests)
But the fastest performance is when you have less to download and here is where you can see awesome performance gains from a CDN. The idea is that a lot of sites use Dojo/jQuery and if they're hosted on the same CDN provider only the first hit is causing a download and the following is read from cache.
You can't just enable Dojo, not by including the links anyway. If you're going to use the widgets (like checkboxes, buttons and so on) you need dojo.js and the theme stylesheet of your chosing. I like Claro best: http://download.dojotoolkit.org/release-1.8.0/dojo-release-1.8.0/dijit/themes/themeTester.html?theme=claro
Then you can use a few lines of JS to find and convert your native elements to dojo widgets quite easily, even without change any of your backend code. Granted, it will be even easier if you do.
It also seems like jQuery have more plugins and also access to more information online, making it easier to get the result you want.
On StackOverflow there are 238,454 questions tagged with jQuery and 4,411 tagged with dojo… There are also 1,187 tagged with dijit, but many (but not all) of those are also tagged as dojo. But let’s say 6,000 questions about dojo… That’s what, 0,2%?
CDNs are handy. Dojo is on the CDNs as well. Keep in mind that you can’t use a CDN if you need HTTPS. Well, I guess you could proxy the content through your server but there’s no point in doing that.
Regarding StackOverflow – there are also 4900+ questions pertaining to Microsoft Access and only 492 for XPages. Does that make Access a superior product?
JQuery is fine for a JS library. There are many plugins as well for that library. If all you need is a JS library it’s fine. But if you need a framework Dojo is vastly superior (hence why IBM chose it.)
I find that many people don’t know the difference between a JS DOM manipulation library (JQuery) and an actual JS framework (Dojo.) If you don’t know you should research the difference. You may not care for a particular project you’re working on, but it’s best to make an informed decision.
In particular it is not that hard to learn Dojo – you mostly have to learn the “best” way to do things, as there are usually many ways to accomplish things. This .forEach() discussion is a perfect example.
But once you learn Dojo, it’s simple to do virtually everything that JQuery can do. But you can ALSO take advantage of all of the great things Dojo does, which JQuery will never do well because it’s a JS library and not a framework.