ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript:...
Transcript of ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript:...
![Page 1: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript: Building Mobile Web Apps
Andy Gup@agup
![Page 2: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/2.jpg)
Agenda
• Responsive design• Popups and Widgets• Hybrid Approaches• Geolocation• Performance and Usability
![Page 3: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/3.jpg)
Responsive Map App Design
• Support a variety of screens• Uses breakpoints• Fluid design
![Page 4: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/4.jpg)
Support a variety of screens
![Page 5: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/5.jpg)
Responsive Popups
• Demo 1 – dockable popup
• Popup.docEnabled, Popup.docOptions
• Demo 2 - docEnabled
![Page 6: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/6.jpg)
Widgets important for Mobile
• Demo 1 - Home• Demo 2 - Locate• Demo 3 - Compass
![Page 7: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/7.jpg)
Hybrid = JavaScript + Native
There are several frameworks…here are a few examples
Provides access to native functionalitye.g. Geolocation, Bluetooth, SQLite, Touch ID
![Page 8: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/8.jpg)
Cordova/PhoneGap
github.com/Esri/quickstart-map-phonegap
github.com/Esri/cordova-plugin-advanced-geolocation
![Page 9: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/9.jpg)
Ionic (Angular + Cordova)
github.com/andygup/ionic2-esri-map
![Page 10: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/10.jpg)
Geolocation
github.com/Esri/html5-geolocation-tool-js
github.com/Esri/cordova-plugin-advanced-geolocation
![Page 11: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/11.jpg)
Mobile Web Map Performance
Smart device vs Laptop
UI Jerkiness
Improving the mobile experience
![Page 12: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/12.jpg)
Smart device vs. Laptop
Often significantly less user memorySlower application loading/performanceMobile internet speeds fluctuate widely
VS
![Page 13: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/13.jpg)
UI Jerkiness (Jank)
Interruptions in frame production (fps) and latency
Temporary app lockupsScrolling latencySlow app responseBrowser warning messagesBrowser crashes
![Page 14: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/14.jpg)
UI Jerkiness (Jank)
Caused by ANY operation taking longer than
16ms*• ~60Hz or 60 FPSDemo
![Page 15: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/15.jpg)
UI Jerkiness (Jank)
Significant jank can lead to:- Decreased usability- Decreased productivity- User frustration- Lack of user return visits
![Page 16: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/16.jpg)
Common Causes of UI Jerkiness (Jank)
Slow(er) internet – delays in loadingDownloading large files or many filesHeavy processing on main threadDOM layout thrashing
![Page 17: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/17.jpg)
Improving Mobile Experience
Simplify!
Lazy load content
Use fewer map layers
Specify outfields on feature layers
Simplify rendering
Use Web Workers
![Page 18: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/18.jpg)
Lazy load content
Defer the initialization of Classes
Demo
![Page 19: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/19.jpg)
Lazy Load Content
Defer loading layers with Map.add() or Map.addMany()
![Page 20: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/20.jpg)
Use fewer layers for mobile
Fewer layers == better performance and less memory usage!
Fewer layers take less time to load
Remove unused layers via Map.remove()
![Page 21: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/21.jpg)
Specify outfields on feature layers
Reduce response payload size and avoid using:
featureLayer.outFields = [“*”];
Instead, only specify what you need, for example:
featureLayer.outFields = [“Name”, “OBJECTID”, “Address”];
![Page 22: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/22.jpg)
Simplify Rendering
Set a FeatureLayer.definitionExpression where possible• Reduces number of features looped by Renderer• Speeds up rendering
Demo 1 – Basic Definition ExpressionDemo 2 – Definition Express + Arcade
![Page 23: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/23.jpg)
Use Web Workers
Where possible, move heavy processing off main thread
Demo 1 – Earthquake GeoJSON feedDemo 2 – esri/core/workers
![Page 24: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/24.jpg)
Chrome Lighthouse
• Chrome add-in
![Page 25: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/25.jpg)
Wrap-up!
Best practices for mobile web mapping apps
Use progressive web development patterns
Eliminate user interface jerkiness/jank
Looks for small tweaks to get big performance gains
![Page 27: ArcGIS API for JavaScript: Building Mobile Web Apps · 2019-03-14 · ArcGIS API for JavaScript: Building Mobile Web Apps Author: Esri Subject: 2019 DevSummit DC -- Presentation Keywords:](https://reader031.fdocuments.us/reader031/viewer/2022011822/5ec56f94c82f0c182427b0ea/html5/thumbnails/27.jpg)