ArcGIS Blog

Developers

ArcGIS Maps SDK for JavaScript

JavaScript Maps SDK: A full transition to components

By Julie Powell

Esri is fully committed to building standards-based web components that extend the core API of the ArcGIS Maps SDK for JavaScript into reusable custom HTML elements, such as <arcgis-map></arcgis-map>. This applies to both internal development of ArcGIS products, as well as the pre-built UI components that are offered as part of the JavaScript Maps SDK. In fact, all core widget functionality is already available as components. Today, the recommended approach for building web apps using the SDK is to use components.

Component benefits

This shift in architecture maximizes productivity of frontend web development. Custom elements provide a familiar (HTML, CSS, JS) programming experience and enable seamless integration with application frameworks. Internally, components are constructed using Calcite Design System’s components, so they can be styled using Calcite’s design tokens (via CSS). In addition, since we are encapsulating ArcGIS experiences as web components in Esri products, we are able deliver proven workflows as configurable components in the SDK (such as the already released Arcade Editor and Charts components). The SDK’s collection of higher-level components will continue to grow over time.

The component API reference allows you to play with the configuration of the component and see the corresponding code.

From widgets to map components

When the SDK was first created, web component standards were still maturing, and didn’t have broad browser adoption. At the same time we didn’t commit to a specific JS framework as the JS landscape is a constant moving target. For that reason, we developed the widget architecture and over time created more than 60 widgets for developers to use in their web apps. Now that web component standards are supported across all major browsers, we are able to evolve our technology alongside the browser (like we do for many internals of the SDK).

Initially, widgets are wrapped as web components, and over time, component internals are being reimplemented with an optimized structure including removal of the legacy widget architecture. To see a list of components that have completed this transition, see the release notes. Once we finish reimplementing components, we will add support for slots, which will enable you to integrate custom controls and functionality within the component experience. Check out Calcite Design System if you want to get familiar with how slots will eventually work in the SDK’s components, as most Calcite components contain slots.

SDK website and associated resources in transition

Many resources in the SDK are already component-based. This includes new and updated resources such as the getting started guides, programming patterns/best practices, tutorials, a collection of samples, integration of the component playground and API reference, and more. However, as the SDK website includes resources that we have been working on for 8 years, a full transition will take multiple releases. While we are in transition, you will see samples and code snippets throughout the website that are not yet reflecting the recommended coding patterns (i.e. aren’t component-based). Every release will bring notable progress.

Widget & component roadmap

Eventually, all widgets will be deprecated and later removed. Therefore, developers are strongly encouraged to migrate their UI code to use components in place of widgets and MapView/SceneView. The level of effort required to perform the migration to a component-based UI will greatly vary between applications. In some cases, it will be very quick. In other cases, it can involve a reasonable amount of effort and require planning and prioritization. Many Esri product teams will be undergoing the same migration work. The widget roadmap factors in this required effort, as well as our component development roadmap. We are targeting the following milestones for full transition to components:

  • Once a component in the @arcgis/map-components package has been updated in their implementation to no longer wrap widget code, the equivalent widget will be deprecated. Deprecations will be signified in the API reference, sample code, and in console messages.
  • All widgets will be deprecated as early as Q1 2026
  • All widgets will be removed from the SDK as early as Q1 2027

Access to the underlying business logic

While the presentation of UI elements are being transitioned from widgets to components, the underlying business logic that is available (today via view models) will continue to be available. That means that you will be able to build custom experiences and workflows using the SDK’s business logic going forward. However, as we work to modernize and continuously improve the SDK, it is important for us to know how you are using the business logic to help inform our longer-term roadmap. For example, here are some common motivations why developers are using view models that could be more easily solved by Esri adding an option to the SDK’s component:

  • UI simplification, such as removing buttons/options: A configuration option can be added to the component which indicates whether a certain element is visible.
  • Integration of a custom workflow: Slots can be added which enables you to embed a component of your choice within the UI. For example, a button could be integrated which launches a custom workflow. Additional events can also be added which allow you to react to user interaction or other conditions.

Sometimes, view models are used to implement fully custom workflows. A common example is SketchViewModel which is used to handle interactive drawing on the map which is required for one aspect of a workflow. In this case, the pattern going forward would continue to depend on the SDK’s business logic for the custom workflow.

If you are using view models today, please fill out this survey so that we can use your input to inform the SDK’s roadmap. We want to continue to offer an SDK that provides maximum productivity when building your apps and at the same time offers the flexibility you need to build your organization’s specific requirements.

Learn more about building apps with components

There are many resources for learning how to build apps with components. For example:

Get started
Tutorials
Component overview
Programming Patterns

2025 Esri Developer & Technology Summit: Special Component Sessions

This year, we will be offering a three-part presentation series covering the core aspects of building web applications using JavaScript Maps SDK components. They are being presented by the development teams that are working on the component technology, and are highly recommended as they are aimed to provide foundational knowledge for developers that are either building new apps or are migrating apps to use components.

Share this article

Subscribe
Notify of
0 Comments
Oldest
Newest
Inline Feedbacks
View all comments