{"id":750122,"date":"2025-05-13T18:03:54","date_gmt":"2025-05-14T01:03:54","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&#038;p=750122"},"modified":"2025-05-13T18:03:54","modified_gmt":"2025-05-14T01:03:54","slug":"javascript-maps-sdk-transitions-to-web-components","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components","title":{"rendered":"JavaScript Maps SDK Transitions to Web Components"},"author":5752,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[25002],"tags":[485662,492162,492152,192832],"arcuser_issues":[492012],"class_list":["post-750122","arcuser","type-arcuser","status-publish","format-standard","hentry","category-developers-corner","tag-arcgis-maps-sdk-for-javascript","tag-view-models","tag-web-components","tag-widgets","arcuser_issues-spring-2025"],"acf":{"short_description":"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"When ArcGIS Maps SDK for JavaScript was first created, standards for web components were still maturing and didn\u2019t have broad browser adoption. At that time, Esri didn\u2019t 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.\r\n\r\nThe recommended approach for building web apps using ArcGIS Maps SDK for JavaScript\u00a0is to use web components, which allow you to create reusable custom HTML elements that you can use in your web apps, such as\u00a0<code>&lt;arcgis-map&gt;&lt;\/arcgis-map&gt;<\/code>. Esri is fully committed to building standards-based\u00a0web components\u00a0that extend the core API of JavaScript Maps SDK. This applies to both internal development of ArcGIS products, as well as the\u00a0pre-built UI components offered as part of JavaScript Maps SDK. In fact, all core widget functionality is already available in the form of components.\r\n\r\nThis 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\u00a0Calcite Design System\u2019s\u00a0components, so they can be styled using Calcite\u2019s\u00a0design tokens\u00a0(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\u2019s collection of higher-level components will continue to grow over time."},{"acf_fc_layout":"content","content":"<h2>From Widgets to Map Components<\/h2>\r\nInitially, 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\u00a0release 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\u2019s components, as most Calcite components contain\u00a0slots."},{"acf_fc_layout":"image","image":750132,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"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\u2019t component-based). Every release will bring notable progress."},{"acf_fc_layout":"content","content":"<h2>Widget and Component Road Map<\/h2>\r\nEventually, 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.\r\n\r\nAs part of the full transition to web components, Esri is targeting a few milestones. Once a component in the\u00a0<code>@arcgis\/map-components<\/code>\u00a0package 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.\r\n\r\nWhile the\u00a0<em>presentation<\/em>\u00a0of UI elements is transitioning from widgets to components, the underlying business logic (currently available via view models) isn\u2019t going anywhere. That means you can build custom experiences and workflows using the SDK\u2019s 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\u2019s longer-term road map."},{"acf_fc_layout":"gallery","gallery_images":[750142,750172]},{"acf_fc_layout":"content","content":"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.\r\n\r\nOther 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.\r\n\r\nSometimes, 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\u2019s business logic for the custom workflow.\r\n\r\nIf you are using view models today, please <a href=\"https:\/\/survey123.arcgis.com\/share\/30696fc09eea4864a646f6abee231942\">fill out a survey<\/a>\u00a0so that Esri can use your input to inform the SDK\u2019s 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\u2019s specific requirements.\r\n\r\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/\">Learn more about building apps with components<\/a>."}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser<\/title>\n<meta name=\"description\" content=\"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser\" \/>\n<meta property=\"og:description\" content=\"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/05\/arcuser-banner-javascript-wide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser\" \/>\n<meta name=\"twitter:description\" content=\"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/05\/arcuser-banner-javascript-wide.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components\",\n\t            \"name\": \"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2025-05-14T01:03:54+00:00\",\n\t            \"description\": \"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"JavaScript Maps SDK Transitions to Web Components\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d\",\n\t            \"name\": \"Amy Ambard\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t                \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t                \"caption\": \"Amy Ambard\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser","description":"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components","og_locale":"en_US","og_type":"article","og_title":"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser","og_description":"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/05\/arcuser-banner-javascript-wide.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_title":"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser","twitter_description":"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.","twitter_image":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/05\/arcuser-banner-javascript-wide.jpg","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components","name":"JavaScript Maps SDK Transitions to Web Components | Spring 2025 | ArcUser","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2025-05-14T01:03:54+00:00","description":"ArcGIS Maps SDK for JavaScript is moving from a widget-based architecture to one based on web components. Learn what this means for you.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/javascript-maps-sdk-transitions-to-web-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"JavaScript Maps SDK Transitions to Web Components"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d","name":"Amy Ambard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","caption":"Amy Ambard"},"url":""}]}},"sort_order":"10","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/750122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/5752"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/750122\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=750122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=750122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=750122"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=750122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}