arcgis api for javascript building mobile web...
TRANSCRIPT
ArcGIS API for JavaScript
Building Mobile Web Apps
Andy Gup, @agup
Lloyd Heberlie, @lheberlie
Agenda
•Expectations
•Designing for Mobile
•Debugging
•Frameworks
•Geolocation
Expections
Lloyd Heberlie
Mobile resources in the API
Lloyd Heberlie
Designing for mobile
Lloyd Heberlie
Touch
HTML 5 input types
type=“email” type=“tel” type=“date”
BasemapGallery
BasemapToggle
BasemapToggle
Home
LayerList
LayerList action
Compass
Locate
Lloyd Heberlie
Locate
Popups
Calcite Maps - Settings
Calcite Maps - Settings
Calcite Maps - Basemaps
Calcite Maps - Basemaps
Demo
Designing for Mobile
Productivity and code
management
Setup a developer machine
Source Control
Code quality and verification
web server
Code formatting and management
Automation and continuous integration
• JSLint
• JSHint
•ESLint
Code validation
CSS preprocessors
Lloyd Heberlie
Productivity and code
management
Mobile media queries
macOS
Android
iPhone
iPad
JavaScript media queries
Recorded session
• Building Responsive Web Apps with the ArcGIS API for JavaScript
- Wednesday, March 08
- 10:30 am - 11:30 am
- Pasadena-Sierra-Ventura
Lloyd Heberlie
Debugging and testing
for mobile
Physical devices
http://blog.adtile.me/2014/01/08/adtile-device-lab/
Remote debugging
•Safari Web Inspector Remote
•Google Chrome remote debugging
•http://livereload.com/
•Browser-sync
Enable iOS remote web inspection
Enable Android remote web inspection
Safari remote debugging
Demo
Debugging Mobile
Responsive Frameworks and other
Libraries
Why use a responsive framework?
Productivity
HTML Elements
Themes/CSS
Boilerplate layout
Large app scafolding
JavaScript API
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
github.com/esri (cont’d)
Framework
(github.com/esri)JS API v3.x JS API v4.x
Phonegap/Cordova 3 3
JavaScript Mobile Frameworks
There are many…here are a few examples.
PhoneGap/Cordova
github.com/Esri/quickstart-map-phonegap
github.com/Esri/cordova-plugin-advanced-geolocation
Ionic
github.com/jwasilgeo/ionic-esri-map
github.com/andygup/ionic2-esri-map
Geolocation
https://github.com/Esri/html5-geolocation-tool-js
https://github.com/Esri/cordova-plugin-advanced-
geolocation
Mobile Performance
Smartphone vs Your Laptop
Less memory, less powerful CPU
App performance not the same
Mobile internet speeds fluctuate and/or limited
Performance
Focus on small tweaks with BIG gains!
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
Jank can be
caused by any operation greater than…
16ms** ~60Hz or 60 FPS
UI Jank (freezing or jerkiness)
Significant jank can lead to:
- Decreased usability
- Decreased productivity
- User frustration
- Lack of user return visits
Common causes of Jank
Slow(er) internet – delays in loading
Downloading large files
Heavy processing on main thread
DOM layout thrashing
Improve UI experience
Spinners & progress bars
Improve UI experience
If appropriate consider a Splash Screen or a log-in
screen
Lazy-load map and layers in background
DEMO
Improve UI experience
Use Chrome profiler tools
Look for small changes with BIG impact
Improve UI experience
Measure time to complete tasks (1/1000 ms)
console.time(“doSomething”);
. . .
console.timeEnd(“doSomething”);
Improve UI experience – web workers
Parsing large data sets
DOWNLOAD TIME
PARSING TIME
RENDERING TIME
TOTAL TIME EXPERIENCED BY USER
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/
Improve HTTP response times
Limit the Extent for feature services
Make sure server uses gzip compression!
DEMO
Wrap up
Mobile is not desktop
Remote debugging
Special performance considerations
Resources
•https://github.com/lheberlie/mobile-webapps-js
•https://github.com/lheberlie/mobile-webapps-
js/blob/develop/Resources.md
•http://buildingadevicelab.com/
Please fill out survey!
•Get Esri Events app on Google Play or AppStore
•Find this technical session
•Scroll towards bottom under Feedback
Andy Gup
@agup
Lloyd Heberlie
Feedback
