{"id":782101,"date":"2020-03-26T09:21:44","date_gmt":"2020-03-26T16:21:44","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=782101"},"modified":"2020-03-26T09:21:44","modified_gmt":"2020-03-26T16:21:44","slug":"writing-modern-javascript-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript","title":{"rendered":"Writing Modern JavaScript with the ArcGIS API for JavaScript"},"author":7531,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[96582,38851,27491,176452,36161],"industry":[],"product":[36831,36601],"class_list":["post-782101","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-api-for-javascript","tag-developers","tag-jsapi4","tag-mapping","tag-web-development","product-js-api-arcgis","product-developers"],"acf":{"short_description":"A look at how you can use modern standard JavaScript syntax today with the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

During th<\/span><\/span>is\u00a0<\/span><\/span>year’s<\/span><\/span>\u00a0<\/span><\/span>Esri<\/span><\/span>\u00a0Developer Summit Plenary, Jeremy Bartley announced we are working towards adding\u00a0<\/span><\/span>native support for\u00a0<\/span><\/span>Java<\/span><\/span>Script M<\/span><\/span>odules<\/span><\/span><\/a>\u00a0in addition to the AMD modules we currently deliver via the CDN.<\/span><\/span> Modern JavaScript syntax will let you write more concise code that will be portable across multiple web development tools.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

Let\u2019s examine what the\u00a0<\/span><\/span>existing\u00a0<\/span><\/span>syntax for AMD modules looks like<\/span><\/span>.<\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

\r\nrequire<\/span>(\r\n  [\"esri\/views\/MapView\"<\/span>, \"esri\/WebMap\"<\/span>],\r\n  function<\/span>(MapView, WebMap) {\r\n    var<\/span> webmap = new<\/span> WebMap({\r\n      portalItem: {\r\n        id: \"f2e9b762544945f390ca4ac3671cfa72\"<\/span>\r\n      }\r\n    });\r\n\r\n    var<\/span> view = new<\/span> MapView({\r\n      map: webmap,\r\n      container: \"viewDiv\"<\/span>\r\n    });\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
There are numerous reasons for this legacy pattern, mainly due to the size and feature capabilities of the API. Consider when you load a WebMap, that WebMap could have any number of different layer types or projections<\/span><\/span> and we support them all.<\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
\r\nimport<\/span> WebMap from<\/span> \"esri\/WebMap\"<\/span>;\r\nimport<\/span> MapView from<\/span> \"esri\/views\/MapView\"<\/span>;\r\n\r\nconst<\/span> webmap = new<\/span> WebMap({\r\n  portalItem: {\r\n    id: \"f2e9b762544945f390ca4ac3671cfa72\"<\/span>\r\n  }\r\n});\r\n\r\nconst<\/span> view = new<\/span> MapView({\r\n  map: webmap,\r\n  container: \"viewDiv\"<\/span>\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
To be clear, this is not natively supported by the API today, but it will be later this year!<\/span><\/span> We will also continue to provide AMD modules via our CDN, so you don\u2019t need to rewrite any existing applications.<\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
How to write modern JavaScript now<\/h2>\n"},{"acf_fc_layout":"content","content":"
Just because this doesn\u2019t work natively today doesn\u2019t mean you can\u2019t begin writing your JavaScript in a modern <\/span><\/span>standard\u00a0<\/span><\/span>syntax<\/span><\/span>\u00a0now. There are\u00a0<\/span><\/span>several<\/span><\/span>\u00a0build tools that developers have at their disposal to compile JavaScr<\/span><\/span>ipt from one\u00a0<\/span><\/span>syntax<\/span><\/span> to another.<\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
Here is a\u00a0<\/span><\/span>sample application<\/span><\/span><\/a> built with the ArcGIS API for JavaScript that is configured to use modern <\/span><\/span>standard JavaScript syntax with the existing AMD modules from the CDN<\/span><\/span>. This approach will allow you to begin using this modern syntax today<\/span><\/span>.<\/span><\/span> Y<\/span>ou can use this basic application as a starting point for your own projects. Here is what one of the <\/span><\/span>files looks like.<\/span><\/span>\u00a0<\/span><\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
\r\nimport<\/span> FeatureLayer from<\/span> 'esri\/layers\/FeatureLayer'<\/span>;\r\nimport<\/span> TileLayer from<\/span> 'esri\/layers\/TileLayer'<\/span>;\r\nimport<\/span> VectorTileLayer from<\/span> 'esri\/layers\/VectorTileLayer'<\/span>;\r\nimport<\/span> ArcGISMap from<\/span> 'esri\/Map'<\/span>;\r\n\r\nexport<\/span> const<\/span> featureLayer = new<\/span> FeatureLayer({\r\n  portalItem: {\r\n    id: 'b234a118ab6b4c91908a1cf677941702'<\/span>\r\n  },\r\n  outFields: ['NAME'<\/span>, 'STATE_NAME'<\/span>, 'VACANT'<\/span>, 'HSE_UNITS'<\/span>],\r\n  title: 'U.S. counties'<\/span>,\r\n  opacity: 0.8<\/span>\r\n});\r\n\r\nexport<\/span> const<\/span> map = new<\/span> ArcGISMap({\r\n  basemap: {\r\n    baseLayers: [\r\n      new<\/span> TileLayer({\r\n        portalItem: {\r\n          \/\/ world hillshade<\/span>\r\n          id: '1b243539f4514b6ba35e7d995890db1d'<\/span>\r\n        }\r\n      }),\r\n      new<\/span> VectorTileLayer({\r\n        portalItem: {\r\n          \/\/ topographic<\/span>\r\n          id: '7dc6cea0b1764a1f9af2e679f642f0f5'<\/span>\r\n        }\r\n      })\r\n    ]\r\n  },\r\n  layers: [featureLayer]\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
That\u2019s not much different than what you might write today, but it uses the modern import syntax and as you can see also an export syntax for some values. This will let you import these values in other parts of your application.<\/span><\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
\r\n\/\/ Map data<\/span>\r\nimport<\/span> { featureLayer, map } from<\/span> '.\/data\/app'<\/span>;\r\n\r\n\/\/ MapView<\/span>\r\nimport<\/span> MapView from<\/span> 'esri\/views\/MapView'<\/span>;\r\n\r\n\/**\r\n * Initialize application\r\n *\/<\/span>\r\nconst<\/span> view = new<\/span> MapView({\r\n  container: 'viewDiv'<\/span>,\r\n  map\r\n});\r\n\r\nfeatureLayer.when(() => {\r\n  view.goTo(featureLayer.fullExtent);\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Here, I\u2019m able to import values from other parts of my application. This allows me to keep my code modular, which makes it easier to maintain and\u00a0<\/span>test moving forward. <\/span>This is a quick way for you to begin writing your applications in a modern\u00a0<\/span>standard\u00a0<\/span>syntax<\/span>\u00a0and getting familiar with the latest JavaScript features today, so you can better prepare yourself for tomorrow!<\/span>\u00a0<\/span><\/p>\n"}],"authors":[{"ID":7531,"user_firstname":"Rene","user_lastname":"Rubalcava","nickname":"r.rubalcava","user_nicename":"r-rubalcava","display_name":"Rene Rubalcava","user_email":"RRubalcava@esri.com","user_url":"http:\/\/odoe.net\/","user_registered":"2018-03-21 18:21:22","user_description":"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks.\r\n\r\nI blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava\r\n\r\nI write code, sometimes it even works.","user_avatar":""}],"related_articles":[{"ID":719182,"post_author":"4271","post_date":"2020-02-13 09:46:55","post_date_gmt":"2020-02-13 17:46:55","post_content":"","post_title":"Using GeoJSON layers and more in the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"using-geojson-layers-and-more-in-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2020-02-13 10:36:37","post_modified_gmt":"2020-02-13 18:36:37","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=719182","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":195412,"post_author":"7531","post_date":"2018-06-21 16:03:06","post_date_gmt":"2018-06-21 16:03:06","post_content":"","post_title":"Introducing a cli for the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"introducing-a-cli-for-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2018-06-21 16:03:06","post_modified_gmt":"2018-06-21 16:03:06","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=195412","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":304002,"post_author":"3801","post_date":"2018-08-23 10:24:04","post_date_gmt":"2018-08-23 17:24:04","post_content":"","post_title":"Migrating Web Apps from Google to ArcGIS: Searching and Geocoding","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"migrating-web-apps-from-google-to-arcgis-searching-and-geocoding","to_ping":"","pinged":"","post_modified":"2018-08-30 10:28:17","post_modified_gmt":"2018-08-30 17:28:17","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=304002","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/03\/Writing-Modern-JavaScript-with-the-ArcGIS-API-for-JavaScript.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/03\/modern-jsapi-js.jpg"},"yoast_head":"\nWriting Modern JavaScript with the ArcGIS API for JavaScript<\/title>\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\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Writing Modern JavaScript with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\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\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Rene Rubalcava\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd\"},\"headline\":\"Writing Modern JavaScript with the ArcGIS API for JavaScript\",\"datePublished\":\"2020-03-26T16:21:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\"},\"wordCount\":9,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS API for JavaScript\",\"Developers\",\"jsapi4\",\"mapping\",\"Web Development\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\",\"name\":\"Writing Modern JavaScript with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-03-26T16:21:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Writing Modern JavaScript with the ArcGIS API for JavaScript\"}]},{\"@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\/5e8200af39ef9d178ccabb08822d96cd\",\"name\":\"Rene Rubalcava\",\"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\/2021\/03\/ReneRubalcava-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png\",\"caption\":\"Rene Rubalcava\"},\"description\":\"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks. I blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava I write code, sometimes it even works.\",\"sameAs\":[\"http:\/\/odoe.net\/\",\"https:\/\/www.facebook.com\/odoenetgeo\/\",\"https:\/\/www.linkedin.com\/in\/renerubalcava\",\"https:\/\/x.com\/odoenet\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/r-rubalcava\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Writing Modern JavaScript with the ArcGIS API for JavaScript","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\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Writing Modern JavaScript with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript"},"author":{"name":"Rene Rubalcava","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd"},"headline":"Writing Modern JavaScript with the ArcGIS API for JavaScript","datePublished":"2020-03-26T16:21:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS API for JavaScript","Developers","jsapi4","mapping","Web Development"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript","name":"Writing Modern JavaScript with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-03-26T16:21:44+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/writing-modern-javascript-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Writing Modern JavaScript with the ArcGIS API for JavaScript"}]},{"@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\/5e8200af39ef9d178ccabb08822d96cd","name":"Rene Rubalcava","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\/2021\/03\/ReneRubalcava-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png","caption":"Rene Rubalcava"},"description":"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks. I blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava I write code, sometimes it even works.","sameAs":["http:\/\/odoe.net\/","https:\/\/www.facebook.com\/odoenetgeo\/","https:\/\/www.linkedin.com\/in\/renerubalcava","https:\/\/x.com\/odoenet"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/r-rubalcava"}]}},"text_date":"March 26, 2020","author_name":"Rene Rubalcava","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/r-rubalcava","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/03\/modern-jsapi-js.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":96582,"name":"ArcGIS API for JavaScript","slug":"arcgis-api-for-javascript","term_group":0,"term_taxonomy_id":96582,"taxonomy":"post_tag","description":"","parent":0,"count":58,"filter":"raw"},{"term_id":38851,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":38851,"taxonomy":"post_tag","description":"","parent":0,"count":78,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":176452,"name":"mapping","slug":"mapping","term_group":0,"term_taxonomy_id":176452,"taxonomy":"post_tag","description":"","parent":0,"count":60,"filter":"raw"},{"term_id":36161,"name":"Web Development","slug":"web-development","term_group":0,"term_taxonomy_id":36161,"taxonomy":"post_tag","description":"","parent":0,"count":19,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/782101","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\/7531"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=782101"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/782101\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=782101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=782101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=782101"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=782101"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=782101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The modern JavaScript equivalent of this would use the\u00a0<\/span><\/span>import<\/span><\/span><\/a>\u00a0statement to load these\u00a0<\/span><\/span>modules.<\/span><\/span><\/a>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"