All About Angular and ArcGIS - Developers Forum - AC18
1 like584 views
The document discusses the use of Angular in conjunction with the ArcGIS API for JavaScript, highlighting its suitability for large applications and the complexities involved in integration. It covers methods for loading the API including esri-loader, exclude and require patterns, and the new esri webpack plugin, each with their respective pros and cons. The summary emphasizes that Angular is powerful for complex applications but carries a steep learning curve, while the esri-loader is the most popular method for API loading.
All About Angular and ArcGIS - Developers Forum - AC18
- 1. Angular and the ArcGIS API for JavaScript Seth Batterby, Esri UK
- 2. What am I going to cover? • Angular - What is it? - Why we use it? • Angular and the ArcGIS API for JavaScript - Using the Esri loader - Using Exclude and Require - Esri webpack plugin Esri UK Annual Conference 2018 | London
- 3. Angular – What is it? • An open source web development framework • Its more than just a framework! - Develop across platforms - End to end tooling - Templating - Routing - Components Esri UK Annual Conference 2018 | London
- 4. Angular – Why do we use it? • Well suited for large and complex applications • Makes it easy to implement complex requirements • Write code in TypeScript, cutting down on bugs and errors • Lots of tools to speed up development Esri UK Annual Conference 2018 | London
- 5. Sweet AppBuilder Esri UK Annual Conference 2018 | London • Complex Angular application • We use a lot of the Angular Framework - Animations, Components, Reactive Forms, Routing, Guards, Resolvers • Use webpack for builds • ArcGIS API for JS is used throughout
- 6. Angular and the ArcGIS API for JavaScript - The ArcGIS API for JavaScript is written in Dojo - It’s a large library of AMD modules - Most module loaders implement AMD differently than Dojo We need some workarounds to get Angular and the JS API working together. Esri UK Annual Conference 2018 | London
- 7. esri-loader - A tiny library to help load modules - Written and maintained by Esri - Lets you control when the API is loaded - Can use with 3.x or 4.x versions of the API Esri UK Annual Conference 2018 | London
- 8. esri-loader • Pros - Allows for lazy loading modules, when you need them - Zero configuration - Can be used with other frameworks • Cons - Have to use complicated async patterns and callbacks - Cant use import statements Esri UK Annual Conference 2018 | London
- 9. Exclude and Require Provides a slightly higher level of abstraction There's a lot more configuration to handle 1. Configure webpack to exclude Dojo modules 2. Output bundles as AMD 3. Load ArcGIS API for JavaScript via a script tag 4. Use Dojo loader to require the bundles Esri UK Annual Conference 2018 | London
- 10. Exclude and Require • Pros - Can use Imports for loading modules - No need to use Promises or callbacks • Cons - Can slow down application startup - Needs some configuration to get working Esri UK Annual Conference 2018 | London
- 11. Esri webpack Plugin (New) • Pros - Same as the Exclude and Require pattern but in a handy plugin! - Much less configuration needed - Should be future proof • Cons - Only works with ArcGIS API >= v4.7 - Only works with webpack Esri UK Annual Conference 2018 | London
- 12. Summary - Angular - Great for building complex applications - There's a steep learning curve - Wouldn’t recommend it for small applications - ArcGIS API for JS - 3 different patterns for loading - esri-loader most popular - New webpack plugin is the future! Esri UK Annual Conference 2018 | London
- 13. Additional Resources • Tom Wayson: How to load ArcGIS API for JavaScript modules • Esri loader - Esri loader repository • Exclude and Require - Tom Wayson: Using webpack - Angular 2 with Esri API and webpack • Webpack plugin - Using the new webpack plugin for the ArcGIS API for JavaScript - Webpack-plugin repository Esri UK Annual Conference 2018 | London