The key challenge in building UIs is balancing ease of use and maintainability, with scale and complexity. It requires thoughtful component design and an understanding of common usage paths to create a UI that’s both robust and user-friendly. Automation can be a game-changer when it comes to improving efficiency and consistency in your codebase.
Glenn Reyes spoke about building robust UI components at NDC Oslo 2023.
Building UIs presents a unique set of challenges, especially when it comes to scaling, Reyes mentioned. The primary difficulty lies in maintaining simplicity and robustness as the complexity of the project grows.
Reyes mentioned that a crucial part of building UIs is to keep the API surface area of your components minimal. This not only reduces the chances of errors, but also makes your components more maintainable and easier to use for your engineering team. It prevents them from diving deep into the complexities and promotes a smoother, error-free development process:
You need to create them in a way that naturally guides the users towards the most common, effective uses. Making the usual usage paths intuitive and workarounds less appealing can be challenging, but it’s necessary to ensure your components are used correctly and efficiently.
Tools for code styling and formatting, like Prettier and ESLint, can streamline your workflow, Reyes said. They automatically enforce a consistent code style, eliminating the need for discussions about formatting during code reviews. By doing so, your team can focus more on the logic and functionality of the code rather than its appearance, he mentioned.
To ensure that the user interface code is maintainable, Reyes presented some strategies:
- Adopt a Design System: Utilizing a design system helps keep UI components consistent and easier to maintain. It serves as a single source of truth, detailing the elements and guidelines that form your application’s visual language.
- Implement Design Tokens: Design tokens, which can represent values for color, typography, spacing, and more, allow for consistency across different parts of an application. By changing a single token, you can propagate a change across all components using that token, making updates simpler and more efficient.
- Manage Component Spacing: The spacing between components should be controlled by their parent component rather than being hard-coded into each component. This ensures better separation of concerns and makes components more reusable and maintainable.
- Use TypeScript: TypeScript can significantly enhance maintainability by introducing static typing. It can help clarify whether you’re dealing with polymorphic or compound components, and it encourages omitting primitive HTML attributes for styling like "style" and "class". This contributes to better type safety, early error detection, and improved developer tooling, all of which make your UI code more maintainable.
InfoQ interviewed Glenn Reyes about building robust UI components.
InfoQ: How would you define "robust UI"? What are the characteristics they possess?
Glenn Reyes: A "robust UI" is strong, reliable, and works well for everyone. Here’s what makes a UI robust:
- Easy to use: It’s simple and intuitive, making it easy for people to understand and use.
- Consistent: It looks and works the same way every time, on every device or browser.
- Handles mistakes well: Even if something unexpected happens, like an error or a wrong user input, it doesn’t break down and recovers gracefully.
- Ready for growth: It’s built in a way that can easily grow and change with the needs of the users or the project.
- Accessible to all: It’s designed so that everyone, including people with disabilities, can use it comfortably.
- Easy to update: It’s simple to fix, change, or update without causing problems or breaking other parts.
In short, a robust UI works well, is user-friendly, reliable, ready for growth, and accessible to all. It’s also easy to maintain and update.
InfoQ: What kind of tools exist and what benefits can they bring?
Reyes: Dealing with variable lists, such as those rendered through map functions, can introduce unpredictability in your code. To overcome this, you can enforce deterministic behavior by adding an "order rule". This could involve sorting alphabetically or grouping based on a certain pattern. It ensures consistency and reduces unnecessary noise in diffs during code reviews, making the review process smoother and more focused.
Building UI components directly in your app might require multiple interactions before you can work on your target component. This can be inefficient, especially when working with components that rely on specific states, like error messages in form fields. Instead of having to manually induce the error state, consider using a tool or approach that allows you to view and work with this state immediately and in isolation. This not only saves you time, but also lets you concentrate solely on the component at hand, without any distracting surrounding context.