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…
• 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