ArcGIS API for JavaScript Advanced Topics Andy Gup & John Gravois 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 [email protected] @agup John Gravois [email protected] @geogangster.