Andy Gup @agup

Lloyd Heberlie @lheberlie

René Rubalcava @odoenet

Building Web Apps with the ArcGIS API for

JavaScript

Building Web Apps Agenda

• Building a good app

• Mobile considerations

• Optimizations

• Resources

Building a Good App

Good apps start with good data

• Set cache-control on your Feature Services

Good apps start with good data

• Create View Layers to manage access and visualizations

• Use View Layer to manage editing if needed

Feature Layer

(cache control)

View Layer

(editable)

Custom App Dashboard Viewer App

Custom Edit

App

Collector

Editing App

Progressive Web Apps – a good guideline

• It’s a nice goal

• If you’re strive for a PWA, your entire application benefits

• Don’t worry about being 100% compliant

• Be efficient

• Web apps that behave like native apps

- Prompt add to home screen

- Run in a sandbox environment

• Smooth transitions

• Responsive

• Fast loading

• Native look and feel

PRPL

• Push critical resources

• Render initial page or route

• Pre-cache remaining assets

• Lazy load parts of your application

JS CSSCritical Resources

JS CSSJSPre-cache

JS JSLazy load

Render!

Service Workers

• Not a web worker

• Control and cache network requests

• Series of APIs

- Notification – send notification to desktop

- Push – pub/sub capabilities

- Background Sync – useful for offline to ensure data is sent

- Channel Messaging – communication with other works, ie: iframes

App Shell

• Useful for fast loading

• Minimal HTML, JS, CSS required to display a UI

• Can allow an app to look ready while resources load

• When to use?

- When UI doesn’t really change

- But content does

• Separate content from navigation

manifest.json

• How your PWA will behave when installed as a home screen app

• Defines

- App Name

- Icons

- Colors (themes)

- Display information

PWA w/ JSAPI

Considerations when building mapping apps

• Provide app shell when possible

• Delay the loading of the map if you can

• JavaScript API is powerful, lots of capabilities

- What layers are in webmap?

- What portals are used in webmaps? (Identity)

- What are the capabilities of the services?

- Hosted or enterprise?

- Does data need to be reprojected?

Considerations when building mapping apps

• Provide app shell when possible

• Delay the loading of the map if you can

• JavaScript API is powerful, lots of capabilities

- What layers are in webmap?

- What portals are used in webmaps? (Identity)

- What are the capabilities of the services?

- Hosted or enterprise?

- Does data need to be reprojected?

Patterns

• Determine your app/map pattern

• Mapless apps

- Map not the initial focus

- Spatial tasks run in the background

- Opportunity to delay map loading

- Opportunity to use routing, lazy loading

Demo Application

• Nearby JavaScript

• Uses mapless app pattern

That also apply to desktop

Mobile considerations

Get to know your site visitors

Regularly research your web server logs

What percentage of visitors are on mobile devices?

Why type of devices?

Which mobile device browsers are they using?

Website traffic by user agent

Browser, OS and device

Get to know mobile devices

Compared to your work development machine, mobile devices often have:

• Less memory

• Less CPU

• Spotty internet

• Smaller screen size

• Touch-based interface

• Battery life is decreased by high CPU usage

Thinking about application load times

Download Parse Render

User Action

READY

Copied from https://v8.dev/blog/cost-of-javascript-2019 License: CC by 3.0

Device capabilities will affect performance

Cellular connectivity (and even WiFi) can be highly variable

6:53 PM, 20.3 Mbps 6:56 PM, 7.65 Mbps

Use the minimum amount of data

Improving Mobile Performance over cellular

Pay attention to FeatureLayer outfields

Use as few layers as possible

Lazy Load

Simplify rendering (Lloyd will discuss)

FeatureLayer loading options

You can control server-side requests to:

- Download all feature attributes via outFields

- Download some feature attributes via outFields

- And/or further refine via a definition expression

(SQL)

FeatureLayer loading options

outFields: ["*"]; // not the best practice

outFields: ["NAME","ADDRESS","CITY"]; // best practice

FeatureLayer loading options

outFields: ["NAME","ADDRESS","CITY"];

definitionExpress: "STATE = 'North Carolina'";

