Best method using ESRI Loader for click events

PaulGiard

I am following the ESRI Loader example found here

const [EsriMap, EsriMapView, Point] = await loadModules([

'esri/Map',

'esri/views/MapView',

'esri/geometry/Point'

]);

My question is: what is the preferred method to load Esri Modules that will be used in other methods; for example in a click event handler.

Should the modules all be loaded at initialization?  

What is the best way to make modules available to other methods in the class?

Should the modules be loaded in each method?

AndyGup

Hey Paul, note we recommend asking questions for esri-loader over on its github issues page: Issues · Esri/esri-loader · GitHub. This helps us keep track of related issues.

>> My question is: what is the preferred method to load Esri Modules that will be used in other methods; for example in a click event handler.

This depends on the JavaScript framework such as Vue, React or Angular. Here's a getter/setter example in Angular. Sometimes it's also based on developer preference, sometimes it's a design requirement. 

>> Should the modules all be loaded at initialization? 

Also depends on how you are using esri-loader and your requirements. If you are using a JavaScript framework we recommend waiting until the framework has initialized. Here's an Angular example that waits until the ngOnInit() event. If you have a large application that loads many modules up front, it may be worth the effort to determine if any modules can be lazy loaded later to keep your initial loading time as fast as possible.

>> What is the best way to make modules available to other methods in the class?

Typically this would be the same as any another other JavaScript-based application. All variables will have to be within the JavaScript scope in order to be correctly referenced within a method. How you scope the variables will depend on the framework. Here's a  React doc that talks about scoping.

>> Should the modules be loaded in each method? 

As I mentioned above, we typically call this lazy loading. This approach is perfectly acceptable if you need to tweak the performance during application initialization. You'll need to examine the cost/benefit of this approach depending on your use cases. You may end up with a combination of loading modules at initialization and lazy loading others.