O'Reilly

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

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.

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

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...