\n2) Visualization<\/a>
\n3) Developer Tooling and Methodologies<\/a>
\n4) Building a Great User Experience<\/a><\/p>\n
Let\u2019s dive into each of these categories, and then preview of some of the demos and concepts covered in select sessions.<\/p>\n
<\/a><\/p>\n Whether you are new to the JavaScript API or an advanced developer, these sessions help to build your knowledge of API architecture, capabilities, and programming patterns. <\/p>\n A look under the hood of the JavaScript API!<\/strong> For developers new to web development<\/strong> Migrating from 3.x or simply new to the API<\/strong> For developers ready to start developing 3D web apps<\/strong> <\/a><\/p>\n Using the API, you can build web apps that allow experts and novices alike to explore and understand their data faster, making better maps with more confidence and less effort. If you want to learn about the variety of techniques and capabilities available for creating stunning visualizations in 2D and 3D, there are plenty of sessions that might pique your interest. You don\u2019t need to be a cartographer to create beautiful, meaningful maps<\/strong> Create meaningful visualizations of large datasets \u2013 with fast performance<\/strong> Do you want to build a 3D web app but only have 2D data?<\/strong> Use Arcade to perform powerful client-side calculations for visualization, popups, and labeling<\/strong> <\/a><\/p>\n These sessions are all about making coding easier and faster as you build more complex and scalable applications. Watch these sessions to gain insight on topics such as integrating with 3rd party JavaScript Frameworks, architecting for enterprise deployment, or learning debugging tips and tricks. <\/p>\n Use the API with a 3rd<\/sup> party framework<\/strong> Cool kids use webpack and React<\/strong> <\/a><\/p>\n Building great apps doesn\u2019t end once the map and features have been added. Creating and designing a great experience for your end users is key to maximizing adoption and satisfaction of your applications. <\/p>\n Use client-side analytics to build interactive apps<\/strong> Feature layer editing in 2D or 3D!<\/strong>API fundamentals, architecture<\/h2>\n
\nArcGIS API for JavaScript: Programming Patterns and API Fundamentals<\/a>
\nArcGIS API for JavaScript: Working with Your Data Using the Feature Layer<\/a>
\nArcGIS API for JavaScript: Getting Started with Web Development<\/a>
\nArcGIS API for JavaScript: A Look under the Hood<\/a>
\nArcGIS API for JavaScript: What’s New<\/a>
\nA Holistic Approach to Building 3D Web Apps<\/a>
\nArcGIS API for JavaScript: Fundamentals for Building 3D Web Apps<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":833371,"id":833371,"title":"SF_building_explorer","filename":"SF_building_explorer-1.png","filesize":299670,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/arcgis-api-for-javascript-devsummit-2020-videos-available\/sf_building_explorer-2","alt":"","author":"4271","description":"","caption":"","name":"sf_building_explorer-2","status":"inherit","uploaded_to":827321,"date":"2020-04-22 19:01:57","modified":"2020-04-22 19:01:57","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":1538,"height":685,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","medium-width":464,"medium-height":207,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","medium_large-width":768,"medium_large-height":342,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","large-width":1538,"large-height":685,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1-1536x684.png","1536x1536-width":1536,"1536x1536-height":684,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","2048x2048-width":1538,"2048x2048-height":685,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1-826x368.png","card_image-width":826,"card_image-height":368,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/SF_building_explorer-1.png","wide_image-width":1538,"wide_image-height":685}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/sanfrancisco-buildings\/"},{"acf_fc_layout":"content","content":"Check out the inside scoop on some of these sessions:<\/strong><\/summary>\n
\nFor the first time, we offered a session covering the underlying design of the JavaScript API and the technologies that power it – presented by two of our lead API developers. The ArcGIS API for JavaScript: A Look under the Hood<\/em> session covers some of the key components the team developed to enable fast display of huge datasets, and then demonstrates how you can apply some of the same techniques to your own web apps. They have a variety of apps shared in this repo<\/a> that illustrate concepts covered in the session.<\/p>\n
\nIf you are brand new to web development and\/or developing with the API, you might want to start with ArcGIS API for JavaScript: Getting Started with Web Development<\/em>. It covers the basics of setting up your development environment, fundamental debugging techniques, and tips for using the online SDK. It also covers patterns and practices for integration with your WebGIS and working with data and widgets. Find all of the example apps featured in this session in this repo<\/a>.<\/p>\n
\nIf you are coming up to speed on the API \u2013 either as someone transitioning from 3.x, or are simply new to the API all together \u2013 ArcGIS API for JavaScript Programming Patterns and API Fundamentals<\/em> is a key session for you. It covers the basics of the ArcGIS API 4.x for JavaScript, for example, watching for property changes, working with collections, and lazy-loading data in your applications. It also covers details about maps, webmaps, layers, 2D and 3D views, UI, and widgets. Some of the demos shown are about widget view models<\/a>, zoom and scale<\/a>, and layer views<\/a>.<\/p>\n
\nAre you ready to create your first 3D web app? Start with the A Holistic Approach to Building 3D Web Apps <\/em>session. It is a practical session that covers the full workflow of authoring web scenes in ArcGIS Online and Enterprise all the way to building interactive 3D web apps. Learn the concepts behind creating this San Francisco building explorer<\/a>, an interactive application to explore buildings in a city by construction date, height, and building usage. The <\/em>ArcGIS API for JavaScript: Fundamentals for Building 3D Web Apps<\/em> session then goes a bit deeper by taking you through the fundamental 3D building blocks of the API: SceneView, 2D and 3D layers, terrain, and symbology.<\/p>\n<\/details>\n"},{"acf_fc_layout":"content","content":"Visualization<\/h2>\n
\nArcGIS API for JavaScript: 2D Visualization<\/a>
\nBest Practices for Building Web Apps that Visualize Large Datasets<\/a>
\nCustomizing and Styling Vector Basemaps<\/a>
\nArcGIS API for JavaScript: Practical Guide for Building a 3D Web App from 2D Data<\/a>
\nArcGIS API for JavaScript: Building Custom Visualizations Using WebGL in 2D Map Views<\/a>
\nArcGIS API for JavaScript: Using Arcade with Your Apps<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":833581,"id":833581,"title":"one_ocean","filename":"one_ocean-1.png","filesize":413026,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/arcgis-api-for-javascript-devsummit-2020-videos-available\/one_ocean-2","alt":"","author":"4271","description":"","caption":"","name":"one_ocean-2","status":"inherit","uploaded_to":827321,"date":"2020-04-22 19:16:53","modified":"2020-04-22 19:16:53","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":1542,"height":685,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","medium_large-width":768,"medium_large-height":341,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","large-width":1542,"large-height":685,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1-1536x682.png","1536x1536-width":1536,"1536x1536-height":682,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","2048x2048-width":1542,"2048x2048-height":685,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1-826x367.png","card_image-width":826,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/one_ocean-1.png","wide_image-width":1542,"wide_image-height":685}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/conferences\/ds-2020\/plenary\/one-ocean\/index.html"},{"acf_fc_layout":"content","content":"Check out the inside scoop on some of these sessions:<\/strong><\/summary>\n
\nThe ArcGIS API for JavaScript: 2D Visualization<\/em> session demonstrates how to create a progression of multiple visualizations with the same dataset. It highlights what each visualizes well and what they don\u2019t visualize well. It uses Arcade expressions and visual variables to give you different perspectives of the data. Here is one of the apps<\/a> demonstrated; the full repo is here<\/a>.<\/p>\n
\nThe Best Practices for Building Web Apps that Visualize Large Datasets<\/em> session describes the process for preparing the data in the One Ocean app<\/a> so it can be effectively rendered and explored in the browser. The data started from 52 million points (4 GB) and resulted in 85,000 points with hundreds of attributes (280 MB) after processing by the developer and the ArcGIS platform. The full repo is here<\/a>.<\/p>\n
\nIn the Practical Guide for Building a 3D Web App from 2D Data<\/em> session, Raluca and Kristian show four examples of 3D maps built with 2D data and Esri\u2019s world elevation service. Among others, this talk explains the main API features for building a 3D ski resort map of Mammoth<\/a> in a low poly style. In another example<\/a>, they show how to visualize trees with real world sizes using a 3D model provided out-of-the-box in the API. The underlying data is a 2D point FeatureLayer with attributes for height, width, and tree species. You don’t need to create your own complicated 3D model; just use what the API already provides. The full repo is here<\/a>.<\/p>\n
\nSometimes simple calculations can provide more insight than field values when creating data-driven visualizations. The ArcGIS API for JavaScript: Using Arcade with your Apps<\/em> session covers techniques for developing your skills and applying Arcade in your apps. For example, this app<\/a> has a popup that uses an Arcade expression to compare an attribute value for the clicked\/highlighted feature to the same value of all of its neighbors (the polygons that share a boundary with it). This is possible using Arcade feature sets in conjunction with the geometry engine. The full repo is here<\/a>.<\/p>\n<\/details>\n"},{"acf_fc_layout":"content","content":"Developer tooling & methodologies<\/h2>\n
\nArcGIS API for JavaScript: Using Frameworks<\/a>
\nArcGIS API for JavaScript: Using React and Webpack<\/a>
\nArcGIS API for JavaScript: Using TypeScript<\/a>
\nArcGIS API for JavaScript: Building Progressive Web Apps<\/a>
\nArcGIS API for JavaScript: Building Apps with Angular<\/a>
\nJavascript Applications for the Enterprise: Building for Production<\/a>
\nJavascript Applications for the Enterprise: Test More, Work Less<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":833621,"id":833621,"title":"progressive-webapps","filename":"progressive-webapps-1.png","filesize":377045,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/arcgis-api-for-javascript-devsummit-2020-videos-available\/progressive-webapps-2","alt":"","author":"4271","description":"","caption":"","name":"progressive-webapps-2","status":"inherit","uploaded_to":827321,"date":"2020-04-22 19:21:08","modified":"2020-04-22 19:21:08","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":2000,"height":889,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1.png","medium_large-width":768,"medium_large-height":341,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1.png","large-width":1920,"large-height":853,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1-1536x683.png","1536x1536-width":1536,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1.png","2048x2048-width":2000,"2048x2048-height":889,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1-826x367.png","card_image-width":826,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/progressive-webapps-1-1920x853.png","wide_image-width":1920,"wide_image-height":853}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/example-apps\/nearby-places\/"},{"acf_fc_layout":"content","content":"Check out the inside scoop on some of these sessions:<\/strong><\/summary>\n
\nWe have seen growing interest to integrate the API with 3rd<\/sup> party frameworks for building scalable apps. The ArcGIS API for JavaScript: Using Frameworks <\/em>session covers the frameworks that are the most popular in our developer community. Walk-through examples showcase integration with Angular<\/a> (in this\u00a0sample apps<\/a>\u00a0directory you will find a number of implementations of the JS API in Angular applications), React<\/a>, Svelte<\/a>, and Vue<\/a>.<\/p>\n
\nIf you want to learn how you can use React to build fast and responsive applications that uses modern tooling and techniques, watch ArcGIS API for JavaScript: Using Webpack and React.<\/em> Rene and Tom discuss concepts for building this Nearby app<\/a> which uses React and webpack, and using esri-loader<\/a> with webpack for your React applications.<\/p>\n<\/details>\n"},{"acf_fc_layout":"content","content":"Build a great user experience<\/h2>\n
\nArcGIS API for JavaScript: Web Editing in 2D and 3D<\/a>
\nArcGIS API for JavaScript: Customizing the JavaScript Widgets<\/a>
\nArcGIS API for JavaScript: Building Your Own Widget<\/a>
\nArcGIS API for JavaScript: Client-side Mapping and Analytics<\/a>
\nAccessible Web Mapping Apps: ARIA, WCAG and 508 Compliance<\/a>
\nArcGIS API for JavaScript: Create Participatory 3D Web Apps Using BIM- and Editing Capabilities<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":833701,"id":833701,"title":"filter_and_effect","filename":"filter_and_effect-1.png","filesize":60969,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/arcgis-api-for-javascript-devsummit-2020-videos-available\/filter_and_effect-2","alt":"","author":"4271","description":"","caption":"","name":"filter_and_effect-2","status":"inherit","uploaded_to":827321,"date":"2020-04-22 19:25:58","modified":"2020-04-22 19:25:58","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":1538,"height":681,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","medium-width":464,"medium-height":205,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","medium_large-width":768,"medium_large-height":340,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","large-width":1538,"large-height":681,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1-1536x680.png","1536x1536-width":1536,"1536x1536-height":680,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","2048x2048-width":1538,"2048x2048-height":681,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1-826x366.png","card_image-width":826,"card_image-height":366,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/filter_and_effect-1.png","wide_image-width":1538,"wide_image-height":681}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ycabon.github.io\/2019-devsummit-plenary\/3_filter_effect.html"},{"acf_fc_layout":"content","content":"Check out the inside scoop on some of these sessions<\/strong><\/summary>\n
\nOne of the most powerful aspects of the API is the ability to perform client-side analytics such as querying, statistics, filtering, and geometry operations. The ArcGIS API for JavaScript: Client-side Mapping and Analytics<\/em> session covers the core programming patterns for building client-side tech with demos such as client-side filters<\/a>, filters and effects \u2013 a look at a century of earthquakes<\/a>, and measuring how far the Mars Curiosity is from Opportunity<\/a>.<\/p>\n
\nLast year, we released the Editor widget which allows you to incorporate the full end-to-end editing workflow with minimal code. With version 4.15, you can now edit feature layers in 3D scenes as well! The ArcGIS API for JavaScript: Web Editing in 2D and 3D<\/em> session covers both 2D and 3D editing \u2013 from the simplest scenarios to apps with more advanced, custom workflows. Check out this cool 3D app<\/a> that they use to demonstrate editing in 3D scenes (click on the camera or ball to move around the view point). More demos from this session are here<\/a>.<\/p>\n
"}],"related_articles":[{"ID":830171,"post_author":"6561","post_date":"2020-04-27 09:00:42","post_date_gmt":"2020-04-27 16:00:42","post_content":"","post_title":"Mapping large datasets on the web","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"mapping-large-datasets-on-the-web","to_ping":"","pinged":"","post_modified":"2020-04-23 16:18:49","post_modified_gmt":"2020-04-23 23:18:49","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=830171","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"3","filter":"raw"},{"ID":785891,"post_author":"4271","post_date":"2020-04-09 11:45:27","post_date_gmt":"2020-04-09 18:45:27","post_content":"","post_title":"What\u2019s New in ArcGIS API for JavaScript (April 2020)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-april-2020","to_ping":"","pinged":"","post_modified":"2020-04-09 11:46:31","post_modified_gmt":"2020-04-09 18:46:31","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=785891","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":826541,"post_author":"9302","post_date":"2020-04-22 06:44:52","post_date_gmt":"2020-04-22 13:44:52","post_content":"","post_title":"A low poly ski resort map - part I: generating the terrain","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"low-poly-ski-resort-map-1","to_ping":"","pinged":"","post_modified":"2020-06-17 06:14:44","post_modified_gmt":"2020-06-17 13:14:44","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=826541","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":782101,"post_author":"7531","post_date":"2020-03-26 09:21:44","post_date_gmt":"2020-03-26 16:21:44","post_content":"","post_title":"Writing Modern JavaScript with the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"writing-modern-javascript-with-the-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2020-03-26 09:21:44","post_modified_gmt":"2020-03-26 16:21:44","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=782101","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\/04\/salinity-currents-card.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/salinity-currents-banner4.jpg"},"yoast_head":"\n