Using Frameworks
The ArcGIS API for JavaScript has all the tools you would need to build fully scalable and effective applications. However, you may want to utilize another framework's specific capabilities, or leverage your in house expertise in a particular framework.
Frameworks and Libraries
There are many examples of integrating the ArcGIS API for JavaScript with popular frameworks such as React, Angular, Vue, Ember, and many others. Some frameworks and libraries are easier to integrate with than others, so below we introduce some tools and methods to assist you.
You can approach this framework integration in one of two ways.
- Integrate a framework into your ArcGIS API for JavaScript application.
- Integrate the ArcGIS API for JavaScript into an application built with a framework.
Map Centric Integration
In the first scenario, you may want to leverage a framework to help you build UI components to use with your application, but the map is still the main focus of your application and your development efforts. The ArcGIS API for JavaScript framework samples demonstrate how to take advantage of features such as view models to make it easy to use components from your framework of choice in an application that is built following the conventions of the ArcGIS API for JavaScript.
Examples:
Framework First Integration
The second kind of integration, adding the ArcGIS API to an application built in another framework, is useful when you have a team of developers working on an application where the map may only be used in one part of your application. In these scenarios, most of the application state is typically managed outside of the map itself (for example in a data store or routable URL parameters). For this kind of integration you will likely benefit by following the conventions of your framework of choice so that you can take advantage of the community and tooling that have developed around that framework. To do so, you will likely have to use one of the module loading solutions listed below.
You can find examples of these types of applications in the Esri JavaScript resources repository on github. Each framework has its own page with links to reusable libraries and example applications:
- React libraries and example applications
- Angular libraries and example applications
- Vue libraries and example applications
- Ember libraries and example applications
Modern JavaScript Development
Most modern JavaScript development is done in ES2015 or TypeScript. This means that most of these frameworks require an additional build step to compile down to JavaScript that is usable across most browsers, since ES2015 features are not 100% supported across all browsers. TypeScript will do this by default, and if using ES2015, you can use a tool like BabelJS to transpile your JavaScript for you.
Module Loading
Many frameworks distribute their code in a format such as Universal Module Definition (UMD) that is compatible with the Dojo AMD loader used by the ArcGIS API for JavaScript. This means you can load a framework's modules in an ArcGIS API for JavaScript application by configuring Dojo packages to specify the locations of the framework files. See the React and Vue sample pages for examples.
However, if you're taking the approach of integrating the ArcGIS API for JavaScript into an application built with another framework, it is unlikely that you will be using the Dojo AMD loader. In these scenarios you can use one of the following solutions to help you load the modules of the ArcGIS API for JavaScript with whichever module loader is used by the framework.
esri-loader
esri-loader, is a tiny library that helps load ArcGIS API for JavaScript modules into almost any application, including those built with popular bundlers like webpack and rollup.js. esri-loader has additional benefits such as letting you lazy-load the ArcGIS API for JavaScript only when it's needed and using the ArcGIS API for JavaScript in a universal or server-rendered application.
Ember's loader.js
Ember is a framework that actually provides its own module loader. In order to integrate the ArcGIS API for JavaScript with Ember's loader.js, we provide a couple of Ember addons. The first is ember-cli-amd and it allows you to use import statements to load ArcGIS API for JavaScript modules. The other is ember-esri-loader, which allows you to get the benefits of esri-loader in Ember applications.
SystemJS
If your application uses SystemJS you can use systemjs-plugin-dojo to load modules from the ArcGIS API for JavaScript.
Please refer to the documentation for each of these tools to learn more details about usage.