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!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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.