This blog post will touch on the technology enhancements of the most recent release of ArcGIS for Power BI.

From Dojo to React

Prior to this release, the ArcGIS for Power BI visual was built with Dojo. Dojo is a full-fledged framework for building web apps that includes reusable widgets, routing and state management features out of the box.

For the latest release, our development team decided to migrate to React. React is a library for user interfaces developed by Facebook.

Why did our development team decide to migrate to React?

React provides a lightweight approach to development. To step back a bit, Dojo was an early, if not the first, open-source JavaScript library/toolkit for web development that used asynchronous JavaScript (AJAX). Later, Dojo evolved into a framework that allowed for large web application development. As time went on, many more libraries and frameworks were introduced like JQuery, Backbone and Ember. Fast forward to present day, where modernized web development has been predominantly done using one of the following:

React – Library for creating UI’s

Angular – development platform that includes a component-based framework for building scalable web applications, collection of libraries that cover features such as routing, form management and client-server communication

Vue – framework of libraries for building web applications from scratch or can be applied incrementally to an existing app (progressive framework).

Of the three, React has the advantage of being the most lightweight of the three options i.e it does not have many of the features Angular or Vue has built in. Its sole purpose is to build UI. React is a good option if you do not need those features that Angular and Vue have. The team determined that we can build our application with React and take advantage of a lightweight library.

Besides being lightweight, another benefit of React is that it supports JavaScript Syntax Extension(JSX).  JSX allows HTML-like syntax to be integrated with JavaScript so the UI can be split into independent and reusable pieces. Because React supports JSX, we are also able to use TypeScript and take advantage of its type checking capability. TypeScript is a superset of JavaScript created by Microsoft.

Contrasting code structure

Below is a code sample of a counter widget written in Dojo and React.

Dojo:

In Dojo, code is written according to Asynchronous Module Definition(AMD) format and Dojo’s built in modules are specified as dependencies to enable functionality. An example of this is the template mixin that allows for including HTML markup for the widget.

React:

In React, code is written using JSX. The required imports is the React library and any hooks needed to manage property changes in the widget. In contrast to Dojo, React components require less code and is easier to read.

JSAPI4

For the latest release, we were also able to migrate to ArcGIS API for JavaScript version 4. ArcGIS API for JavaScript (JSAPI) is an API that allows developers to build apps leveraging Esri’s services. Version 4.x is a substantial overhaul of the ArcGIS API for JavaScript with a long list of updates including the capability to create both 2D and 3D views. The entire list of JSAPI updates can be viewed here.

Result

As a result of using React, TypeScript and JavaScript, we were able to make significant enhancements to the ArcGIS for Power BI visual, including:

1. Reduced debugging time thanks to TypeScript’s type checking.
2. A visual that is noticeably faster. This can be attributed to the visual file size being reduced by 80%.
3. Asynchronous Module Definition (AMD) and lazy loading helped with performance of the application.
4. Smaller code base. Smaller code base equates to less maintenance.

The future and beyond

The technology upgrades mentioned above allow us to plan for new features such as 3D visualization and improved mobile support to further enhance ArcGIS for PowerBI. Stay tuned.