Codecaine.co.za / The future of AJAX in the Zend Framework

May 27, 2008 8:59:34 PM

If you haven't yet heard, Zend Framework has officially announced its partnership with the Javascript framework Dojo. As Matthew made clear in his post, the bundling of Dojo into the framework would not break its use-at-will principle, but the integration would provide an out-of-the-box Ajax solution.

Though I'd come across Dojo before, I'd never taken the plunge into playing around with it because I believed its example code snippets and scant documentation paled in comparison to other frameworks like JQuery and ExtJS. Its future inclusion into ZF, though, prompted me to take a deeper look. I'll share with you in this post my first experiences with the Dojo framework.

Download and installation

The Dojo download package is roughly 4MB, and includes the Dojo core, Dijit and DojoX, the latter packages being sets of JS widgets based on the Dojo core. The core package is about 75KB minified, but as the framework's website states this works out to about a 23KB footprint when gzip compression is used.

Installation is simple enough as well, comparable to JQuery. A vanilla installation simply requires:

<script type="text/javascript" src="/js/dojo/dojo.js" />

Once the core is loaded, you're up and ready to go.

Hello world!

I think that JQuery users will find the transition to Dojo very natural. The core package offers the dojo.query() function which is equivalent to JQuery's $ DOM selector. In fact, you could declare

$ = dojo.query;

and you'd be able to call $('#dom-id') as easily as you would in JQuery.

Events are handled similarly as well, and you can use Dojo's dojo.addOnLoad() function to run code once the DOM is finished loading:

dojo.addOnLoad( function () {
	alert('hello world!');
});

AJAX and asynchronous calls

Dojo offers two functions for making standard XHR GET and POST requests. These functions take two parameters that differentiate them from JQuery: handleAs and form.

// GET

dojo.xhrGet({
	url: '/get.php',
	handleAs: 'json', // format in which the data will be returned
	handle: function (data, args) {
		// callback
	}
});

// POST

dojo.xhrPost({
	url: '/post.php',
	form: 'form-dom-id', // values in this form will be submitted in the POST request
	handleAs: 'xml',
	handle: function (data, args) {
		// callback
	}
});

Events and animation

Once more, event handling is handled similarly in terms of API by both Dojo and JQuery. Dojo offers a very useful bonus, which is arbitrary function observing. As an example, consider the following:

var foo = {
	a: function () {
		alert('hello');
	},
	b: function () {
		alert('world');
	}
}
dojo.connect(foo, 'a', foo, 'b');
foo.a();

Calling a() will trigger b() to be called. You can see more examples here.

The dojo.fx library offers some basic effects, though the syntax is slightly different to JQuery. In JQuery you can chain effects as follows:

obj.fadeIn('slow').slideUp('fast').fadeOut('slow');

Chaining works a little differently in Dojo:

dojo.fx.chain([
	dojo.fadeIn({node: obj}),
	dojo.wipeIn({node: obj}),
	dojo.fadeOut({node: obj})
]).play();

Integration with ZF

I don't want to say too much about the specifics of how Dojo and ZF will integrate. This is primarily because I don't know, but also because it may change between now and when the ZF is first released with Dojo. In the meantime, you can view Matthew's slides which were presented today. They show some ZF/Dojo use cases. You can also scrutinize the Dojo view helper class proposal.