Dojo Builds...? What now?

Asked 16/10, 2012 at 20:7 Answered 30/7, 2013 at 18:40

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...

Glede answered 16/10, 2012 at 20:7 Comment(0)

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.

Chios answered 16/10, 2012 at 20:22 Comment(4)

Thank you for the clarification! With some more tests it seems that a little package changing in dojoConfig is required to make things point to the correct locations, too. – Glede 16/10, 2012 at 22:26

In addition, I didn't have the rest of the Dojo toolkit (dojo/, dijit/, and dojox/ in the root directory). I still had to copy parser.js into the root directory, didn't seem to see the other one. Strange. – Glede 16/10, 2012 at 23:30

actually, you could get into 'trouble' here - if you require something from the layer - and custom_layer has not yet loaded. I'd suggest building dojo.js layer where base is included with your layer. Otherwise, keep layer-loading-scripttags immediately close to dojo.js scripttag – Subjacent 21/10, 2012 at 0:25

Hello, I've made my build as stated here, and it is working, except IE9 on WebSphere: #17940543 Do you happen to know what could be a case here? – Overweary 30/7, 2013 at 6:55

Not sure if it's best practice or not, but I was seeing the flash of unstyled content when I first started (a few days ago), and saw several examples somewhere that takes care of by just hiding the <body>. Parse will unhide it when it's ready to show something.

<body style="visibility: hidden;">

Gingham answered 30/7, 2013 at 18:40 Comment(3)

If I'm not mistaken, this can potentially cause issues with indexing by search engines. I remember reading something a while back where Google was "weary" of invisible elements due to abuse of various SEO black hat practices. – Glede 31/7, 2013 at 20:29

Good to know. I never thought of that. I'm not doing anything that should be SEO indexed at the moment, but sure sooner or later I will. You could probably do the same thing without breaking SEO by putting a small scrip at the start of the body to hide the body, or you could put the entire UI inside a hidden DIV just inside the body and leaving just a 'Loading' message inside the unhidden body. – Gingham 6/8, 2013 at 21:13

I've seen some pages in Google search results with the first few lines of content being "Loading". I'm sure that's the result of this sort of practice. I guess it comes down to what one is doing, SEO priorities etc. – Glede 6/8, 2013 at 21:57

Recommended topics

Hot tags