Why Ant Design is Great for React Development

I have developed several React web applications at WePay using the Ant Design library for the past year and wanted to share some things that I have learned.

Context

As I have mentioned in previous blog posts, I work as a software engineer on the Enterprise Engineering team at WePay, where we build applications to improve the efficiency of the company's operations, including recruiting, onboarding, offboarding, employee reviews, asset management, employee matching, mentor matching, and much more. These functions have all been extremely important to help the company double in size in the past year and to continue growing the team.

Of my time spent coding, I spend about 80% of my time writing Java backend code and around 20% on the React frontend. Because my team is small - I work with a senior software engineer - we have limited time to accomplish lots of projects. We would like to spend our time writing the business logic and as little time as possible writing any code that has already been created before. At the same time, we also want a nice looking UI so that our tools will gain adoption within the company. We chose Ant Design as our main React library because it satisfies both of these above criteria: minimizing the amount of time recreating the wheel while maximizing a clean, responsive look for our web applications.

My Team's Requirements

The applications that I have developed at WePay are proprietary so I cannot talk about the details, so I will exercise careful judgement in what general things I can mention.

What I can mention is that all of our applications generally share the same UI requirements:

• a way to display data (e.g. employees, assets, reviews, etc.) in a table
• a way to show statistics on that data
• a way to click into an entry and see more detailed information
• a way to execute certain actions on an entry or on a group of entries
• a way to save and submit form data

Ant Design

Ant Design can do all of these things mentioned above. Here are the components we used to solve each of these problems mentioned above:

Each of these Ant Design components are so powerful. My favorites are the Table and the Form components. I like how the Table component takes in data and you can also define the columns you would like to have. Each column has an index and you can specify your own rendering, sorting, and more. The Ant Design Form component is just as amazing. I like how you can set initial values into the form using a React ref. I like how you can also call a validate function on the form. There are just so many features of the Form that you can basically adapt it for any use.

I remember how at my previous company, we had a very customized UI and we could not find a library that fit our needs, so we ended up having to make a lot of components from scratch. I remember making tooltips from scratch, and I remember making things like Toast Notifications from scratch. That was all really unnecessary work. Looking back, we should have integrated parts of Ant Design or a similar React library to avoid unnecessary, reinventing the wheel type of work.

Ant Design vs. Ant Design Pro

One of the other design choices we thought through was whether to use pure Ant Design or Ant Design Pro. You can read more about Ant Design Pro here and they also have a neat demo. Ant Design Pro is also open-sourced / free to use and is marketed as an "out-of-box UI solution for enterprise applications." I did try using Ant Design Pro before for work and for personal projects, and found that it was too out of the box for me. They nudged me towards using certain libraries that I did not want to use, for instance Umi instead of Redux. I also did not find a need to have all of the graph components that Ant Design Pro had crafted.

A lot of the documentation for Ant Design Pro was also in Chinese at the time (since Ant Design is open sourced by Ant Financial which is owned by Alibaba), and I was worried that would make it harder to solve bugs if and when they came up.

Conclusion

We are still using Ant Design actively for our Enterprise Engineering applications, and I'm really happy with its performance. We have been hesitant to upgrade the Ant Design library version for fear of it having unintended side effects in our deployed applications. There is a large community around Ant Design now and I feel comfortable about getting info on how to engineer certain components or pages when I get stuck. If you have any thoughts or questions, please leave them below.