When ArcGIS Maps SDK for JavaScript was first created, standards for web components were still maturing and didn’t have broad browser adoption. At that time, Esri didn’t commit to a specific JavaScript framework, as the landscape is a constant moving target. For that reason, JavaScript Maps SDK was developed with a widget architecture, which over time included more than 60 widgets for developers to use in their web apps. However, now that web components standards are supported across all major browsers, the technology can evolve alongside the browser. Therefore, JavaScript Maps SDK is undergoing a full transition from a widget-based architecture to one based on web components.
The recommended approach for building web apps using ArcGIS Maps SDK for JavaScript is to use web components, which allow you to create reusable custom HTML elements that you can use in your web apps, such as <arcgis-map></arcgis-map>. Esri is fully committed to building standards-based web components that extend the core API of JavaScript Maps SDK. This applies to both internal development of ArcGIS products, as well as the pre-built UI components offered as part of JavaScript Maps SDK. In fact, all core widget functionality is already available in the form of components.
This shift in architecture maximizes the productivity of front-end web development. Custom elements provide a familiar programming experience (HTML, CSS, JavaScript) 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 Esri is encapsulating ArcGIS experiences as web components in Esri products, we can 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.
From Widgets to Map Components
Initially, widgets are wrapped as web components, and over time, component internals are being reimplemented with an optimized structure, including the removal of the legacy widget architecture. To see a list of components that have completed this transition, refer to the release notes for the most recent version of JavaScript Maps SDK. Once the component reimplementation is done, support for slots will be added, 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.
Many resources in JavaScript Maps SDK are already component-based. These include new and updated resources such as the getting started guides, programming patterns and best practices, tutorials, a collection of samples, integration of the component playground and API reference, and more. However, as the JavaScript Maps SDK website includes resources that Esri has been working on for eight years, a full transition will take multiple releases. While JavaScript Maps SDK is in transition, you will see samples and code snippets throughout the website that do not yet reflect the recommended coding patterns (i.e., they aren’t component-based). Every release will bring notable progress.
Widget and Component Road Map
Eventually, all widgets will be deprecated and removed. Therefore, developers are strongly encouraged to migrate their UI code to use components in place of widgets and MapView or SceneView. The level of effort required to perform the migration to a component-based UI will vary between applications. In some cases, the process will be quick. In other cases, it can involve a reasonable amount of effort, planning, and prioritization. Many Esri product teams will be undergoing the same migration work. The widget road map factors into this required effort, as well as the component development road map.
As part of the full transition to web components, Esri is targeting a few milestones. Once a component in the @arcgis/map-components package has been updated to no longer wrap widget code, the equivalent widget will be deprecated. Deprecations will be signified in the API reference, sample code, and console messages. Additionally, all widgets are planned to be deprecated as early as 2026, and all widgets are planned to be removed from the SDK as early as 2027.
While the presentation of UI elements is transitioning from widgets to components, the underlying business logic (currently available via view models) isn’t going anywhere. That means you can build custom experiences and workflows using the SDK’s business logic going forward. However, as Esri works to modernize and continuously improve JavaScript Maps SDK, we want to know how you use the business logic. This helps inform Esri’s longer-term road map.
-
When used alongside maps, chart components provide a complete data visualization story of your data.
For example, some developers might use view models for UI simplification, such as removing buttons or options. To achieve this goal, a configuration option can be added to the component which indicates whether a certain element is visible.
Other developers use view models to integrate a custom workflow. However, slots can be added which enable you to embed a component of your choice within the UI. For example, a button could be integrated to launch 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, a requirement 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 a survey so that Esri can use your input to inform the SDK’s road map. 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 meet your organization’s specific requirements.
Learn more about building apps with components.
About the author
