Over the years, several scripting languages to develop dynamic web pages have appeared but JavaScript has continued to remain a strong contender as a preferred scripting language. As a result of JavaScript’s popularity, developers have created various toolkits and libraries, taking web development to the next level. One really popular JavaScript toolkit is Dojo. Dojo, for those who are not familiar with it, is a JavaScript toolkit that saves time and scales with user development processes. It provides almost everything one needs to build a web application, i.e. language utilities, UI components, and more, all in one place, designed to work together perfectly.
Learning Dojo is really simple and once you understand the pattern behind Dojo’s file structure, it is ossible to master the first step by self-learning. After that, when using Dojo’s built-in widgets, it is important to focus on the patterns and then you can call yourself a Dojo expert!
Given below are a few salient points about Dojo:
Simple Setup
The first step, i.e. setting up Dojo toolkit in a web page is easy and requires basic HTML and JavaScript knowledge. Script tag of HTML allows users to render dojo.js file which is the core file of the toolkit, and comes in a really small size. One point to be remembered is, before rendering dojo.js.file, one needs to over write dojoConfig object with properties.
Here is an example:
<head>
<script>
dojoConfig = { async: true, parseOnLoad: true };
</script>
</head>
<body>
<script src=”<dojoFilePath>/dojo/dojo.js”></script>
</body>
It is recommended to put the dojo.js file at the end of the body tag, as this will help to improve the performance of the web page.
Asynchronously required:
AMD (Asynchronous Module Definition) is a method to write modules to accelerate the performance of web pages. For example, “require” module gives power to other module loads asynchronously.
var dependencies = [“dojo/parser”,”dojo/on”];
require( dependencies, function(parser, on) {
//Write your routines to perform specific job
});
Custom Widgets:
The creation of custom widgets is easy to accomplish, but before embarking on creating a custom widget, it is important to understand two important aspects of Dojo toolkit, i.e. module creation and inheritance.
‘declare’ is the function which is used to create modules and inherit other widget in Dojo toolkit.
declare(‘NameOfTheModule’, [comma separated string as list of widgets to inherit], {
// write your routine here
});
However, for creation of a custom widget, we must inherit a few built-in widgets to the module.
require(["dojo/_base/declare",
“dijit/_WidgetBase”,
“dijit/_TemplatedMixin”,
“dijit/_WidgetsInTemplateMixin”
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {
var moduleName = declare(‘ModuleName’, [_WidgetBase, _TemplatedMixin, WidgetsInTemplateMixin], {
templateString : ‘<div></div>’
});
return moduleName;
});
‘declare’ function has the ability to inherit widgets which can be extended later with your own properties. ‘dijit/_WidgetBase’ provides the life cycle to custom widget. _TemplatedMixin has the functionality to create widget using template and _WidgetsInTemplateMixin provides the feature to include other widgets inside the custom template.
Dom Manipulation:
Dom manipulation is extremely important for any JavaScript toolkit and Dojo offers a perfect fit. Dojo provides various built-in modules to achieve this functionality. For example: dojo/dom, dojo/query, dojo/dom-class.
dojo/dom module is used to retrieve any DOM element by id and provide access to a developer while dojo/query is a CSS selector that fetches all matching patterns as an array. Fetched DOM array using dojo/query can be easily accessed for ensuing iterations.
Manipulating the class of DOM element is another feature which can be found in dojo/dom-class module.
require([“dojo/dom-class”, “dojo/dom”], function(domClass, dom) {
domClass.add(dom.byId(‘nav’), ‘active’);
}
Note: dojo/dom only access HTML DOM elements while dijit/registry can access dojo widgets.
Similarly, there are a lot of features included in Dojo as built-in modules. However, my blog has focused on some of its salient features. For more information, you can visit https://dojotoolkit.org/
