Embed Size (px)
Citation preview
Building Mobile Web Apps with ArcGIS API for JavaScript
Kelly Hutchins, Lloyd Heberlie
Agenda
•Mobile landscape • Setup, Development, and Deployment • Design considerations • Debugging and Testing
Why are we here?
Lloyd Heberlie
mobile web app
Mobile strategy
• Web - You are here!
• Hybrid - Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and JQuery
• Native - Building iOS Apps with ArcGIS Runtime SDK - Building Android Apps with ArcGIS Runtime SDK - Building Windows Store and Windows Phone Apps with ArcGIS Runtime SDK
Application comparison
Web
Development Cost Reasonable
Development Time Short
App Portability High
Performance Fast
Native Functionality No
App Store Distribution No
Extensible No
PhoneGap Day - IBM, PhoneGap and the Enterprise by Bryce Curtis
Application comparison
Hybrid
Development Cost Reasonable
Development Time Short
App Portability High
Performance Native speed if needed
Native Functionality All
App Store Distribution Yes
Extensible Yes
PhoneGap Day - IBM, PhoneGap and the Enterprise by Bryce Curtis
Application comparison
Native
Development Cost Expensive
Development Time Long
App Portability None
Performance Very Fast
Native Functionality All
App Store Distribution Yes
Extensible Yes
PhoneGap Day - IBM, PhoneGap and the Enterprise by Bryce Curtis
Further reading
http://esriurl.com/7478
Why you should care?
• Mobile was winning, it has already won • Sales: > • 2014: >
Pope Francis’ Debut
Why is mobile different?
• Never assume anything • Interactions are often short and focused
- (~20 – 30 seconds) • Minimize typing and input • Often exclusively touch based
Why is mobile different?
• Minimal screen real estate • Hardware and OS change rapidly • Mobile value chain • Many want same access as desktop • App life-span varies, must be easy and intuitive
Know your geographic region
• Global device market is misleading • Each country is really its own device market • Demographics, cultural differences, disposable income
Know your audience
• Web Analytics Software • Collect your own User/Agent data • Use collected data: StatCounter, NetMarketShare, Akamai
North America Market Nov 2013 – Jan 2014
iPhone 47%
Android 30%
Chrome 10%
Browser Market Share
iPhoneAndroidChromeBlackBerryiPod TouchOperaIEMobileUC BrowserOther
iOS 52% Android
40%
BB OS 4%
OS Market Share
iOS
Android
BlackBerryOSWindowsPhoneSeries 40
UnknownStatCounter GlobalStats
Form Factors
Differentiation / Fragmentation
• Device lifecycle • Device default browser • OS updates • Mobile Value Chain
Closing thoughts
• Never assume anything • Start testing today • Focus on trends rather than tiny stats • Start collecting your own data • Sales market share < install base < browser market share
Agenda
• Mobile landscape
•Setup, Development, and Deployment • Design considerations • Debugging and Testing
Setup a developer machine
Source Control
Code quality and verification
web server
JavaScript toolkit / framework
JavaScript toolkit / framework
Jan 2014
Jan 2012
Jan 2011
Jan 2013
ArcGIS API for JavaScript
• Current options • Web Optimizer • Resource-proxy
Deploying your code
• Minification • Uglify
Agenda
• Mobile landscape • Setup, Development, and Deployment
•Design considerations • Debugging and Testing
Design Guidelines
Looking for Design Ideas? http://www.mobile-patterns.com
Touch aware map
Mobile specific widgets
HTML 5 input types
•
Device Access Beginning with the GeoLocation API Devices can present rich, device-aware features and experiences.
When Can I Use ….
Feature Detection
• Modernizer • Has
Agenda
• Mobile landscape • Setup, Development, and Deployment • Design considerations
•Debugging and Testing
Emulators / Simulators Opera Mobile Emulator iOS Simulator * Windows Phone Emulator * Android Emulator
Physical devices
Browser based testing
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 = iPhone device_res = 1136x640 orientation = portrait os_name = iOS os_version = 7.0.4 pixel_density = 326 ppi
device_model = LGE Nexus 5 device_res = 1080x1776 orientation = portrait os_name = Android os_version = 4.4.2 pixel_density = 480 dpi
device_model = iPad device_res = 1024x768 orientation = landscape os_name = iOS os_version = 7.0.4 pixel_density = 132 ppi
iOS network simulation
Android network speed emulation
command Option <speed> kilobits/sec
emulator -netspeed <named value> emulator -netspeed <num> (both) emulator -netspeed <up>:<down> emulator -netspeed gsm emulator -netspeed 14.4 80 emulator -netspeed 40.0
Other network simulation options
• Fiddler (Windows) • Charles Network Debugging proxy • Network Link Conditioner (Mac OS) • Dummynet
Lloyd Heberlie
Remote Debugging
Questions?
esri.com/events/devsummit/session-rater
