Migrating from Desktop to Mobile

Preview:

DESCRIPTION

Presented at GIS in the Rockies 2012. This presentation looks at some of the challenges with migrating from desktop web applications to smartphones and tablets. While it uses mapping and spatial examples it applies to anyone looking at migrating to mobile. You'll walk away with some technical suggestions on how to address these challenges.

Citation preview

Migrating to Mobile GISTips for Success

Andy Gup

Agenda

Walk away with 6 migration tips

Differences between desktop and mobile

3 Approaches

Who am I?

Andy Gup, Esri

Tech Lead for Web APIs and Android

Esri Developer Network

agup@esri.com

http://blog.andygup.net

@agup

Who are you?

No longer just building for one screen size

1920x1080

Your Choices

Web app+

Native mobile app

Web app+

Web mobile app(a.k.a Hybrid)

Web app only(a.k.a Responsive)

1.

2.

3.

Development Skills (a generalization)

Fewer Skills More Skills

DesktopHTML + JavaScript

Hybrid NativeMobile HTML + JavaScript

1991 - HTML

1995 – HTML 2

1996 – CSS 1 +

JavaScript v

1

1997 – HTML 4

1998 – CSS 2

2002 – Tableless W

eb Desig

n

2005 – AJAX

How mature?

2008 – HTML5

(1st d

raft)

1991 2012

Sources: html5rocks.com, Wikipedia, W3C

iPhone 1June 2007

Android v1.5April, 2009

X X

if(device == mobile){ difference1: expectations, difference2: look_and_feel, difference3: capabilities, difference4: performance}

Wait…how do I pan and zoom the map??

Hmmm…how many map layers do I load?

VS.

1 GB RAM 16 GB RAM

How come my map loads so slooow?

VS.

Mostly connected Always connected

My survey crews use GPS heavily…

VS.

Limited battery Unlimited power

Desktop Web App

One size fits all

Works with most desktop browsers

Works across Windows, Mac, Linux

Mobile web did not exist

No GPS, camera, SD card

Using desktop app on smartphone

Native Mobile App

Targeted only to specific devices

Targeted only to specific OS versions

Direct access to GPS, camera, SD Card

Requires specialized development skills

Native devices

!= !=

Native devices

ArcGIS SDK for Android

ArcGIS SDK for iOS

ArcGIS SDK for Windows Phone

Native devices

Java

Many OS versions

Many different manufacturers

Many different screen types

OEM variations in OS

IDE = Eclipse

C#

Limited OS versions

Limited number of devices

IDE = Visual Studio

Objective C

Limited OS versions

Very limited number of devices

IDE = Xcode

Responsive Web App (circa >= 2011)

Tailors content and view based on browser type

No direct access to GPS, camera, SD card

Works with many different desktop and mobile browsers

Works across Windows, Mac, Linux

Responsive Web App

ArcGIS API for JavaScript - Compact

http://esriurl.com/compactJS

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact">

arcgis.com

1440 x 900 480 x 800 hdpi

Portrait Landscape

Web app that looks native

The challengeMobile JavaScript frameworks…

Hybrid App

Looks and acts like a native app

Re-uses existing web content

Works across different devices

Access to GPS, camera, SD Card

Requires fewer specialized skills than native

+

Android SDKJava Project

ArcGIS JavaScript +

Mobile JavaScriptFramework

=

Hybrid App

Hybrid Web Apps

Examples of Hybrid Web Apps

http://www.phonegap.com/app

???

Hybrid Web App Platforms

Migration suggestion #1

Start prototyping today

Migration suggestion #2

Analyze existing usage

Mobile usage stats for my website?

Web Server logs

Web analytic tools

Sample web-site stats from esri.com

Migration suggestion #3

Re-evaluate ALL use cases and workflows

?

? ?

?

?

Migration suggestion #4

Expect to re-write code

When in doubt, discard and re-write

Migration suggestion #5

Buy as many test devices as possible

Migration suggestion #6

Dig deep into browser differences

Understand browsers

caniuse.com

DemoPutting it all together

Andy Gup, Esri

Tech Lead for Web APIs and Android

Esri Developer Network

agup@esri.com

http://blog.andygup.net

@agup