ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over...
Transcript of ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over...
![Page 1: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/1.jpg)
Andy Gup & John Gravois
ArcGIS API for JavaScript
Advanced Topics
![Page 2: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/2.jpg)
ArcGIS API for JavaScript 4.x
• Modern architecture
• Better control over application life-cycle
• Stronger infrastructure for building larger apps
![Page 3: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/3.jpg)
Working with Modern JavaScript –2017+
• Stepping beyond plain ol’ JavaScript
• ES2015, Node.js, Webpack, TypeScript, etc etc
• Transpilers, module loaders, task runners, etc
![Page 4: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/4.jpg)
Getting to know modern JavaScript…
![Page 5: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/5.jpg)
Almost all modern JavaScript apps use a framework
![Page 6: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/6.jpg)
The Good News…
A variety of solutions available on github!
![Page 7: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/7.jpg)
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
![Page 8: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/8.jpg)
Two main approaches
Dedicated module loader
Exclude and Require
![Page 9: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/9.jpg)
What are modules?
• Different types: AMD, ES6, commonjs, etc
• Reusable chunk of JavaScript
• Logically encapsulate functionality
• Sometimes referred to as JS libraries
![Page 10: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/10.jpg)
Example: AMD Modules
![Page 11: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/11.jpg)
Module Loaders
Dojo uses an AMD module loader
Other frameworks use a variety of module loaders: e.g. webpack, SystemJS, RequireJS…
![Page 12: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/12.jpg)
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
![Page 13: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/13.jpg)
![Page 14: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/14.jpg)
Dedicated Module Loader
Examples
• https://github.com/Esri/angular-esri-map
• https://github.com/tomwayson/esri-loader
![Page 15: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/15.jpg)
Dedicated module loader
Advantages:
- Sandboxes ArcGIS module dependencies
- Only load ArcGIS modules on routes that require it
![Page 16: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/16.jpg)
Dedicated module loader
Challenges:
- Uses global require()
- Requires knowledge about ArcGIS JS API module loading
- Can’t use ES6 import statements
![Page 17: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/17.jpg)
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
![Page 18: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/18.jpg)
![Page 19: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/19.jpg)
Exclude and Require
Examples
• https://github.com/tomwayson/angular2-esri-example
• https://github.com/lobsteropteryx/esri-webpack-typescript
![Page 20: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/20.jpg)
Exclude and Require
Advantages:
- You can use ES2015 imports and commonjs
- No need for async callbacks or Promises to load ArcGIS modules
![Page 21: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/21.jpg)
Exclude and Require
Challenges:
- Can introduce map loading delays
- Also uses global require()
![Page 22: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/22.jpg)
![Page 23: ArcGIS API for JavaScript: Advanced Topics...•Modern architecture •Better control over application life-cycle •Stronger infrastructure for building larger apps Working with Modern](https://reader031.fdocuments.us/reader031/viewer/2022013010/5f0f602d7e708231d443d9b8/html5/thumbnails/23.jpg)
Andy Gup
@agup
John Gravois
@geogangster