arcgis api for javascript: advanced...

Andy Gup & John Gravois

ArcGIS API for JavaScript

Advanced Topics

ArcGIS API for JavaScript 4.x

• Modern architecture

• Better control over application life-cycle

• Stronger infrastructure for building larger apps

Working with Modern JavaScript –2017+

• Stepping beyond plain ol’ JavaScript

• ES2015, Node.js, Webpack, TypeScript, etc etc

• Transpilers, module loaders, task runners, etc

Getting to know modern JavaScript…

Almost all modern JavaScript apps use a framework

The Good News…

A variety of solutions available on github!

A partial list…

• https://github.com/Esri/angular-esri-map

• https://github.com/jwasilgeo/angular2-esri-playground

• https://github.com/Esri/esri-system-js

• https://github.com/lobsteropteryx/esri-webpack-typescript

Two main approaches

Dedicated module loader

Exclude and Require

What are modules?

• Different types: AMD, ES6, commonjs, etc

• Reusable chunk of JavaScript

• Logically encapsulate functionality

• Sometimes referred to as JS libraries

Example: AMD Modules

Module Loaders

Dojo uses an AMD module loader

Other frameworks use a variety of module loaders: e.g. webpack, SystemJS, RequireJS…

Dedicated module loader

Example usage: Angular + webpack

• Use esriLoader or angular2-esri-loader

• Inject ArcGIS JS API as a <script>

• Thin wrapper around global require()

• Allows for lazy loading ArcGIS modules

Dedicated Module Loader

Examples

• https://github.com/Esri/angular-esri-map

• https://github.com/tomwayson/esri-loader

Dedicated module loader

Advantages:

- Sandboxes ArcGIS module dependencies

- Only load ArcGIS modules on routes that require it

Dedicated module loader

Challenges:

- Uses global require()

- Requires knowledge about ArcGIS JS API module loading

- Can’t use ES6 import statements

Exclude and Require

Example usage: Angular + Webpack

• Configure module loader to exclude ArcGIS Dojo modules

• Configure module loader to output AMD bundles

• Load ArcGIS JS API via a <script> tag

• Use ArcGIS JS API Dojo loader to require()bundles

Exclude and Require

Examples

• https://github.com/tomwayson/angular2-esri-example

• https://github.com/lobsteropteryx/esri-webpack-typescript

Exclude and Require

Advantages:

- You can use ES2015 imports and commonjs

- No need for async callbacks or Promises to load ArcGIS modules

Exclude and Require

Challenges:

- Can introduce map loading delays

- Also uses global require()

Andy Gup

agup@esri.com

@agup

John Gravois

jgravios@esri.com

@geogangster