DOJO – Build And Optimize Your DOJO Project

If you are a Java developer, you must be very familiar with the build scripts and have good understanding on the various build tools like ant, maven, etc. We know that the main purpose of the build is too compile (Read : Java Compiler API) the source code to the executable form and then make the distributable archive file. In Java, source files are compiled to byte codes using the compiler and executed in the Java Runtime Environment (JRE).

Why DOJO Build: OK, then why we we need build tool for JavaScript framework?. Is it compiled?. This would be the first question asked by any Java developer who want to start learning the DOJO / JavaScript build. Let me first clear this basic question before start explaining the build process.

DOJO ToolKit

Server Loading Time: Whenever you have to send a code to the client machines through the network, it takes the bandwidth. If the web page is more complicated with more number of JS, CSS and Images, then it has to be downloaded to the browser which is going to make the user wait till the page is loaded. Also browser can not download all the resources simultaneously. It has the limitation of maximum 4 files can be downloaded simultaneously. It means that browser has to make the repeated HTTP requests to server for
downloading the resources.

Optimise CSS, JS, Images: For the above reasons, it is good idea if we optimise the resources used in our web application. Take an example, we have 10 CSS files for the development, if that can be merged into one file at the time of moving the code to production, that saves 9 extra HTTP requests to the server. It is only one way, there are many other aspects like inline, minification, etc. are part of compressing the resources. Note that, optimization will be done only after completing the development and moving the code to production. DOJO build does exactly same thing, it reads the DOJO library and project specific script files, then optimize it by implementing the concept of minification. This is very important for any DOJO project. Without the build process, performance of the application
will be impacted.

This post explores the DOJO build process with very simple example which would be easy for any beginner to understand without much difficulty. If you have any issues on running the DOJO build, please write it in the comments section with code samples. I will try my best to help you solving the problems.

Create DOJO Project Structure

What is Package?: As a first step, create DOJO project as mentioned in this article. It is always good idea to follow the best practice for creating the project structure. The structure consists of packages and modules. Package is a list of modules. We can say that it is a logical grouping of files. Dijit, dojo and dojox packages are separate packages grouped based on their functionality. When you write your own application, you would create your own package to add your files.

What is Module?: Module is a file and it defines a functionality. The keyword define is used for creating the modules. dojo/_base/declare is an example for a module. This file is part of dojo package.

Create Package Descriptor

The package descriptor file (package.json) gives you information about the current package name, such as the name of the package, information about its dependencies, links to licensing and bug tracking information, etc. This file has to be created for every package and copied to the root of the package.This file has the several attributes, but for the dojo build system, dojoBuild is the important and must have property in all the package descriptors. This property informs the dojo build about the location of profile file. Profile file is explained in the next section. A simple package file looks like:


{
 "name": "app",
 "description": "DOJOAPP",
 "version": 1.0,
 "dojoBuild": "dojoapp.profile.js"
 }

The last property tells the profile file name. Rest of the properties are only optional.

Create Profile File

This is most important file for helping the dojo build system to inform about how it should process the packages. The packages mentioned in this file only will be taken for the build. In our example, util folder under dojo is not required for the application, we can omit that in the profile file. Profile file is created for the each packages and placed on root folder. Most of the applications would have entire application in single package as root, in that case create one profile for root package.

var profile = {
basePath: "./",
releaseDir: "../release_js",
hasReport: true,
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "warn",
selectorEngine: "lite",

packages:[
{
name: "dojo",
location: "dojo"
},
{
name: "dojox",
location: "dojox"
},
{
name: "dijit",
location: "dijit"
}
]
};

releaseDir indicate that the resulted output will be copied to the folder name releaseDir.

Create Ant Script To Run DOJO Build

There are two ways to run the build.

  1. Directly running the build.bat file under dojo’s buildscripts path (DOJO_BASE/util/buildscripts).
  2. Invoke the build through ant script.

We are going to run this example using the second approach. Most of the Java projects would use this option since the build can be integrated to their existing build process itself.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project basedir="." default="build-dojo" name="DOJOBuild">
<property name="WebContent" value="${basedir}/WebContent" />
<target name="build-dojo" >
<java fork="true" dir="${WebContent}/src/util/buildscripts"
classname="org.mozilla.javascript.tools.shell.Main" maxmemory="1024m" >
<classpath>
<pathelement location="${WebContent}/src/util/shrinksafe/shrinksafe.jar" />
<pathelement location="${WebContent}/src/util/shrinksafe/js.jar" />
<pathelement location="${WebContent}/src/util/closureCompiler/compiler.jar" />
</classpath>
<arg value="../../dojo/dojo.js" />
<arg value="baseUrl=../../dojo" />
<arg value="load=build" />
<arg value="profileFile=../../dojo.profile.js" />
<arg value="action=release" />
<arg value="loader=xdomain" />
</java>
</target>
</project>
  • shrinksafe.jar, js.jar and compiler.jar files are added to the classpath for running the DOJO build. These files are come with the dojo library under util package. If you download normal source for the development, then util will not be packaged by default. You have to download the full dojo sdk to get these jar files. Other options in the above script is self explanatory and need not have more explanations.
  • java fork is used for executing any external command from the ant script.
  • org.mozilla.javascript.tools.shell.Main is the main class which is invoked from the build libraries.
  • profileFile attribute is the most important as without profile file, build can not take the source files.

Run The DOJO Build

It is simple as running the normal ant script. If you are working on eclipse, right click and select the “Run As Ant”. If the build is
completed, release_js folder would have created with all the files. Compare the files with the original files, you will notice the difference.

Recommended Books:

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*