![Page 1: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/1.jpg)
ArcGIS API for JavaScript
Building Mobile Web Apps
Andy Gup, @agup
Lloyd Heberlie, @lheberlie
![Page 2: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/2.jpg)
Agenda
•Expectations
•Designing for Mobile
•Debugging
•Frameworks
•Geolocation
![Page 3: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/3.jpg)
Expections
![Page 4: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/4.jpg)
Lloyd Heberlie
Mobile resources in the API
![Page 5: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/5.jpg)
Lloyd Heberlie
Designing for mobile
![Page 6: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/6.jpg)
Lloyd Heberlie
Touch
![Page 7: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/7.jpg)
HTML 5 input types
type=“email” type=“tel” type=“date”
![Page 8: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/8.jpg)
BasemapGallery
![Page 9: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/9.jpg)
BasemapToggle
![Page 10: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/10.jpg)
BasemapToggle
![Page 11: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/11.jpg)
Home
![Page 12: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/12.jpg)
LayerList
![Page 13: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/13.jpg)
LayerList action
![Page 14: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/14.jpg)
Compass
![Page 15: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/15.jpg)
Locate
![Page 16: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/16.jpg)
Lloyd Heberlie
Locate
![Page 17: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/17.jpg)
Popups
![Page 18: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/18.jpg)
Calcite Maps - Settings
![Page 19: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/19.jpg)
Calcite Maps - Settings
![Page 20: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/20.jpg)
Calcite Maps - Basemaps
![Page 21: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/21.jpg)
Calcite Maps - Basemaps
![Page 22: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/22.jpg)
Demo
Designing for Mobile
![Page 23: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/23.jpg)
Productivity and code
management
![Page 24: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/24.jpg)
Setup a developer machine
Source Control
Code quality and verification
web server
![Page 25: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/25.jpg)
Code formatting and management
![Page 26: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/26.jpg)
Automation and continuous integration
![Page 27: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/27.jpg)
• JSLint
• JSHint
•ESLint
Code validation
![Page 28: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/28.jpg)
CSS preprocessors
![Page 29: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/29.jpg)
Lloyd Heberlie
Productivity and code
management
![Page 30: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/30.jpg)
Mobile media queries
macOS
Android
iPhone
iPad
![Page 31: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/31.jpg)
JavaScript media queries
![Page 32: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/32.jpg)
Recorded session
• Building Responsive Web Apps with the ArcGIS API for JavaScript
- Wednesday, March 08
- 10:30 am - 11:30 am
- Pasadena-Sierra-Ventura
![Page 33: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/33.jpg)
Lloyd Heberlie
Debugging and testing
for mobile
![Page 34: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/34.jpg)
Physical devices
http://blog.adtile.me/2014/01/08/adtile-device-lab/
![Page 35: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/35.jpg)
Remote debugging
•Safari Web Inspector Remote
•Google Chrome remote debugging
•http://livereload.com/
•Browser-sync
![Page 36: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/36.jpg)
Enable iOS remote web inspection
![Page 37: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/37.jpg)
Enable Android remote web inspection
![Page 38: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/38.jpg)
Safari remote debugging
![Page 39: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/39.jpg)
Demo
Debugging Mobile
![Page 40: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/40.jpg)
Responsive Frameworks and other
Libraries
![Page 41: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/41.jpg)
Why use a responsive framework?
Productivity
HTML Elements
Themes/CSS
Boilerplate layout
Large app scafolding
JavaScript API
![Page 42: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/42.jpg)
github.com/esri
Library
(github.com/esri)JS API v3.x JS API v4.x
boostrap-map-js 3 Use Calcite-
maps
jquery-mobile-map-js 3 Not needed
angular-esri-map 3 3
calcite-maps 3
![Page 43: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/43.jpg)
github.com/esri (cont’d)
Framework
(github.com/esri)JS API v3.x JS API v4.x
Phonegap/Cordova 3 3
![Page 44: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/44.jpg)
JavaScript Mobile Frameworks
There are many…here are a few examples.
![Page 45: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/45.jpg)
PhoneGap/Cordova
github.com/Esri/quickstart-map-phonegap
github.com/Esri/cordova-plugin-advanced-geolocation
![Page 46: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/46.jpg)
Ionic
github.com/jwasilgeo/ionic-esri-map
github.com/andygup/ionic2-esri-map
![Page 47: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/47.jpg)
Geolocation
https://github.com/Esri/html5-geolocation-tool-js
https://github.com/Esri/cordova-plugin-advanced-
geolocation
![Page 48: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/48.jpg)
Mobile Performance
![Page 49: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/49.jpg)
Smartphone vs Your Laptop
Less memory, less powerful CPU
App performance not the same
Mobile internet speeds fluctuate and/or limited
![Page 50: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/50.jpg)
Performance
Focus on small tweaks with BIG gains!
![Page 51: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/51.jpg)
UI Jank (freezing or jerkiness)
Interruptions in frame production (fps) and latency
Temporary app lockups
Scrolling latency
Slow app response
Browser warning messages
Browser crashes
![Page 52: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/52.jpg)
Jank can be
caused by any operation greater than…
16ms** ~60Hz or 60 FPS
![Page 53: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/53.jpg)
UI Jank (freezing or jerkiness)
Significant jank can lead to:
- Decreased usability
- Decreased productivity
- User frustration
- Lack of user return visits
![Page 54: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/54.jpg)
Common causes of Jank
Slow(er) internet – delays in loading
Downloading large files
Heavy processing on main thread
DOM layout thrashing
![Page 55: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/55.jpg)
Improve UI experience
Spinners & progress bars
![Page 56: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/56.jpg)
Improve UI experience
If appropriate consider a Splash Screen or a log-in
screen
Lazy-load map and layers in background
DEMO
![Page 57: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/57.jpg)
Improve UI experience
Use Chrome profiler tools
Look for small changes with BIG impact
![Page 58: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/58.jpg)
Improve UI experience
Measure time to complete tasks (1/1000 ms)
console.time(“doSomething”);
. . .
console.timeEnd(“doSomething”);
![Page 59: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/59.jpg)
Improve UI experience – web workers
Parsing large data sets
DOWNLOAD TIME
PARSING TIME
RENDERING TIME
TOTAL TIME EXPERIENCED BY USER
![Page 60: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/60.jpg)
Improve UI experience
Consider using web workers to parse data
Demos parsing an ~780KB GeoJSON file:No web worker - very slowww
1 web worker - faster
2 web workers – fastest
Blog Post: http://www.andygup.net/advanced-
web-worker-performance/
![Page 61: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/61.jpg)
Improve HTTP response times
Limit the Extent for feature services
Make sure server uses gzip compression!
DEMO
![Page 62: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/62.jpg)
Wrap up
Mobile is not desktop
Remote debugging
Special performance considerations
![Page 63: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/63.jpg)
Resources
•https://github.com/lheberlie/mobile-webapps-js
•https://github.com/lheberlie/mobile-webapps-
js/blob/develop/Resources.md
•http://buildingadevicelab.com/
![Page 64: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/64.jpg)
Please fill out survey!
•Get Esri Events app on Google Play or AppStore
•Find this technical session
•Scroll towards bottom under Feedback
![Page 65: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/65.jpg)
Andy Gup
@agup
Lloyd Heberlie
![Page 66: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/66.jpg)
Feedback
![Page 67: ArcGIS API for JavaScript Building Mobile Web Appsproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Setup a developer machine Source Control Code quality and](https://reader031.vdocuments.us/reader031/viewer/2022013017/5bda2e7c09d3f2f6758c30ac/html5/thumbnails/67.jpg)