How to select the Right UI Framework for your next React Project?
React Hooks (into The Future of React)
Author: Sathwik Edupuganti
July 2, 2020 | SimbaQuartz
July 2, 2020 | SimbaQuartz
In this article, I’ll be discussing how to choose the perfect UI framework for your next React Project. Being an Intern at SimbaQuartz it was my first encounter with a project of such Complexity. I was told about the requirements, workflow, and the scenarios that were to be handled in the project.
With such a huge project to be developed, the task was to implement the functionality making sure not to compromise on the appearance of the project. Using a UI framework made our task pretty simple. Now, all we have to do is to make a perfect and optimized code.
Our Judgemental Criteria Included :
The breadth of the components
Quality of implementation
Ease of re-styling
Quality of documentation
Project Support
Our main contenders were :
1. Ant Design ProSemantic UI
2. Ant Design ProSemantic UI
1. Ant Design Pro
a) The breadth of Components:
Ant Design Pro has a vast number of inbuilt components which can be Imported from the Ant-d environment.
b) Quality of Implementation:
Good looking components had plenty of options and had good interoperability.
c) Ease of Re-Styling:
The Ant-D components are re-styleable but not made to be Overhauled. The default ant-d style was sufficient for our requirement.
d) Quality Of Documentation:
Though the documentation is provided in Chinese, it had a good translation. And were provided with thorough examples.
e) Project Support:
Ant-D Pro has around 20,000 stars on GitHub and has good support on Stack Overflow and Github.
2. Semantic UI
a) The breadth of Components:
Good selection of components, but may need to complement with others (i.e. date picker, filtering/sorting on a data table)
b) Quality of Implementation:
Good looking components had plenty of options and had good interoperability.
c) Ease of Re-Styling:
The components are re-styleable very easily. The documentation for every component is provided very clearly.
d) Quality Of Documentation:
Interactive examples of each component, clear navigation & information on theming, component options, and sample layouts.
e) Project Support:
Has around 1,500 stars on github.com and is maintained by Open-Source contributors.
For Our Project’s use-cases, Ant Design React appears to be the best fit. It offers a great number of components, and each is quite easy to use and integrate with others. We’re doing a lot of quick prototyping, and Ant is exceptional for these purposes. Its documentation and extensive examples are supremely helpful for getting started quickly.
However, for Everyone Ant-D isn’t necessarily the best option for everyone: If you need easy theming, then Semantic UI React might be a great fit.
We’ve been happy with Ant Design since we started using it, though we had some hiccups we were able to find a solution either through the documentation or Social Forums. Simply picking one UI library and sticking with it solves a lot of problems with consistency and bugginess that you might have with roll-your-own solutions or picking various single components from who-knows-where.
.png)
.png)
