Zend_Dojo build layer support

Zend_Dojo

Introduction

Dojo build layers provide a clean path from development to production when using Dojo for your UI layer. In development, you can have load-on-demand, rapid application prototyping; a build layer takes all Dojo dependencies and compiles them to a single file, optionally stripping whitespace and comments, and performing code heuristics to allow further minification of variable names. Additionally, it can do CSS minification.

In order to create a build layer, you would traditionally create a JavaScript file that has dojo.require statements for each dependency, and optionally some additional code that might run when the script is loaded. As an example:

dojo.provide("custom.main");

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");

This script is generally referred to as a "layer" script.

Then, in your application's layout, you'd instruct Dojo to load this module:

<html>
<head>
    <script type="text/javascript" src="/js/dojo/dojo.js"></script>
    <script type="text/javascript">
        dojo.registerModulePath("custom", "../custom/");
        dojo.require("custom.main");
    </script>

If you use Zend_Dojo to do this, you'd do the following:

$view->dojo()->registerModulePath('custom', '../custom/')
             ->requireModule('custom.main');

But since Zend_Dojo aggregates your various dojo.require statements, how do you create your layer script? You could open each page and view the generated dojo.require statements, and cut and paste them into a layer script file manually.

However, a better solution exists: since Zend_Dojo aggregates this information already, you can simply pull that information and build your layer file. This is the purpose of Zend_Dojo_BuildLayer.

Generating Custom Module Layers with Zend_Dojo_BuildLayer

At its simplest, you simply instantiate Zend_Dojo_BuildLayer, feed it the view object and the name of your custom module layer, and have it generate the content of the layer file; it is up to you to then write it to disk.

As an example, let's say you wanted to create the module layer "custom.main". Assuming you follow the recommended project directory structure, and that you are storing your JavaScript files under public/js/, you could do the following:

$build = new Zend_Dojo_BuildLayer(array(
    'view'      => $view,
    'layerName' => 'custom.main',
));

$layerContents = $build->generateLayerScript();
$filename      = APPLICATION_PATH . '/../public/js/custom/main.js';
if (!file_exists(dirname($filename))) {
    mkdir(dirname($filename));
}
file_put_contents($filename, $layerContents);

When should you do the above? For it to work correctly, you need to do it after all view scripts and the layout have been rendered, to ensure that the dojo() helper is fully populated. One easy way to do so is using a front controller plugin, with a dispatchLoopShutdown() hook:

class App_Plugin_DojoLayer extends Zend_Controller_Plugin_Abstract
{
    public $layerScript = APPLICATION_PATH . '/../public/js/custom/main.js';
    protected $_build;

    public function dispatchLoopShutdown()
    {
        if (!file_exists($this->layerScript)) {
            $this->generateDojoLayer();
        }
    }

    public function getBuild()
    {
        $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper(
            'ViewRenderer'
        );
        $viewRenderer->initView();
        if (null === $this->_build) {
            $this->_build = new Zend_Dojo_BuildLayer(array(
                'view'      => $viewRenderer->view,
                'layerName' => 'custom.main',
            ));
        }
        return $this->_build;
    }

    public function generateDojoLayer()
    {
        $build = $this->getBuild();
        $layerContents = $build->generateLayerScript();
        if (!file_exists(dirname($this->layerScript))) {
            mkdir(dirname($this->layerScript));
        }
        file_put_contents($this->layerScript, $layerContents);
    }
}

Do not generate the layer on every page

It's tempting to generate the layer script on each and every page. However, this is resource intensive, as it must write to the disk on each page. Additionally, since the mtime of the file will keep changing, you will get no benefits of client-side caching. Write the file once.

BuildLayer options

The above functionality will suffice for most situations. For those needing more customization, a variety of options may be invoked.

Setting the view object

While the view object may be passed during instantiation, you may also pass it in to an instance via the setView() method:

$build->setView($view);

Setting the layer name

While the layer name may be passed during instantiation, you may also pass it in to an instance via the setLayerName() method:

$build->setLayerName("custom.main");

Including onLoad events in the generated layer

