Performance Guide

Avonni Dynamic Components are designed for speed and efficiency. This guide provides best practices to help you build high-performing components and understand how your design choices impact performance. The goal is not to restrict functionality, but to help you use Avonni's features optimally.

General Performance Principles

These principles apply to all Avonni Dynamic Components:

Efficient Data Retrieval

• Use Precise Filters: Apply filters to your queries to retrieve only the needed records. More specific filters result in smaller datasets and faster queries.

Component Structure

• Prioritize Simplicity: Complex layouts are possible, but simpler component structures perform better. Aim for the most straightforward design that meets your needs.

• Strategic Use of Conditional Visibility: Avonni's conditional visibility features show and hide components based on data or user actions. This avoids rendering unnecessary elements.

Nested Dynamic Components: Best Practices

You can embed Dynamic Components within other Dynamic Components using the Dynamic Component component. This allows for reusable UI elements and complex layouts. However, careful design is essential for optimal performance. The Dynamic Component component acts as a container, displaying a separately defined Dynamic Component within your current component.

You can pass data between parent and child components using resources.

Data Loading Strategy

• Parent-Child Data Passing: Whenever possible, have the parent component fetch the data and pass it to child components as resources. This avoids multiple, independent queries at each level of nesting.

• Avoid Redundant "On Load" Queries: If a child component must fetch its data, consider whether it truly needs to do so "On Load." Could the data loading be triggered by a user action or a change in a parent component's resource?

• Nested Queries (When Appropriate): Using Avonni's Nested Query Data Source to retrieve parent and child records efficiently in a single operation for hierarchical data.

Reactivity Awareness

• Understand the Impact of Changes: Remember that changes in a parent component can trigger updates in child components, and vice versa. Design your interactions to avoid unnecessary updates.

• Minimize Circular Dependencies: Avoid situations where Component A updates Component B, which then updates Component A, creating an infinite loop.

Alternatives

• Flatten When Possible: If a deeply nested structure isn't essential, consider a flatter structure with conditional visibility.

• Specialized Components: For complex data displays (grids, trees), use Avonni components designed for those purposes (Data Table, Tree) – optimized for performance.

Optimizing Specific Components

• Data Table: While you can add interactions to each row, be mindful of the performance impact, especially with large datasets. Consider if header-level actions or alternative UI patterns could achieve the same result with fewer interactions. When displaying many columns, consider if all are essential, or if some could be displayed on demand (e.g., in a detail panel using the Open Flow Panel or Open Dynamic Component Panel).

Monitoring and Troubleshooting

• Browser Developer Tools: Use your browser's developer tools (Network tab) to monitor network requests. This helps identify slow data loading or excessive requests.

• Avonni Component Documentation: Consult the documentation for individual Avonni components for specific performance tips and recommendations.

In Summary

Avonni Dynamic Components are built for performance. You can create fast, responsive, and efficient user interfaces by understanding these best practices and making informed design choices. The key is to be mindful of data loading, interaction triggers, and component structure and effectively leverage Avonni's features (like data sources, resources, and conditional visibility).