Choosing the right UI library for your Construction Technology (ConTech) software product can be a daunting task. There are so many factors to consider, such as the library's feel, features, its maintainability, available resources, its documentation, and many more. In this blog post, we will share some tips on how to choose the right UI library for your product.
Our UI story in short...
Four years ago, at KOPE we decided to implement one of open-source's UI libraries in our products. It had the look and feel we needed to make our products shine elegantly and discretely. It applied many User Experience (UX) rules which appealed to us (such as sharing extensive documentation), and was unique; Material Design is known as an excellent choice for a variety of design implementations.
We hope that by sharing our learnings, we can help you to avoid some mistakes and to choose the right UI library for your product.
1. Consider your product's goals and think about the future
The first step is to consider your product's goals. What are you trying to achieve with your product? Are you looking for a library that will help you create a simple, easy-to-use interface? Or are you looking for a library that will allow you to create a more complex, feature-rich interface? As your product evolves, you may need to add new features or change the look and feel of your interface. Make sure to choose a library that is flexible and can grow with your product.
2. Consider your budget
Some UI libraries are free, while others require a paid subscription. Try to choose a library that fits your budget. Also, remember that a paid subscription might come with some advantages, like response time to any found issues or bugs, tempo of library development, dependencies update (which impacts security considerations), etc
3. Consider the library's licensing terms
The licensing terms of a UI library can vary and needs to comply with your products’ purposes and applicable laws. Some libraries are open source, while others are proprietary. Make sure to read the licensing terms carefully before using the library.
How to check it: Find the licensing terms in the repository website or GitHub page. As a last resort, you can check repo’s npm page.
4. Evaluate the library's features
Once you know your product's goals, you can start evaluating the library's features. What features are important to you? Do you need a library that supports a wide range of components? Or are you looking for a library that is specifically designed for a particular type of application? The range of components in a UI library determines how much flexibility you have in designing your application's user interface
The other things that are worth considering are:
- Does it support the range of devices your product aims for?
- Does it have built-in special components (charts, complex tables, etc.) in case you need them?
- Is it designed with accessibility in mind?
How to check it: If a library has a Storybook (or other components playground) it might have anaccessibility plugin built in, where you can receive instant feedback on how itperforms. You can also use any other tool of your preference - for example, Google’s LightHouse.
5. Read the library's documentation
The documentation of a UI library is essential for learning how to use the library. Make sure to read the documentation carefully before you start using the library. Check if it is complete, up-to-date, and easy to understand. This will be your source of knowledge and one of the keys to speedy development.
6. Try out the library
The best way to see if a UI library is right for you is to try it out. Build a small app with a few key features and components for your product and see how it works and see if you find any concerns or bugs.
7. Check library maintenance and if dependencies are up-to-date
The library's maintainers are responsible for keeping the library up to date and fixing bugs. You need to make sure that the library you choose has active maintainers who are committed to continuously working on the library. The speed with which the library's maintainers respond to bug tickets is an important factor to consider. If you encounter a bug, you need to be able to get it fixed quickly so that you can continue working on your product. If you are using an open-source library, you might consider contributing to the code development to at least help develop features or fix issues you need.
Here are some things to consider when evaluating the library's maintenance:
- The frequency of releases.
- The responsiveness of the maintainers to bug reports.
- The library's community
How to check it: You can check the library's GitHub repository to see how active the maintainers are. You can also read the library's issue tracker to see how quickly bugs are being resolved or questions answered. Lastly, issue your own ticket if you find any bug or concern during library sandbox testing.
In addition to this, a UI library that uses up-to-date dependencies is less likely to have security vulnerabilities. You can check the library's dependencies to see if they are up to date.
How to check it: You can check available config files and `package.json` file in the library's GitHub repository. For example, you can open such a file in Visual Studio Code with ‘Version Lens’ extension installed, which will inform you about the status of dependencies version.
8. Check and test components’ customisability and extendibility
If you are creating an application that will be used in multiple languages, you need to make sure that the UI library you choose supports internationaliszation. You can check the library's documentation to see if it supports internationalisation, or have all texts customisable in other way.
Tip from our experience: We did not plan for this at the start and this feature has been crucial for us. As we grow this feature will be important for the expansion of our company.
9. Check if it can be internationalised or has all texts replaceable
If you are creating an application that will be used in multiple languages, you need to make sure that the UI library you choose supports internationaliszation. You can check the library's documentation to see if it supports internationaliszation, or have all texts customiszable in other way.
Tip from our experience: We did not plan for this at the start and this feature has been crucial for us. As we grow this feature will be important for the expansion of our company.
10. Is the theme customisable, and to what extent?
A UI library with a customisable theme allows you to change the look and feel of the library to match your application's branding. Check if it exposes styling tokens/variables and allows you to reuse the library's styles in your own custom styles. This can help you to keep your application'’s styles consistent, lower the amount of styling code, and speed up the development process.
How to check it: You can check the library's documentation to see how customisable the theme is. It is also worth trying to customise the look on some live, small sandbox projects.
11. Used configs and tools
UI libraries come with a variety of configurations and tools that can help you to use the library. These tools can make it easier to integrate the library into your application and to customise the library's components. They can also make it harder to integrate existing code of your product. For example, if your current code is styled with SCSS, it might be more challenging to switch to a UI library written with LESS.
How to check it: Check the library’s dependencies and config files in its GitHub repository or ask owners for such information if there is no open-source repository.
12. Build size
The size of the library's build can affect the performance of your application. If the library's build is too large, it can slow down your application. You need to make sure that the library you choose has a reasonable build size.
Here are some things to consider when evaluating the build size of a UI library:
- The number of components in the library.
- The amount of the library's dependencies.
- The library's compression ratio.
How to check it: You can use a tool like Bundlephobia: https://bundlephobia.com/ to compare the build sizes of different UI libraries. Alternatively, if you understand how the builds works and how the build content affects the final package size, build some small apps with top two to three UI libraries of your final choice and compare build sizes.
13. Code quality
The code quality of a UI library is important for the performance and maintainability of your application. You need to make sure that the library you choose has code that is well-written and easy to understand. Sometimes, we need to research the source code to find some useful hidden features, an explanation of how the component works, or can be extended. Even the best documentations might not cover everything you might need to know.
14. Is it complete and reliable
A complete UI library is the one that has all the features you need. A reliable UI library is unlikely to have bugs and vulnerabilities, and can easily handle errors or unexpected user inputs. Checking the number of breaking changes is a good idea. A UI library with a lot of breaking changes can be difficult to use. You need to make sure that the library you choose has a stable release history.
How to check it: Investigate issued bugs and tickets on GitHub repo, README.md file, documentation, or official website. Try to find an official roadmap and see how the progress meets the described deadlines or what the planned changes are (some might be unacceptable for your product, and you will be left with the older, non maintained version). Download the repo to your local machine, run tests and check the test coverage to see how well it tested. Check the changelog of the package (it can be included on GitHub repo or in official documentation. Some libraries unfortunately do not have it).
15. Check the library's popularity and Resources
The popularity of a UI library might be a good indicator of its quality. If a library is popular, it means there are a lot of people using it and, therefore, a large community of developers who might help you if you run into problems. However, it should not be a main factor that will inform your final decision, as the number of users might be a snowball effect, and you should beof cautious and perform deep repo analysis.
How to check it: For example, npm’s repo page information of number of downloads or repo’s GitHub page and number of stars and forks. Repo’s website and listings of popular companies using it.
Comparison of 2 UI libraries popularity metrics [sources: https://github.com/vueComponent/ant-design-vue, https://github.com/quasarframework/quasar]
Some UI libraries offer a variety of resources to help you get started, such as Figma components, code snippets, and tutorials. These resources can be a great way to learn how to use the library and get your product started.
Summary
Choosing the right UI library for your ConTech product can be a challenge, but it is important to do your research and choose a library that is right for your needs. This takes time but in our experience it will take much less time to plan properly from the beginning, than being forced to change the library again later. Following the tips in this blog post, you can make the process of choosing a UI library a little bit easier and complete.
Want to find out more about KOPE?
https://www.kope.ai/about/our-company
About Us:
As KOPE, we are excited to continue pursuing our mission of making offsite and MMC accessible to all. We have three areas that work together to achieve our aims:
Construct:
KOPE Construct software enables you to easily adopt and benefit from offsite construction. A platform where you can digitally integrate prefabricated products and systems directly within your projects. Thus, saving considerable time and effort when designing and pricing buildings.
Market:
KOPE Market website provides a hub for builders, suppliers, and consultants to connect and collaborate. It allows these key players to share information, learn from each other, and identify new opportunities. Additionally, it provides a forum for showcasing the positive outcomes achieved by high quality projects and products.
Lab:
KOPE Lab team underpins our technology by supporting the implementation of innovation within the construction industry. To truly engage with technology, businesses need a guiding hand and a trusted team built on decades of experience.
