The roads to starting an ArcGIS JS API app

[ReneRubalcava]

If you are using the ArcGIS API for JavaScript to build a moderately sized application, you are probably building it from different modules. If that's the case, you are probably using a standard dojoConfig as described in the online documentation. What you may not be aware of is that the global dojoConfig isn't the only way to start the party.

No one true path

So here is how you might traditionally set up your dojoConfig start your app.

Option 1

var dojoConfig = { /*stuff*/ };
require(['dependency1', 'dependency2'], function(dep1, dep2) {
  /* awesome web dev stuff */
});

You could also add it to the script tag.

Option 2

<script src="/* esrijs api url */" data-dojo-config="isDebug:true, packages=[/* stuff */]"></script>

But I find this won't really work when a larger config may be needed.

This is another viable approach.

Option 3

require({
  packages: /* stuff */
});
require(['dependency1', 'dependency2'], function(dep1, dep2) {
 /* awesome web dev stuff */
});

But there is yet another way to configure and start your application.

Option 4

require({
  packages: [{
     name: 'app', location: /*somewhere*/
  }. {
    /* more packages */
  }]
}, ['app']);
// app/main.js in your app
require(['dependency1', 'dependency2'], function(dep1, dep2) {
 /* awesome web dev stuff */
});

As we saw in this post on Dojo modules, when you ask for a whole package, such as a directory with Dojo, it assumes there is a main.js file in the directory for that package. That's how this works.

Some caveats

I'm not sure if I've written about using ES6 for ArcGIS JS Dev, but I did do a presentation on it at the most recent Developer Summit. You can see the video here. One of the caveats when using ES6 is that transpilers, like Babel will convert import statements to define statements, but there is no way to get a require statement. So it is still up to you to create at least one single require entry point for your application to get started.

So this:

import map from 'esri/map';

Turns into this:

define(['esri/map'], function(Map) { /*stuff*/ });

Ok. it's not exactly that, transpilers when compiling to AMD modules will use the exports and modules modules to do some stuff that may look odd in the compiled code, but the end result is basically as shown above.

For this reason, I typically do this now.

<script>dojoConfig = { /* config stuff */ };</script>
<script src="//js.arcgis.com/3.13/"></script>
<script>require(['app/main'], function(){});</script>
// app/main.js
define(['dependency1', 'dependency2'], function(dep1, dep2) {
 /* awesome web dev stuff */
});

You can see a sample of this in a testing repo where I was using TypeScript.

Enjoy your choices

So there is more than one way to start a Dojo app. This just goes to show there is some flexibility in the toolkit to fit your developer needs. I'd suggest experimenting with them and finding what best fits your needs. You may even find that a different approach is appropriate in different situations, so it's at least a good idea to know them. This is one of those nuanced bits of knowledge that just gives you better insight into how Dojo works.

For more geodev tips and tricks, check out my blog.