dojo.addOnLoad is a useful utility for specifying actions that should trigger when the DOM has finished loading. The dojo() view helper can create these statements via its addOnLoad() and onLoadCapture() methods. In some cases, it makes sense to push these into your layer file instead of rendering them via your view scripts.

By default, these are not rendered; to enable them, pass the consumeOnLoad configuration key during instantiation:

$build = new Zend_Dojo_BuildLayer(array(
    'view'          => $view,
    'layerName'     => 'custom.main',
    'consumeOnLoad' => true,
));

Alternately, you can use the setConsumeOnLoad() method after instantiation:

$build->setConsumeOnLoad(true);

Including captured JavaScript in the generated layer

The dojo() view helper includes methods for capturing arbitrary JavaScript to include in the <script> tag containing the various dojo.require and dojo.addOnLoad statements. This can be useful when creating default data stores or globally scoped objects used throughout your application.

By default, these are not rendered; to enable them, pass the consumeJavascript configuration key during instantiation:

$build = new Zend_Dojo_BuildLayer(array(
    'view'              => $view,
    'layerName'         => 'custom.main',
    'consumeJavascript' => true,
));

Alternately, you can use the setConsumeJavascript() method after instantiation:

$build->setConsumeJavascript(true);

Generating Build Profiles with Zend_Dojo_BuildLayer

One of the chief benefits of a Dojo module layer is that it facilitates the creation of a custom build. Zend_Dojo_BuildLayer has functionality for generate build profiles.

The simplest use case is to utilize the generateBuildProfile() method and send the output to a file:

$build = new Zend_Dojo_BuildLayer(array(
    'view'      => $view,
    'layerName' => 'custom.main',
));

$profile   = $build->generateBuildProfile();
$filename  = APPLICATION_PATH . '/../misc/scripts/custom.profile.js';
file_put_contents($filename, $profile);

Just like generating layers, you may want to automate this via a dispatchLoopShutdown() plugin hook; you could even simply modify the one shown for generating layers to read as follows:

class App_Plugin_DojoLayer extends Zend_Controller_Plugin_Abstract
{
    public $layerScript  = APPLICATION_PATH
                         . '/../public/js/custom/main.js';
    public $buildProfile = APPLICATION_PATH
                         . '/../misc/scripts/custom.profile.js';
    protected $_build;

    public function dispatchLoopShutdown()
    {
        if (!file_exists($this->layerScript)) {
            $this->generateDojoLayer();
        }
        if (!file_exists($this->buildProfile)) {
            $this->generateBuildProfile();
        }
    }

    public function generateDojoLayer() { /* ... */ }

    public function generateBuildProfile()
    {
        $profile = $this->getBuild()->generateBuildProfile();
        file_put_contents($this->buildProfile, $profile);
    }

}

As noted, with module layers, you should only create the file once.

Build Profile options

The above functionality will suffice for most situations. The only way to customize build profile generation is to provide additional build profile options to utilize.

As an example, you may want to specify what type of optimizations should be performed, whether or not to optimize CSS files in the layer, whether or not to copy tests into the build, etc. For a listing of available options, you should read the Dojo Build documentation and accompanying documentation.

Setting these options is trivial: use the addProfileOption(), addProfileOptions(), or setProfileOptions() methods. The first method adds a single key and value option pair, the second will add several, and the third will overwrite any options with the list of key and value pairs provided.

By default, the following options are set:

{
    action:        "release",
    optimize:      "shrinksafe",
    layerOptimize: "shrinksafe",
    copyTests:     false,
    loader:        "default",
    cssOptimize:   "comments"
}

You can pass in whatever key and value pairs you want; the Dojo build script will ignore those it does not understand.

As an example of setting options:

// A single option:
$build->addProfileOption('version', 'zend-1.3.1');

// Several options:
$build->addProfileOptions(array(
    'loader'   => 'xdomain',
    'optimize' => 'packer',
));

// Or overwrite options:
$build->setProfileOptions(array(
    'version'  => 'custom-1.3.1',
    'loader'   => 'shrinksafe',
    'optimize' => 'shrinksafe',
));

« Prev

Dojo Form Elements and Decorators