{"id":2979678,"date":"2026-08-12T09:00:15","date_gmt":"2026-08-12T16:00:15","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2979678"},"modified":"2026-08-12T09:08:07","modified_gmt":"2026-08-12T16:08:07","slug":"how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","title":{"rendered":"How the JavaScript Maps SDK team builds deceptively simple components"},"author":468682,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[769562],"industry":[],"product":[36831],"class_list":["post-2979678","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-arcgis-maps-sdk-for-javascript","product-js-api-arcgis"],"acf":{"authors":[{"ID":468682,"user_firstname":"Supriya","user_lastname":"K.","nickname":"Supriya K.","user_nicename":"sup15027","display_name":"Supriya Kotturu","user_email":"sup15027@esri.com","user_url":"https:\/\/www.dev.to\/supriya-kotturu","user_registered":"2026-08-07 20:03:11","user_description":"I interned on the ArcGIS Maps SDKs for JavaScript team in Summer 2026, where I learned that a lot of engineering goes into making things look effortless, and also that you can put a cat on a map if you try hard enough. Over my career, I've also worked as a frontend engineer, and I write about my engineering misadventures on dev.to.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/profile-213x200.jpeg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.","flexible_content":[{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">This summer, I had the opportunity to intern on the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS Maps SDK for JavaScript<\/a>, and <\/span><span data-contrast=\"auto\">it\u00a0was\u00a0an\u00a0amazing\u00a0experience<\/span><span data-contrast=\"none\">. I ended up learning how to build, test, and deploy my own library of <a href=\"https:\/\/lit.dev\/\">Lit<\/a> web components, which I then used in a <a href=\"https:\/\/react.dev\/\">React<\/a> application. The learning curve was immense. But once I got through it, <\/span><span data-contrast=\"auto\">my teammates adored the project<\/span><span data-contrast=\"none\">.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"storymap","title":"Try it out!","description":"","static":false,"storymap_url":"<a href=\"https:\/\/nystreets.netlify.app\/\">https:\/\/nystreets.netlify.app\/<\/a>"},{"acf_fc_layout":"content","content":"<p>You can try the final application above or <a href=\"https:\/\/nystreets.netlify.app\/\">visit the app directly<\/a>. The application is an inspired take on StoryMaps for telling a story about New York streets data.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>The onboarding<\/h2>\n<p><span data-contrast=\"none\">It all started when my mentor sent me an internal technical onboarding website and asked me to explore different ArcGIS\u00a0<\/span><span data-contrast=\"auto\">products, such as<\/span><span data-contrast=\"none\">\u00a0<\/span><a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/get-started\/get-started-with-mv.htm\"><span data-contrast=\"none\">Map Viewer<\/span><\/a><span data-contrast=\"none\">\u00a0and\u00a0<\/span><a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-instant-apps\/overview\"><span data-contrast=\"none\">Instant Apps<\/span><\/a><span data-contrast=\"none\">. The onboarding docs listed <\/span><span data-contrast=\"auto\">useful<\/span><span data-contrast=\"none\">\u00a0<\/span><span data-contrast=\"none\">resources to start with and where to\u00a0<\/span><span data-contrast=\"auto\">search\u00a0for help<\/span><span data-contrast=\"none\">. It gave me a structured guide to explore but also absolute independence to build\u00a0something\u00a0that I was interested in.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Rather than programmatically building my map in JavaScript, I started looking for\u00a0GeoJSON\u00a0files from local government open data so that I\u00a0could\u00a0create a web map using Map Viewer<\/span><span data-contrast=\"none\">. I spent time exploring ArcGIS Online\u00a0by\u00a0building maps, creating different charts to visualize the\u00a0<\/span><span data-contrast=\"auto\">information,<\/span><span data-contrast=\"none\">\u00a0and\u00a0even\u00a0spending 25 mins to decide which\u00a0<\/span><span data-contrast=\"auto\">color\u00a0pair<\/span><span data-contrast=\"none\">\u00a0looks well on the map. During this process, I stumbled\u00a0into\u00a0&#8220;animated symbols&#8221; for one of my maps and\u00a0was amazed\u00a0at how beautiful it looked. <\/span><\/p>\n<p><span data-contrast=\"none\">I then moved on to using these maps in a React app, which was easy. By this time, I had a good collection of pretty maps with insights on New York street. I want to have a text panel beside the map that describes what the map is about.<\/span><span data-contrast=\"none\">\u00a0Since I was interning with the team who\u00a0<\/span><span data-contrast=\"auto\">built\u00a0the<\/span><span data-contrast=\"none\">\u00a0&lt;arcgis-map&gt;\u00a0component, it only made sense I\u00a0learned\u00a0how to create my own &lt;story-panel&gt; which would show the map alongside its description.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">That&#8217;s when I got to know about Web Components and Lit. It felt overwhelming at the beginning but looked f<\/span><span data-contrast=\"auto\">amiliar<\/span><span data-contrast=\"none\">. Web components had a similar life cycle to rendering components in<\/span><span data-contrast=\"none\"> React, but without needing a library. W<\/span><span data-contrast=\"auto\">e can<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">define our custom web components and render <\/span><span data-contrast=\"auto\">them <\/span><span data-contrast=\"auto\">in HTML using\u00a0vanilla JavaScript.<\/span><span data-contrast=\"none\"> We don&#8217;t even need Lit for it, but Lit does provide some nice conveniences that make web component development easier.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>How does Esri build their component packages?<\/h2>\n<p>They use web components. Before we dive into how to build them, let&#8217;s look at the three main technologies provided:<\/p>\n<ul style=\"padding-bottom: 0;margin-bottom: 0\">\n<li>Custom Elements\u2014lets you define a new HTML tag, such as <code>&lt;scope-tag&gt;<\/code><\/li>\n<li>Shadow DOM\u2014encapsulates markup and styles so the component\u2019s internal structure doesn\u2019t conflict with the elements in the DOM<\/li>\n<li>HTML Templates\n<ul>\n<li><code>&lt;template&gt;<\/code>\u2014enables you to reuse markup templates<\/li>\n<li><code>&lt;slot&gt;<\/code>\u2014lets you reserve space in the layout to render other elements<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"<h2><span data-contrast=\"none\">Hello, Lit!<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">In Lit, all the boilerplate code you wire<\/span><span data-contrast=\"none\">\u00a0in becomes simple descriptors. <\/span><\/p>\n<p><span data-contrast=\"none\"><span style=\"color: #005cc5\">@customElement<\/span>(<span style=\"color: #032f62\">&#8216;story-panel&#8217;<\/span>) registers the custom element with the component element <\/span><span data-contrast=\"auto\">registry, <\/span><span data-contrast=\"none\"><span style=\"color: #005cc5\">@property<\/span>()\u00a0for declaring properties, and <span style=\"color: #005cc5\">html&#8220;<\/span> for templates. Way simpler.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"<h2><span class=\"TextRun MacChromeBold SCXW172531623 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW172531623 BCX0\" data-ccp-parastyle=\"heading 2\">GIS Learning: Renderer<\/span><\/span><span class=\"EOP Selected SCXW172531623 BCX0\" data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:400,&quot;335559739&quot;:220}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">Renderers are used to visualize features in a layer. A\u00a0<\/span><a href=\"https:\/\/developers.arcgis.com\/rest\/services-reference\/enterprise\/renderer-objects\/\"><span data-contrast=\"none\">renderer object<\/span><\/a><span data-contrast=\"none\">\u00a0with styles is used to customize it.\u00a0<\/span><span data-contrast=\"auto\">The renderer<\/span><span data-contrast=\"none\">\u00a0was behind all the lines,\u00a0symbols,\u00a0and colors that I clicked around earlier to customize the map.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">To keep it simple, there are 3 kinds of renderer objects:<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<ul>\n<li><span data-contrast=\"none\">Simple renderer\u2014when there&#8217;s only one data point<\/span><span data-ccp-props=\"{&quot;335559739&quot;:80}\">\u00a0<\/span><\/li>\n<li><span data-contrast=\"none\">Unique value renderer\u2014to differentiate between groups of features that have matching field values<\/span><span data-ccp-props=\"{&quot;335559739&quot;:80}\">\u00a0<\/span><\/li>\n<li><span data-contrast=\"none\">Vector Field renderer\u2014to show the direction of the flow<\/span><span data-ccp-props=\"{&quot;335559739&quot;:80}\">\u00a0<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">This<\/span><span data-contrast=\"auto\">\u00a0feature<\/span><span data-contrast=\"auto\">\u00a0made<\/span><span data-contrast=\"none\">\u00a0me curious to see if I can have my own custom marker\u00a0<\/span><span data-contrast=\"auto\">render<\/span><span data-contrast=\"auto\">,<\/span><span data-contrast=\"none\">\u00a0which can turn any image into a symbol on the map. Having a cat on the\u00a0<\/span><span data-contrast=\"auto\">map does<\/span><span data-contrast=\"none\">\u00a0sound cute!<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">I created a <span style=\"color: #6f42c1\">customMarkerRenderer<\/span>() with Lit,\u00a0<\/span><span data-contrast=\"auto\">which<\/span><span data-contrast=\"none\">\u00a0helped me get a glimpse of how complex things can get.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2979685,"id":2979685,"title":"CustomMarkerRenderer() on the map","filename":"Screenshot-2026-08-07-at-1.34.46-PM.png","filesize":1435361,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\/screenshot-2026-08-07-at-1-34-46-pm","alt":"A map showing the active - inactive parking meters in New York Streets with two Cat symbols","author":"468682","description":"A map showing the active - inactive parking meters in New York Streets with two Cat symbols","caption":"CustomMarkerRenderer() on the map","name":"screenshot-2026-08-07-at-1-34-46-pm","status":"inherit","uploaded_to":2979678,"date":"2026-08-07 20:35:47","modified":"2026-08-07 20:37:25","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":1274,"height":1018,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","medium-width":327,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","medium_large-width":768,"medium_large-height":614,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","large-width":1274,"large-height":1018,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","1536x1536-width":1274,"1536x1536-height":1018,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","2048x2048-width":1274,"2048x2048-height":1018,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM-582x465.png","card_image-width":582,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/Screenshot-2026-08-07-at-1.34.46-PM.png","wide_image-width":1274,"wide_image-height":1018}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2><span class=\"TextRun MacChromeBold SCXW59833320 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW59833320 BCX0\" data-ccp-parastyle=\"heading 2\">Testing<\/span><\/span><span class=\"EOP Selected SCXW59833320 BCX0\" data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:400,&quot;335559739&quot;:220}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">Before we start using these components, we need to test if they work as expected. <\/span><\/p>\n<p><span data-contrast=\"none\">That&#8217;s where\u00a0<\/span><a href=\"https:\/\/storybook.js.org\/\"><span data-contrast=\"none\">Storybook<\/span><\/a><span data-contrast=\"none\"> helps. Storybook helps you test components in isolation to simulate user interaction and accessibility<\/span><span data-contrast=\"none\"> and document components. For reference, I ended up writing interaction tests and documenting these components.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"storymap","title":"Storybook preview of the different components","description":"","static":false,"storymap_url":"<a href=\"https:\/\/nystreets-storybook.netlify.app\/\">https:\/\/nystreets-storybook.netlify.app\/<\/a>"},{"acf_fc_layout":"content","content":"<p>You can go through the Storybook above or <a href=\"https:\/\/nystreets-storybook.netlify.app\/\">visit it directly<\/a>.<\/p>\n<h2>Production app<\/h2>\n<p>The application you saw at the beginning of this blog shows how I used all those components in the previous section.<\/p>\n<p><span data-contrast=\"none\">Building an app using Lit would mean avoiding the opportunity to try out rendering custom components in a different framework, which was the whole purpose of the onboarding exercise. <\/span><\/p>\n<p><span data-contrast=\"none\">I decided to stick with React. But it wasn&#8217;t as straightforward as I thought.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">Since\u00a0custom\u00a0elements are basically HTML tags like <span style=\"color: #22863a\">&lt;h1&gt;<\/span>, <span style=\"color: #22863a\">&lt;div&gt;<\/span>,\u00a0<span style=\"color: #22863a\">&lt;p&gt;<\/span> etc, HTML attributes cannot be objects, arrays, or functions. They accept only primitive values like string, number, and boolean. If we are doing it in vanilla JS or any framework that doesn&#8217;t support custom elements, we must use a ref to add an event listener to update a value and handle cleaning up those event listeners when these components unmount. <\/span><\/p>\n<p><span data-contrast=\"none\">But with React 19, we don&#8217;t have to worry about custom element support. We can use our custom element just like any other React component. The only caveat is that we need to define the types for our custom component to avoid any Typescript errors or warnings.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Conclusion<\/h2>\n<p><span class=\"TextRun SCXW197119661 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW197119661 BCX0\">As they say, <em>&#8220;Good engineering is invisible&#8221;<\/em>. I was\u00a0<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">truly amazed<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">\u00a0to see the amount of engineering that goes behind creating a simple <span style=\"color: #22863a\">&lt;arcgis-map&gt;<\/span> component.\u00a0<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">This was just a glimpse. They handle accessibility, internationalization,\u00a0<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">end-to-end<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">\u00a0<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">testing,<\/span><span class=\"NormalTextRun SCXW197119661 BCX0\">\u00a0and much more to make sure these components work without any friction.<\/span><\/span><span class=\"EOP Selected SCXW197119661 BCX0\" data-ccp-props=\"{&quot;335559739&quot;:240}\">\u00a0<\/span><\/p>\n"}],"related_articles":"","show_article_image":false,"card_image":false,"wide_image":false},"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>How the JavaScript Maps SDK team builds deceptively simple components How the JavaScript Maps SDK team builds deceptively simple components<\/title>\n<meta name=\"description\" content=\"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.\" \/>\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\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How the JavaScript Maps SDK team builds deceptively simple components\" \/>\n<meta property=\"og:description\" content=\"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-12T16:08:07+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\"},\"author\":{\"name\":\"Supriya Kotturu\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/802a4c80f0136576d4bae311884c1630\"},\"headline\":\"How the JavaScript Maps SDK team builds deceptively simple components\",\"datePublished\":\"2026-08-12T16:00:15+00:00\",\"dateModified\":\"2026-08-12T16:08:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS Maps SDK for JavaScript\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\",\"name\":\"How the JavaScript Maps SDK team builds deceptively simple components How the JavaScript Maps SDK team builds deceptively simple components\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2026-08-12T16:00:15+00:00\",\"dateModified\":\"2026-08-12T16:08:07+00:00\",\"description\":\"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How the JavaScript Maps SDK team builds deceptively simple components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/802a4c80f0136576d4bae311884c1630\",\"name\":\"Supriya Kotturu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/profile-213x200.jpeg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/profile-213x200.jpeg\",\"caption\":\"Supriya Kotturu\"},\"description\":\"I interned on the ArcGIS Maps SDKs for JavaScript team in Summer 2026, where I learned that a lot of engineering goes into making things look effortless, and also that you can put a cat on a map if you try hard enough. Over my career, I've also worked as a frontend engineer, and I write about my engineering misadventures on dev.to.\",\"sameAs\":[\"https:\/\/www.dev.to\/supriya-kotturu\",\"https:\/\/www.linkedin.com\/in\/supriya-kotturu\"],\"gender\":\"female\",\"worksFor\":\"ESRI\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/sup15027\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How the JavaScript Maps SDK team builds deceptively simple components How the JavaScript Maps SDK team builds deceptively simple components","description":"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.","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\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","og_locale":"en_US","og_type":"article","og_title":"How the JavaScript Maps SDK team builds deceptively simple components","og_description":"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2026-08-12T16:08:07+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components"},"author":{"name":"Supriya Kotturu","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/802a4c80f0136576d4bae311884c1630"},"headline":"How the JavaScript Maps SDK team builds deceptively simple components","datePublished":"2026-08-12T16:00:15+00:00","dateModified":"2026-08-12T16:08:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components"},"wordCount":10,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS Maps SDK for JavaScript"],"articleSection":["Developers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components","name":"How the JavaScript Maps SDK team builds deceptively simple components How the JavaScript Maps SDK team builds deceptively simple components","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2026-08-12T16:00:15+00:00","dateModified":"2026-08-12T16:08:07+00:00","description":"How I built my own library of web components while interning on the ArcGIS Maps SDK for JavaScript team.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-the-javascript-maps-sdk-team-builds-deceptively-simple-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How the JavaScript Maps SDK team builds deceptively simple components"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/802a4c80f0136576d4bae311884c1630","name":"Supriya Kotturu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/profile-213x200.jpeg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/08\/profile-213x200.jpeg","caption":"Supriya Kotturu"},"description":"I interned on the ArcGIS Maps SDKs for JavaScript team in Summer 2026, where I learned that a lot of engineering goes into making things look effortless, and also that you can put a cat on a map if you try hard enough. Over my career, I've also worked as a frontend engineer, and I write about my engineering misadventures on dev.to.","sameAs":["https:\/\/www.dev.to\/supriya-kotturu","https:\/\/www.linkedin.com\/in\/supriya-kotturu"],"gender":"female","worksFor":"ESRI","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/sup15027"}]}},"text_date":"August 12, 2026","author_name":"Supriya Kotturu","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/sup15027","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":769562,"name":"ArcGIS Maps SDK for JavaScript","slug":"arcgis-maps-sdk-for-javascript","term_group":0,"term_taxonomy_id":769562,"taxonomy":"post_tag","description":"","parent":0,"count":30,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":453,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":368,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2979678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/468682"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2979678"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2979678\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2979678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2979678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2979678"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2979678"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2979678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}