Wednesday, August 17, 2011

How to create an optimized build for the Dojo Toolkit

Here is the step-by-step procedure I used to create an optimized dojo build.  This creates a dojo build which contain exactly what is needed by my app, no more, no less.    Using an optimized dojo build results in fewer downloads from the server, and less data transferred overall.

This procedure is based upon two reasonably good references:
It took me a while to make it all work because the filesystem locations were not obvious to me. 

Design Pattern

Adopt a design pattern where all your require() statements for dojo code are located in one javascript file.  This allows the dojo build process to create one new javascript file with the same name, to replace your original.  The new file replaces your list of dependents with the actual dojo javascript code.  

Prereqs

Fetch a dojo source build, for example:
Unzip this in a sandbox directory on your machine, for example:
    /home/sag/sandbox/dojo-release-1.6.1-src
where you will find subdirectories dojo, dijit, and dojox.

Coding

Here are two simple files I created, based upon first reference.  First the HTML:

/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>

    <!-- load Dojo -->
    <script src="dojo/dojo.js"></script>

    <script>
        dojo.require("my.app");

        function init() {
            alert("Dojo ready, version:" + dojo.version);
            dojo.byId("greeting").innerHTML += 
                ". Greetings from dojo " + dojo.version;
        }
        dojo.ready(init);
    </script>
</head>
<body>
    <h1 id="greeting">Hello</h1>
</body>
</html>

and then the javascript:

/home/sag/sandbox/dojo-release-1.6.1-src/my/app.js

    dojo.provide("my.app");

    dojo.require("dojox.mobile.parser");
    dojo.require("dojox.mobile");
    dojo.require("dojox.mobile.compat");

You are now set up to do the build for this HTML/javascript.

Build

Go into the util/buildscripts directory.  For example:
    cd /home/sag/sandbox/dojo-release-1.6.1-src/util/buildscripts

Issue the build command.  Specify the path to your HTML file.  For example:
    ./build.sh 
      action=release 
      htmlFiles=/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html
It runs for a minute or so.

Inspect the results.  The important files are a new dojo.js and new app.js
    /home/sag/sandbox/dojo-release-1.6.1-src/release/dojo/dojo/dojo.js
                                                         /my/app.js

Test

Move the three files to the filesystem of your webserver.  For example, for apache:
    /var/www/html/dojo/dojo-opt/buildtest.html
                               /dojo/dojo.js
                               /my/app.js

Browse to the HTML and verify it works.

Verify Improvement

I captured screenshots of the downloads required when fetching the original HTML/javascript with the original dojo build.  It required more than a dozen file downloads.  (click the photo to enlarge)


Fetching the new HTML/javascript with optimized dojo results in three, much smaller downloads.

4 comments:

  1. Hi, it is one week already am desperatly trying to build my one dojo, i have dowloaded sources on dojo's web site of the current lattest version (1.9.0), i included the dojo directory in my html file, declare all the dojo requires, an launch the build command, everything goes well, i copy therefore the dojo, dijit and dojox directory that has been produced and stored in the release directory, when i execute my html file, i see no change, firebug still report me a lot of 'GET' actions between client and server. Please can someone explain to me what to do?

    ReplyDelete
    Replies
    1. HMS, you might want to try asking here: http://dojotoolkit.org/community/ Sorry I am not current.

      Delete
  2. DOJO Toolkit Online Training
    http://www.21cssindia.com/courses/dojo-toolkit-online-training-174.html
    Dojo start
    How do I start learning Dojo?
    Where are the docs?
    How do I get support and training?
    Which Dojo version should I use?
    Why do I need to use a web server?
    How can I avoid common mistakes?
    How do I report issues?
    How do I contribute and get involved?
    Hello Dojo
    21st Century providing Online training and support on All Technologies. If you are seeking training and support you can reach me on 91-9000444287. Online training by real time Experts. Call us 001-309-200-3848 for online training

    ReplyDelete
  3. DOJO Toolkit Online Training - 21st Century Software ...
    http://www.21cssindia.com/courses/dojo-toolkit-online-training-174.html
    DOJO Toolkit Online Training, DOJO Toolkit training, DOJO Toolkit course contents, DOJO Toolkit
    Employees to learn at their own pace and maintain control of learning “where, when and how” with boundless access 24/7by 21st Century Software Solutions. contact@21cssindia.com ---- Call Us +917386622889

    ReplyDelete