Embed Size (px)
Citation preview
ArcGIS API for JavaScriptBuilding Mobile Web Apps
Andy Gup, @agupLloyd Heberlie, @lheberlie
March 8–11, 2016 | Palm Springs, CA
Esri Developer Summit
• Introductions• Expectations• Agenda• Resources
Welcome
Why are we here?
Resources
• https://github.com/lheberlie/mobile-webapps-js• https://github.com/lheberlie/mobile-webapps-js/blob/develop/Resources.md
Lloyd Heberlie
Mobile resources in the API
Lloyd HeberlieDesigning for mobile
Touch aware map
HTML 5 input types
type=“email” type=“tel” type=“date”
Geocoder, LocateButtonesri/dijit/Geocoder
esri/dijit/LocateButton
Popup Mobile
esri/dijit/PopupMobile
Basemap Galleryesri/dijit/BasemapGallery
Basemap Toggleesri/dijit/BasemapToggle
Custom components
Custom basemap switcher
Lloyd HeberlieDesigning for mobile
Lloyd Heberlie
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
Code validation
CSS preprocessors
Lloyd Heberlie
Productivity and code management
Lloyd Heberlie
Debugging and testing for mobile
Emulators / SimulatorsOpera Mobile Emulator iOS Simulator * Windows Phone Emulator * Android Emulator
Physical devices
http://blog.adtile.me/2014/01/08/adtile-device-lab/
Remote debugging
• Safari Web Inspector Remote• Google Chrome remote debugging• Adobe Edge Inspect
- Synchronized screen capture, device details- Node.js (weinre local)
• Web Inspector Remote (weinre)
Enable Safari remote web inspection
Safari remote debugging
Safari remote debugging
Chrome remote debugging
Chrome remote debugging
Adobe Edge Inspect
Adobe Edge Inspect
Adobe Edge Inspect
device_model = iPhonedevice_res = 1136x640orientation = portraitos_name = iOSos_version = 7.0.4pixel_density = 326 ppi
device_model = LGE Nexus 5device_res = 1080x1776orientation = portraitos_name = Androidos_version = 4.4.2pixel_density = 480 dpi
device_model = iPaddevice_res = 1024x768orientation = landscapeos_name = iOSos_version = 7.0.4pixel_density = 132 ppi
Lloyd HeberlieDebugging mobile
Many UI frameworks
BootstrapAngular.jsjQueryIonic…...?
Frameworks on github.com/esri
github.com/Esri/bootstrap-map-js
github.com/Esri/angular-esri-map
Add CSS
Set up the div
Load BootstrapMap
Load Bootstrap + jQuery
Mobile Popups
Popups
Tablets Smartphones
InfoWindow Yes No
MobilePopup Yes Yes
InfoWindow
Text may be hard to readNot touch friendlyNot centered on rotate
MobilePopup
ReadableTouch friendlyRotate friendly
http://developers.arcgis.com/javascript/samples/mobile_arcgis/
Custom Popups
Modal popup example
http://andygup.github.io/modal-popup-js/
Mobile Performance
Smartphone vs Your Laptop
App performance not the sameInternet speeds fluctuate/limitedPower limitations
Reducing UI Jank (Jerkiness)
Interruptions in frame production (fps) and latency
CheckerboardingLong pausesScrolling latencyDelayed animation start
Common causes of Jank
Slow internet response
Data processing overload
Excessive garbage collection
HTTP response times
Minimize, concatenate, optimizeMake sure server uses gzip compression!Use Query MODE_ONDEMANDLimit the Extent and use layer dependenciesGeneralize features
DEMO
Using Web Workers
Move expensive tasks off main thread!
Parsing large number of featuresjson.parse() blocksSerialization/deserialization costsTimers
Background threadMain UI thread
Background threadMain UI thread
SER
IALI
ZE /
DE-
SER
IALI
ZE
CPU
Using Web Workers
https://github.com/andygup/earthquake-heatmap-layer
Example:
Parsing GeoJSON
Example: 7x Performance boost!
1MB of data with web workers
Without web workers
Garbage collection
De-reference any variables no longer in use
var feature = { feature: { … }};feature = null;
Managing memory in loops
Re-use objects where possibleVersus new Object();
Reset arrays: myArray.length = 0;Versus this: myArray = [];
Geolocation
Advanced Geolocation Session – 10a – 11a Friday
Outdoor geolocation – turn off WiFiNot very accurate – 3 – 10 meters
Hybrid – PhoneGap/Cordova
Wednesday 10:30am, Mesquite B
github.com/Esri/quickstart-map-phonegap
Resources
• https://github.com/lheberlie/mobile-webapps-js• https://github.com/lheberlie/mobile-webapps-js/blob/develop/Resources.md
