Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
I've been dabbling with Dojo quite a bit lately. I feel great about my MooTools and jQuery skills but I'm a bit still raw when it comes to Dojo. What's important that I keep in mind, however, is that the tasks I'm trying to accomplish are the same -- the syntax is simply different. Here are a few basic JavaScript tasks and the syntax to accomplish them within each awesome framework.
Execute Code when the DOM is Ready
Dojo Toolkit
dojo.ready(function() {
//do stuff
});
jQuery
jQuery(document).ready(function() {
//do stuff
});
MooTools
window.addEvent('domready',function() {
//do stuff
});
Collect Elements
Dojo Toolkit
var myElement = dojo.byId('myElement');
var divs = dojo.query('div');
jQuery
var myElement = jQuery('#myElement');
var divs = jQuery('div');
MooTools
var myElement = document.id('myElement');
var divs = $$('div');
Create Event Listeners
Dojo Toolkit
dojo.connect(dojo.byId('myElement'),'onclick',function() {
alert('You clicked me!');
});
jQuery
jQuery('#myElement').click(function() {
alert('You clicked me!');
});
MooTools
document.id('myElement').addEvent('click',function() {
alert('You clicked me!');
});
Create a New Element, Inject Into Document.Body
Dojo Toolkit
dojo.create('div',{
innerHTML: 'This is a new element',
id: 'myElement'
},dojo.body());
jQuery
jQuery('<div id="myElement">This is a new element</div>').appendTo('body');
MooTools
new Element('div',{
id: 'myElement',
text: 'This is a new element'
}).inject(document.body);
Execute AJAX Requests
Dojo Toolkit
dojo.xhrPost({
url: 'save.php',
content: {
id: dojo.byId('user-id').value
}
load: function(response) {
alert('Received the following response: ' + response);
}
});
jQuery
jQuery.ajax({
url: 'save.php',
type: 'post',
data: {
id: jQuery('#user-id').val()
},
success: function(response) {
alert('Received the following response: ' + response);
}
});
MooTools
new Request({
url: 'save.php',
method: 'post',
data: {
id: document.id('user-id').value
},
onSuccess: function(response) {
alert('Received the following response: ' + response);
}
}).send();
Animate the Opacity of an Element
Dojo Toolkit
dojo.anim('myElement',{ opacity: 0.7 }, 250);
jQuery
jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl
MooTools
document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);
See? Dojo, jQuery, and MooTools aren't that different. Same problems, different solution syntax. Like Pete Higgins says: It's just JavaScript!
In most of examples above, I love the way Dojo and Mootools create DOM element and inject to other element. Everything else, I like the way jQuery acts.
But, of course, these are just some simple and common examples, and it’s hard to say which is better. I just realize the different coding styles between them.
Thank you for sharing.
Hi David,
recently I found a javascript framework matrix from Matthias Schütz: http://matthiasschuetz.com/javascript-framework-matrix/en/
It’s a comparison between jQuery, mootools, dojo, prototype, script.aculo.us, extjs, adobe spry, bcc glow and yui.
Wonderful article! I’ve been using jQuery since years and it definitely rocks!! But I too believe It’s just JavaScript!
Thanks for sharing!
jQuery 1.4 added a way to create elements similar to MooTools and Dojo http://api.jquery.com/jQuery/#jQuery2
Why did you not you use $(‘element’) to get the ID with mootools? Much shorter!
This sums up why I chose jQuery. Simpler, shorter syntax (and more plugins and bigger dev community..)
Not to diss Mootools (began with Moo just for the name ;) ) or other JS-frameworks, all have their strengths I guess.
@Deluxe Blog Tips:
The Dojo versions of some of the above could be much more concise. Eg:
connect()example could be done as:dojo.query("#someId").onclick(function(){ alert("Yep."); });or the placement of DOM:
dojo.query("body").addContent("Yep.");or animation:
dojo.query("#someNode").anim({ opacity: 0.75 });Moo also has NodeList-like chaining methods, though there is a LOT more to JavaScript than traversing the DOM
@Deluxe Blog Tips: What Pete Higgins said.
I agree with @phiggins last sentence.
When people compare js frameworks, they always compare how to modify DOM/Ajax and Animation. But there is much more, mootools has Class, how do Dojo and jQuery do such things. I know jQuery has some jQuery.fn.plugin thing for creating your own plugin, but how does Dojo do that.
And what about things you could do with Arrays/Strings and other native types. What are the differences between the frameworks when working with that.
Long story short: I would like to see some other comparisons than just the DOM, because we’ve seen that already.
@Arian: I wanted to keep it basic. Your requests could fill a book. :)
That might be true, though it would be interesting to see some other basic things other than the DOM ;) Maybe more key differences. Now it may look that they are all the same, just another syntax. Anyway, keep up the good work!
@Arian, it would be pointless comparing jQuery to Dojo/Mootools in non-DOM situations because jQuery IS a DOM library… that’s what it does. It doesn’t “add anything to the language.”
Thanks David.
In solving many(but not all) cases JQuery has a shorter and simpler approach than any other library,Mootools is the second choice for me in the exceptions.I love both of them.
Nicely summarized: don’t rewrite stuff using another library just because you aren’t familiar with its syntax.
Is that it?
Nice comparison thanks, good to see using Jquery means less hand cramp ;)
@Alex Crooks: Well, it can be more brain cramp too…
I would like to use all these libraries on a site, but my clients say “This is too slow” or one I really hate, “Why are we hiring a web developer, wouldn’t it be faster, easier and cheaper to do in FRONTPAGE?” All because I use jQuery, Mootools, and Dojo?
while i’m originally a jquery nut (and thought ppl who use mootools were nuts), i can’t get over how useful mt’s class implementation is, esp with ajax.
this.myRequest = new Request({…});
// then later in code
this.myRequest.send(data);
perfect.. as far as i can tell, in dojo & jquery it sends the request as you create it, with mt you can set them up and manipulate them later. very helpful imo, esp with ajax apps.
David,
Can you please update this post for Dojo 1.7 and email me please.
Thanks for this simple and well-presented comparison!
I would also appreciate an updated comparison with Dojo 1.7+, since the syntax for performing common operations changed significantly between 1.6 and 1.7. I haven’t found very many examples of the new Dojo syntax outside of the documentation.