Understanding dojo's require in combination with diji/layout

Question

I'm trying to understand dojo in combination with dijit layouts. More specifically: do I need to require the layout widgets in JS or is using html data attributes enough?

I've read the Layout documentation and it seems like you need 3 things:

• JavaScript: require the layout widgets you want to use
• HTML markup
• CSS

But it's not clear to me why I would need to require the layout widgets in JavaScript with:

require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);

Which is stated in this example.

I've created a demo without requiring "dijit/layout/BorderContainer" and "dijit/layout/ContentPane" and that's working fine.

Is it safe to leave these out of the require statement?

Answer 1

You should require your modules rather than letting the parser load them because ideally you want all of your modules loaded before the parser runs so that you can bundle all of your dependant modules into a layer file.

This means that you can create a layer with all of your common modules so that you don't need to have 100s of tiny .js requests hit your server, and instead you can load a bulkier one.

Also, if you have custom modules you should load all of the dependant widgets inside of the custom module instead of letting the parser detect.

Answer 2

dojo/parser loads all dependencies for you, so you don't need to require them programmatically in JavaScript, but you need them there once you decide to build your code, i.e. put all the dependencies into a single file, which is the reason, why parser warns you, when it loads dependencies for you:

This auto-requiring is also the reason, why parser.parse() returns a promise, it's because it might be asynchronously loading dependencies:

parser.parse().then(function(/* Array */ widgetInstances) {

});