Using Frameworks

The ArcGIS API for JavaScript has all the tools you would need to build fully scalable and effective applications. However, if you wanted to integrate it with another framework or library that better suits your needs, you can do so. Some frameworks and libraries are easier than others, so we provide various tooling and methods to help assist you.

Frameworks and Libraries

The ArcGIS API for JavaScript can be leveraged with various libraries and frameworks to build various applications to meet developers needs.

Some of the most popular frameworks in use today are:

• React
• Angular 1
• Angular
• Ember
• Vue

You can approach this framework integration in one of two ways.

1. Integrate a framework into your ArcGIS API for JavaScript application.
2. Integrate the ArcGIS API for JavaScript into an application built with a framework.

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:

• React
• Angular 1
• Vue

The second kind of integration, adding the ArcGIS API to an application built in another frameowrk, 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 develop around that framework. To do so, you will likely have to use one of the module loading solutions listed below.

You can find more examples of these types of applications in the Esri JavaScript resources repository on github.

Modern JavaScript Development

Most modern JavaScript development is done in ES2015 or TypeScript. This means that most of these frameworks require an intermittent 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

In many of these cases, you can let these tools output the JavaScript to AMD and the Dojo AMD loader used by the ArcGIS API for JavaScript can load all these files.

However, if you're taking the approach of integrating the ArcGIS API for JavaScript into an application built with a framework, it is likely that you won't 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.

esri-system-js

Some frameworks, such as Angular and Aurelia use a module loader called SystemJS. In order to let the SystemJS loader play friendly with the Dojo AMD loader, we provide a tool called esri-system-js that will help integrate the two loaders.

esriSystem.register(
  [
    "esri/Map",
    "esri/views/MapView",
    "esri/widgets/Home/HomeViewModel",
    "esri/request"
  ],
  function() {
    System.import("app/boot")
      .then(null, console.error.bind(console));
  });

ember-cli-amd

Ember is a framework that actually provides its own loader. In order to integrate the ArcGIS API for JavaScript with this Ember loader, we provide a plugin called ember-cli-amd.

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    amd :{
      loader: "https://js.arcgis.com/4.4",
      configPath: "config/dojo-config.js",
      packages: [
        "esri","dojo","dojox","dijit",
        "dgrid", "dstore", "moment"
      ]
    }
  });
  return app.toTree();
};

esri-loader

Another useful library you can use is the esri-loader, which can simplify loading the ArcGISI API for JavaScript into almost any project, including those built with webpack and rollup.js.

function createMap() {
  esriLoader.dojoRequire(["esri/map"], (Map) => {
    let map = new Map("mapNode", {
      center: [-118, 34.5],
      zoom: 8,
      basemap: "dark-gray"
    });
  });
}

Please refer to the documentation for each of these tools to learn more details about usage.