Load Appian UIs Faster with Async Variables

Summary

In this video, Keanu from Appian's product team explains how to improve user interface performance using asynchronous loading. He demonstrates the new a!asyncVariable function in Appian 25.3, showing how slow queries and integrations can load in the background, allowing users to interact with the page without waiting for everything to finish. Keanu walks through identifying slow components using performance details, applying asynchronous loading to local variables, and enhancing charts and data components. By the end, viewers learn practical techniques to make their interfaces faster, more responsive, and user-friendly, with guidance on additional Appian documentation and resources for further learning.

Takeaways

• 😀 Asynchronous loading helps improve UI performance by loading slow data in the background while allowing users to interact with the rest of the page.
• 😀 `a!asyncVariable` is a new function introduced in Appian 25.3 that makes it easier to implement asynchronous loading of data.
• 😀 Users no longer need to wait for the entire page to load, as parts of the page (like charts or data) can load asynchronously.
• 😀 Identifying performance bottlenecks can be done using the Performance Details view in Interface Designer to analyze load times of various components.
• 😀 Slow data can be moved to asynchronous loading using the `a!asyncVariable` function, reducing page load time and improving user experience.
• 😀 Spinner animations are displayed on asynchronous components while the data is loading in the background, providing feedback to users.
• 😀 `a!asyncVariable` works seamlessly with other features like refresh behavior, allowing for both fast UI rendering and background data fetching.
• 😀 Developers can use `a!asyncVariable` to load multiple slow components asynchronously, improving overall page performance.
• 😀 Testing the interface after applying asynchronous loading allows developers to visually confirm the improvements in load time and interactivity.
• 😀 In addition to `a!asyncVariable`, Appian also supports asynchronous loading in built-in components like charts and grids via the `loadDataAsync` parameter.
• 😀 Developers are encouraged to check out the documentation and training resources available to learn more about optimizing performance using asynchronous loading.

Q & A

What is the main topic of Keanu's video?

The main topic of the video is asynchronous loading, which involves loading data in the background of user interfaces to improve page responsiveness.

Why is asynchronous loading important in application development?

Asynchronous loading is important because it prevents users from waiting for the slowest elements of a page to load, allowing them to interact with the page immediately and improving the overall user experience.

What new function does Appian 25.3 introduce for asynchronous loading?

Appian 25.3 introduces the a!asyncVariable function, which allows developers to load specific data in the background while the rest of the page loads.

How can developers identify which parts of a page are slowing down load times?

Developers can use the Interface Designer's performance details view to analyze load times of different local variables and components, identifying the ones that take the longest to load.

What is the purpose of wrapping a slow local variable in a!asyncVariable?

Wrapping a slow local variable in a!asyncVariable allows that data to load asynchronously, enabling the rest of the page to load and be interactive while waiting for the slower data to finish.

Can a!asyncVariable be used in combination with refresh behavior?

Yes, a!asyncVariable supports refresh behavior similar to a!refreshVariable, allowing developers to maintain both fast UI interactions and dynamic data updates.

Besides a!asyncVariable, what other Appian feature allows for asynchronous data loading?

Appian components such as bar charts, grids, and KPI components have a loadDataAsync parameter that has been available previously for asynchronous data loading.

What visual cue indicates to the user that asynchronous data is still loading?

Spinner animations are used to show that asynchronous data is still loading, letting users know that data is being fetched in the background.

What steps should be taken if a plugin function parameter is identified as slow?

The slow plugin function parameter should be moved to a local variable, which can then be wrapped in a!asyncVariable to allow it to load asynchronously, just like other slow local variables.

How does asynchronous loading improve the user experience according to the video?

Asynchronous loading improves the user experience by displaying parts of the page immediately, allowing users to interact with the page while slower data continues to load in the background, reducing waiting times and making interfaces feel faster and more responsive.

What resources does Keanu suggest for learning more about asynchronous loading in Appian?

Keanu suggests checking the Appian documentation, asynchronous loading page, training videos, and courses on interface performance for further learning.

What is the visual difference on the page before and after implementing asynchronous loading?

Before asynchronous loading, users see a full-page loading bar until everything loads. After implementing asynchronous loading, the page displays available content immediately, and slower elements load gradually with spinner animations, enhancing perceived speed.