Ant.Design — Best React UI Framework / Component Library

Image Credit — https://stackshare.io/stackups/material-ui-vs-ant-design-vs-semantic-ui-react

I am currently working with a new start up as a Sr. Product Designer.

We are building a new B2B SAAS product.

One of our strong philosophy is that we look for Designers who can code (not javascript but experience with html/css).

The Dilemma — how do we start development?

We are very sure of using React.js as the frontend javascript library but the question was whether to build the UI from scratch or should we use a UI Framework.

After having worked on redesigning the entire Cleartrip UI we know what it takes to build something from scratch.

Yes we did build our own UI framework called ‘bento’ which we could not release publicly because the entire the companies vision shifted from desktop to the Cleartrip mobile app.

While it is still a wise decision and has its own benefit to build everything from scratch and it may work if you already have an established product in the market and you have enough time and bandwidth to do the investment to release another version in parallel.

After doing some research we concluded that it makes sense to use tools/frameworks/libraries that can help you save lot of effort, time and help you release your MVP as soon as possible.

The Research & Analysis

I evaluated approximately 15+ React UI Frameworks based on the following parameters:

  • Breadth of components (are there enough components to suit our needs now & in the future?)
  • Quality of implementation (including flexibility, depth, aesthetics)
  • Ease of re-styling (also considering the designer experience)
  • Typescript support
  • Quality of documentation
  • Project health (update cadence, extensiveness of use, depth of commitment)
  • Cost

Below is the result of the analysis (We kept ‘Material UI’ out of the league, that has its own reason)

Below is comparison of elements

The conclusion

For us Ant.Design from Alibaba wins the race based on the following parameters:

  • Git Hub Stars
  • Contributors
  • Number of Components and the variations it offers for each component.
  • All the components are available in Javascript and Typescript

If you are building a product that has a lot of forms, ant.design does a cool job.

There is a trade off that the bundle size is a bit heavier in size as compared to other frameworks but does it really matters that much if your product will be used on computers with a high internet connection.

Our experience with Ant.Design so far

The prototype has shaped out quite decently.

The deliverables from design team is a functional prototype to both the QC and Development team.

We use static JSON files to mock data and by putting a little bit of condition and logic we can are able to prototype all the use cases based on the user stories.

More Benefits of having Designers who can code:

  • No exchange of Sketch files and maintaining version
  • No need provide designs of different flows/scenarios
  • No need for Zeplin.
  • The QC team can easily write all test cases using the prototype
  • The developers do not need to work on the UI
  • Integration is seamless

Integration of few modules has already been completed and it is very seamless.

Our Design Process

  • Define User Stories
  • Ideation on white board
  • Sketch / Wire frames
  • And Code

We as designer are directly prototyping new screens/flows/interactions in the code based.

Resources

More Comparisons

Tools used

Will be happy to hear your thoughts and experience working with React UI Frameworks and Libraries in the comments section.

Designer — Listener— Writer. A self taught Designer turned Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store