Question

A while back, I looked into a solution for the “flash of unstyled content” when using Dojo and Dojo themes. Someone suggested to combine everything by creating a build, and it’ll reduce the load/parse time and remove the need to use preloader overlays, etc.

However, it seems like Dojo is severely lacking in straightforward, “real world” useage examples and tutorials for a lot of its functionality, this especially. A lot of the resources tell you how to set up a build, but not how to implement it.

Let’s say I have this in “pageinit.js”:

require([
    'dojo/parser', 
    'dojo/dom',
    'dojo/dom-class',
    //etc...

    'dijit/form/ValidationTextBox', 
    'dijit/form/CheckBox',
    // etc...

    // Dom Ready call
    'dojo/domReady!']
    function(
        Parser, 
        Dom,
        Class,
        // etc...){
    // do stuff with parser, dijits, so on.
    }
)

Some of the require calls were removed for brevity, but there’s a handful of dom requires, style classes, some dijits, etc. When this page loads, there’s the flash of unstyled content and then it’s fine.

Using the Dojo Web Builder, I selected the modules I’m using, and ran it. It downloaded a zip with a lot of files under it, including a new dojo.js and custom_layer.js.

So my question is now, how do I use these new combined and minified files in place of my “non-build” version? What do I require? Or do I?

So confused…

Answer 1

First, let’s understand how the AMD(require/define) API works.

require([
  'dojo/parser', 
  'dojo/dom',
  'dojo/dom-class'
], function(parser, dom, domClass){
});

This is going to call the require function, specifying that I need three modules in order to do some work. require will get each module. If will determine if the module has been loaded. If it hasn’t it will asynchronously get the file, and load the module into the javascript runtime. Once require has retrieved all of your required modules, it will execute your callback (the function) passing the modules as arguments to the function.

Next, let’s understand the build. The dojo build does exactly what you describe. It will compress a bunch of the individual files into a single file. this will make the page load quicker and prevent that ‘flash’ that you describe.

Finally, putting it all together, you should include the custom_layer.js file along with the dojo.js file.

<script type="text/javascript" src="path/to/dojo/dojo.js" />
<script type="text/javascript" src="path/to/custom_layer.js" />

The web browser will load these two files and evaluate the code. Instead of lazily loading each module in it’s own file, the module will already be loaded because it was defined in the custom_layer.js.

So, the answer to your final question is that you should NOT change any of your code based on the specific version of code (source vs custom build) that you are using. Using the AMD api, it should just work.