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!

Track.js Error Reporting

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

Incredible Demos

  • Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

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

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...