arcgis api for javascript: advanced...
TRANSCRIPT
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
John Gravois
@geogangster