Building Web Apps with the ArcGIS API for Javascript · PDF file•Tip: Publish...

Click here to load reader

  • date post

    17-Oct-2019
  • Category

    Documents

  • view

    2
  • download

    0

Embed Size (px)

Transcript of Building Web Apps with the ArcGIS API for Javascript · PDF file•Tip: Publish...

  • 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

    https://developers.arcgis.com/android/10-2/guide/determine-your-app-map-pattern.htm

  • Demo Application

    • Nearby JavaScript

    • Uses mapless app pattern

    https://developers.arcgis.com/example-apps/nearby-javascript/

  • 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

    https://v8.dev/blog/cost-of-javascript-2019

  • 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

    https://github.com/Esri/i3s-spec

  • 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

    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: poin