"},{"ID":309572,"user_firstname":"Kitty","user_lastname":"Hurley","nickname":"Kitty Hurley","user_nicename":"khurley","display_name":"Kitty Hurley","user_email":"khurley@esri.com","user_url":"https:\/\/www.github.com\/geospatialem","user_registered":"2022-05-04 21:30:59","user_description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","user_avatar":"
"}],"short_description":"Explore how to optimize your custom widgets in ArcGIS Experience Builder using Jimu UI, Calcite, and Map components","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2948482,"id":2948482,"title":"","filename":"Banner_-1920px-x-1080px.png","filesize":378546,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/developers\/optimizing-custom-widgets-in-arcgis-experience-builder-with-jimu-ui-calcite-and-map-components\/banner_-1920px-x-1080px","alt":"","author":"309572","description":"","caption":"","name":"banner_-1920px-x-1080px","status":"inherit","uploaded_to":2946387,"date":"2025-11-14 23:05:54","modified":"2025-11-14 23:06:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/10\/Banner_-1920px-x-1080px.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"When you first start building custom widgets in <\/span>ArcGIS Experience Builder<\/span><\/a>, the goal is to make it work. Ho<\/span>wever, o<\/span>nce you add more\u00a0<\/span>user interface (<\/span>UI<\/span>)<\/span>, maps, and interactivity,\u00a0<\/span>things\u00a0<\/span>can start to feel sluggish. Load times increase, interactions lag, and the app\u2019s responsiveness takes a hit.<\/span>\u00a0<\/span>Th<\/span>is is<\/span>\u00a0when optimization matters.<\/span><\/span><\/p>\n W<\/span>e\u2019ll<\/span>\u00a0look at<\/span>\u00a0one of the factors\u00a0<\/span>in<\/span>\u00a0how to keep your Experience Builder widgets fast and efficient using the three main\u00a0<\/span>component<\/span>\u00a0systems\u00a0<\/span>in your apps<\/span>:<\/span><\/span>\u00a0<\/span><\/p>\n We’ll introduce the following topics:<\/p>\n Note<\/strong>: If you’re new to widget development, check out the getting started with widget development<\/a> for foundational concepts.<\/p>\n"},{"acf_fc_layout":"content","content":" Each library plays a unique role in Experience Builder development and knowing when and how to use each one helps you avoid unnecessary overhead.<\/span>\u00a0<\/span><\/p>\n For instance, imports statements for each library:<\/p>\n Large imports are one of the most common causes of slow widget load times. If you import entire libraries, your production bundle grows unnecessarily. <\/span>Import only\u00a0components\u00a0needed\u00a0to improve performance and your bundle:<\/span>\u00a0<\/span><\/p>\n Avoid<\/span>\u00a0importing everything from\u00a0<\/span>libraries<\/span>:<\/span><\/span>\u00a0<\/span><\/p>\n The Jimu UI storybook<\/a> documentation lists every available component, making it easy to find what you need and import selectively.<\/p>\n\n
\n
Overview of component libraries<\/h2>\n
\n
Buttons<\/span><\/span><\/code>, Switches<\/span><\/span><\/code>, Sliders<\/span><\/span><\/code>, and Layout<\/span><\/span><\/code> helpers. Because these are the same components used by the core application, they integrate naturally with Experience Builder\u2019s themes and layouts. If you need more advanced widgets, such as FeatureLayerPicker<\/span><\/span><\/code>, FieldSelector<\/span><\/span><\/code>, or Filter<\/span><\/span><\/code>, you can import them from jimu-ui\/advanced<\/span><\/code>.\u00a0<\/span><\/li>\nMapView<\/span><\/span><\/code> or SceneView<\/span><\/span><\/code>\u00a0objects. You can add an<arcgis<\/span>-map<\/span>><\/code>element in your React render method and get instant map functionality with minimal setup, as shown in the Map components documentation<\/span><\/a>.<\/span>\u00a0<\/span><\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"\/\/ Jimu UI <\/span>\r\nimport<\/span> { Button<\/span>, Switch<\/span> } from<\/span> 'jimu-ui'<\/span>\r\n\r\n\/\/ Calcite <\/span>\r\nimport<\/span> '@esri\/calcite-components\/dist\/components\/calcite-button'<\/span>\r\n\r\n\/\/ Map <\/span>\r\nimport<\/span> '@arcgis\/map-components\/dist\/components\/arcgis-map'<\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"Keep imports lean<\/h2>\n
\/\/ Import only the components needed<\/span>\r\nimport<\/span> { Button<\/span>, Slider<\/span> } from<\/span> 'jimu-ui'<\/span><\/code><\/pre>\n\/\/ Avoid importing all of Jimu UI<\/span>\r\nimport<\/span> * as<\/span> JimuUI<\/span> from<\/span> 'jimu-ui'<\/span><\/code><\/pre>\n