Treehouse

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

By on  

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!

ydkjs-5.png

Recent Features

  • LightFace:  Facebook Lightbox for&nbsp;MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • Animated 3D Flipping Menu with&nbsp;CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

Discussion

  1. 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.

  2. 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.

  3. Wonderful article! I’ve been using jQuery since years and it definitely rocks!! But I too believe It’s just JavaScript!

    Thanks for sharing!

  4. jQuery 1.4 added a way to create elements similar to MooTools and Dojo http://api.jquery.com/jQuery/#jQuery2

  5. Paul de Vries

    Why did you not you use $(‘element’) to get the ID with mootools? Much shorter!

  6. 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.

  7. @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

  8. @Deluxe Blog Tips: What Pete Higgins said.

  9. Arian

    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.

  10. @Arian: I wanted to keep it basic. Your requests could fill a book. :)

  11. Arian

    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!

  12. @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.”

  13. 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.

  14. Nicely summarized: don’t rewrite stuff using another library just because you aren’t familiar with its syntax.

    Is that it?

  15. Nice comparison thanks, good to see using Jquery means less hand cramp ;)

  16. @Alex Crooks: Well, it can be more brain cramp too…

  17. CTuLT

    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?

  18. 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.

  19. David,

    Can you please update this post for Dojo 1.7 and email me please.

  20. Vote539

    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.

  21. [...] Common Tasks Using MooTools, jQuery, and Dojo http://davidwalsh.name/mootools-jquery-dojo – while not exclusively a Dojo tutorial, David Walsh covers how to do a few thing with each of [...]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!