arcgis api for javascript building mobile web...

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@esri.com

@agup

Lloyd Heberlie

lheberlie@esri.com

Feedback