Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Dojo primer

DZone's Guide to

A Dojo primer

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

I discovered the Dojo Toolkit because it was bundled and integrated by default with Zend Framework - because of its compatible goals and license. However, it is a great JavaScript framework and I want to simplify the life of the web developers who will start using it.

Dojo Campus

The very point of using Dojo is the things it allow you to do in your web applications without writing JavaScript code from scratch. Dojo is usually more difficult to use than other libraries, but also more powerful as it provides out-of-the-box a quantity of widgets never seen before.

DojoCampus is the main source for up-to-date documentation and working examples of this library. You should definitely refer to it when introducing new Dojo components in your applications. The official site has a reference manual and the generated Api documentation - but it is usually not enough to manage the versatility of the various widgets.

The structure

Dojo is divided in namespaces, to deal with all the different components it features. These namespaces have cryptic names, but every object (and function) provided by this library is kept in the global objects dojo, dijit or dojox.

Dojo is the main namespace, which comprehends the dojo.js basic file, and other standard functionalities like DOM querying and manipulation, AJAX support, and event handling built over the browser's native mechanism. The standard components consist in I/O classes and animations.

Dijit is the Ui library of Dojo. It contains form controls like validated text box for dates or numbers, or expanding textareas, or buttons. But also layout containers and panes for easy tabbing in the browser, or build accordion containers to save space.

DojoX is the namespace for extensions of any type. It is both an incubator for code that may be moved into the other components, and a repository for subprojects at various level of maturity.

In DojoX you will find JavaScript tools to:

  • play videos and songs (dojox.av)
  • charting (dojox.charting)
  • handle any data source and provide it as feed for Dojo widgets (dojox.data). dojox.data is enormous, and besides adapters for your web service endpoints, it provides adapters also for public web services like Google and Amazon ones.
  • build WYSIWYG customized editors (dojox.editor)
  • add form widgets such as raters and file uploaders (dojox.form)
  • add animations (dojo.fx)
  • build grids to display, sort and filter data at the same time (dojox.grid)
  • manage html and images functionalities (dojox.html and dojox.image)
  • introduce more layout widgets like draggable content panes (dojox.layout)
  • communicate easily with back end servers (dojox.rpc)
  • validate data (dojox.validate), and more.

Selling points of Dojo

If you have explored the documentation a little, you will have noticed that ease of use or simple syntax is not a great point of Dojo and its widgets. But there are different advantages in using it.

Mainly, every component is on AOL/Google 's CDN, so you'll never strictly need to upload anything to your web server. Every time you need a new component, just add a:

dojo.require(...);

in your scripts. You won't need additional <script> tags, nor dependencies issues: the Dojo module system automatically resolves these dependencies by analyzing metadata provided by the different widgets.

JQuery, the main comparison JavaScript library, is very easy to use; maybe too easy since it's almost declarative in its syntax. Dojo instead is somewhat more difficult to understand, but very versatile and powerful. Instead of hunting the web for plugins to download and then re-upload, with Dojo you usually look for the correct dojo.require() call to add. And the tools available on the CDN are really so many you are very likely to find what you're looking for.

Even when you do not find the component you want, you can always build your own, mainly by extending Dojo or Dijit classes. By adding some simple dojo.require() and dojo.provide() calls to your JS files and respecting the Dojo folder structure, you can easily hook them in the module system.

Dojo data API

The consistency of Dojo (and also of Dijit and DojoX) components is impressive: I'll take as an example the dojo.data API. It consists in a level of abstraction over the various data source you can use in web applications - remote services, but also local JavaScript objects or .js files.

Some time ago in a managerial application, a select that contained Italian cities was hanging during its loading phase - it had about 8000 elements. It was already using a FilteringSelect, a classic widget where you can filter options by typing part of their labels. The issue was all the data were transmitted during the loading page: the overall size of the page was on the order of a megabyte.

I promptly changed the configuration of the FilteringSelect to use a REST-like API made up on the moment instead of a local data store. Basically, the widget now queries the web service when the user stops typing to find the subset of option that match the current content of the select widget, and loads in under a second.

My conclusions

The guys at SitePen are really hardcore JavaScript programmers, and they know how to build a large, reliable framework on a unstable foundation like the different DOM support across browsers. Some gems like the dojo.data API and the module system have already taken web applications to the next level - a real, responsive rich client implementation. It's for this kind of projects that I found Dojo superior to easier to use libraries like JQuery.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}