Example: outFields:["*"] = 16 attributes => 551 KB

Example: outFields:["NAME","ADDRESS","CITY"]

3 attributes => 192 KB

FeatureLayer load test app

1.7 million features within U.S.

Test on desktop browser in mobile mode

Test on mobile phone

Test comparison between LAN, cellular and WiFi*

Device +

Chrome

Internet

Type

All

attributes

(ms)

Some

attributes

(ms)

Some

attributes +

Definition

expression

(ms)

Number of

features/

Definition

expression

Laptop/

Pixel 2

mode

LAN

(ethernet)

6979 -19% -54% 38788/

9938

Pixel 2 WiFi 13483 -17% -56% 33608/

9952

Pixel 2 Cellular 20392 -20% -47% 33608/

9952

* test run of 10 loads

Test comparison between LAN, cellular and WiFi *

Device +

Chrome

Internet

Type

Internet

Speed

(Mbits/s)

All

attributes

(ms)

Some

attributes

(ms)

Some

attributes +

Definition

expression

(ms)

Number of

features/

Definition

expression

Laptop/

Pixel 2

mode

LAN

(ethernet)

200 down/

70 up

6979 5662 3227 38788/

9938

Pixel 2 WiFi 130 down/

12 up

13483 11143 5956 33608/

9952

Pixel 2 Cellular 45 down/

12 up

20392 16411 10802 33608/

9952

* test run of 10 loads

Improving Mobile Performance – Use fewer layers

Fewer layers means:

Faster loading

Less memory usage

Less GPU/CPU parsing and rendering

LayerList Widget demo

Control initial load times

via layer visibility.

If visible === false, layer

isn't loaded.

LayerList Widget Demo

You can initial visibility right on the layer.

LayerList demo

You can also use the listItemCreatedFunction:

Improving Mobile Performance – Lazy Load!

Defer loading layers if they aren’t needed immediately

Improving Mobile Performance – Recommendations!

Test using real scenarios

Specify outfields in feature layers

Use fewer map layers

Lazy Load

Best practices in 3D

Tips for 3D Object Scene Layers

• Tip: Publish IntegratedMeshLayer and 3D Object SceneLayer with ArcGIS

Pro 2.4 and visualize them with JavaScript API for JavaScript 4.12

- implements I3S v1.7 (using Draco compression)

- use the converter tool in I3S specification repository to upgrade to v1.7

- performance up to twice as fast as previous versions

Tips for 3D Object Scene Layers

• Tip: Publish SceneLayers with ArcGIS Pro 2.3 – oriented bounding boxes

instead of spherical extents

https://www.esri.com/arcgis-blog/products/js-api-arcgis/3d-gis/scene-layer-performance-in-arcgis-online-part-2

Phones don’t like heavy symbols

• Tip: reduce symbol complexity (How many vertices?)

Example: point symbology

Flat symbols 3D volumetric symbols

P.S. Phones also don’t like heavy geometries…

Complexity

Do you really need to see the sky?

• Tip: use max tilt constraint

tilt heading

center

position

Alignment to terrain uses up resources

• Tip: absolute height is faster than relative to ground

faster than

Phones + low quality profile = fast

• A low quality profile reduces memory consumption, but affects visual

quality:

- Map resolution

- Scene layer detail level

- Anti-aliasing (edge smoothing)

• Employing a Lower Quality profile for the atmosphere

Shadows and ambient occlusion are expensive

Avoid shadows if not necessary

Avoid ambient occlusion if not necessary

Demo time

Best 3D experience on our officially supported devices:

Apple iPhone 8

Apple iPad Pro

iPhone XS

(Safari browser)

Samsung Galaxy S8

Samsung Galaxy S9

Samsung Galaxy Tab S3

(Chrome browser)

Share your apps and suggestions with us…

jsapi_pm@esri.com

• Your apps!

• Your impressions on the latest API

• Ideas for next UC or Developer Summit related to web development

Complete answers

and select “Submit”

Scroll down to find the

feedback section

Select the session

you attended

Download the Esri Events

app and find your event

Please Take Our Survey on the App