Custom component best practices
This page contains best practices for building custom components:
While you might create the first version of a component, other developers may need to extend or update it. To ensure other developers can easily work with and update your custom components:
- Ensure the component code is written in a clear, organized structure.
- Avoid adding complex implementation details or interfaces which might make the component more challenging to understand or work with.
- Where possible, include code comments to help explain details.
Custom components should encapsulate specific patterns and functionality which can be reused in and across applications.
For example, a custom button component that calculates the sum of two numbers from input fields when clicked, might be useful for any application that requires this mathematical logic. Using such a component:
- Reduces the need to continually re-implement this logic.
- Simplifies your logic flows by reducing the number of required components.
- Simplifies maintenance by enabling you to make required fixes in one place (i.e. your custom component's code).
Composable components should also maintain:
- Simple functionality: Components that serve overly specific functions may be challenging to implement in multiple applications. Ensure your custom components include a broad functionality, so you can use them in a range of use cases.
- Simple visual design: Complex component designs may not apply to many use cases. As a result, designers using the custom component may need to adjust the visual settings each time they use it. Keep a generic design to make the component easier to adjust and integrate into applications.
As an application evolves, you may need to change or update your custom components to include new functionalities or styles while maintaining compatibility with existing apps.
To avoid flooding your application with new components for each use case:
- Check if the interface for your existing custom component can be safely updated without breaking existing applications.Note: In Uiflow, it's generally safe to add or rename interfaces (i.e. properties and Actions), but removing interfaces could break existing dependant apps.
- Only create a new custom component when you cannot encapsulate the desired functionality without breaking the interface. In this case, you might want to consider deprecating the old component.