What we know about Ant Design

It's hard to imagine a web application on React without a component library. You either gradually replenish such a library as needed, or use a hodgepodge of ready-made solutions carefully selected by the number of stars in the vast ocean of npm-modules.

If you're lucky, at the time of the project start you will already have a ready-to-use design system with React components, coordinated with designers and tested on combat projects. But what to do if there is neither design, nor designers, much less design systems on the project, and is not planned? What if the MVP version of the application should be ready already yesterday, and there is no time left to stylistically link the deuterpicker you write to that select box with the github? As a rule, in such cases before the start of the project, the choice is made to use ready-made component libraries to minimize the time spent writing your own bikes.

Given the popularity of React, its component approach and the wild hyip of recent years around design systems, the choice of such libraries should be amazing. So we thought when a couple of years ago we set about searching for a similar system. In fact, it was not so sunny. Libraries of components suitable for our needs can be counted on fingers. We chose Ant Design and since then have never regretted it, having implemented about six projects using this library.

Ant design

Strictly speaking, Ant Design is a complete design system, a visual language. With its principles, and the components library, which will be discussed in this article. The project is supported by developers from the Alibaba Group. The same people also support dva - a framework based on the popular React, Redux, React-Router stack, which is actively used in Alibaba projects. This explains the tight integration of both projects and the abundance of Chinese in the documentation and issue on the github. Ant Design itself is written in TypeScript, styled with Less and ported to Angular and Vue, but the ports are supported by completely different people.

We will not describe the principles of Ant Design as a system design or features of working with dva - all of these are topics for individual articles. Concentrating on what Ant Design has to offer, specifically as a component library for React.

What is good Ant Design

We will not list all the components: the list is quite impressive. It is better to get acquainted with it on the official site . The documentation is very detailed and with many examples. Most components can be used separately from Ant Design using react-component modules, which are suddenly supported by the same people from Alibaba.

Ant Design, in our opinion, has two features that make it stand out among similar libraries: tables and forms. Both of these features, in fact, are not simple components. About them and tell you more.

Tables

Built-in pagination
The default is client. But you can easily write your own. That is, it will not be difficult to implement server pagination.

Filtering and sorting
Out of the box filtering is available on the drop down selector with options. Describe the functions of sorting and filtering need to own. By default, tables cannot filter records by the entered string. But you can write your own custom filter, which is described in detail in the documentation. It must be admitted that the process is rather painful, but there are many possibilities.

Row selection
If you need to ensure that specific rows of the table are selected for further action by the user, the Ant Design tables provide a fairly flexible API for this.

Nesting
Sometimes it is necessary to make some rows of the table expandable to hide additional information. Ant Design tables can do this out of the box.

Cell merging
The merging of cells in the header and in the lines is different, but in both cases you need to know in advance which cells you need to merge and specify them explicitly. This greatly complicates the processing of dynamic data, but in principle does not make it impossible. We had a similar experience, which required the creation of additional abstractions that described the signs of the union and informed the table which cells were already merged and which were not.

Editable cells
The API for tables is generally quite flexible and allows you to render cells in any way you like. So the editable nature of cells is only a special case of ingenious use of the provided features, which is described in detail in the documentation.

Fixing columns and header
Perhaps the most popular feature for rendering large amounts of data. You can fix both left and right columns, the table header, and even all of them together. It works not without intermittent bugs, but quite bearable.

Ok, and what are the disadvantages?
The first thing I want to say is that Ant Design tables by default do not support virtualization (but the documentation describes in detail how to tie virtualization to the List using react-virtualized). And the default page size in 5 lines is not just. Because of the huge amount of crammed functionality, the render method in the tables is triggered with every sneeze (for example, when you hover over a line - this is necessary for the correct operation of fixed columns).

Because of all of the above, Ant Design tables are poorly suited for drawing a large number of rows — more than a hundred rows are already capable of drastically reducing application performance.

The second is the default table styles. Apparently, in Chinese, it is not considered shameful to use word-break: break-word ;, and this property is consciously used in tables, but as a result, even examples from official documentation without limiting the maximum width of tables can look like this:


The problem is easily solved, but unpleasant, when you come across it for the first time.

Continuing the conversation about styles, it can be noted that the content in the cells of the tables has a vertical alignment in the middle, which does not look good with a large amount of content in the cell. All this, of course, is a matter of taste, but on each new project with Ant Design we add a few style hooks that slightly change the appearance of the tables. The rest of the table Ant Design is a great tool that has few analogues in the React ecosystem. We go further.

Forms

By itself, the Form component container does little: hide the asterisks of required fields, change the relative position of labels and fields, call the onSubmit handler. More important is HOC Form.create, which adds a large number of useful methods and takes control of form elements wrapped by the built-in decorator.

In the created form, you can add validation rules with simple objects, synchronize field values ​​with the Redux Store, store default field values ​​separately, then use them by calling one method ... There are quite a few possibilities. Newbies often begin to use the components of the Ant Design forms separately, so before you start using forms on a project with Ant Design installed, we recommend that you carefully read the Form documentation section - owning this tool eliminates writing a large number of bicycles.

Form Components
Ant Design provides many useful customizable components for form layout. Basically, these are already standard fields, switches and selectors with some distinctive features.

• Input and InputNumber are two different components.
• DatePicker can choose only one day or period. We did not find a way to fasten the choice of two or more independent dates to it.
• RangePicker often doesn't fit on mobile devices. I have to use two datepickers.
• TimePicker is made in the form of three combined selections (hours, minutes, seconds), which may not seem familiar to everyone.
• API component Upload seemed to us not too flexible.

Customization and localization

The recommended way to customize the Ant Design theme is to rewrite Less variables with a less-loader . This method looks quite crutch and involves storing the theme config as a js-object. The bonus, however, is the possibility of using the variables specified in the config in all less-assembly files without additional imports.

The classic way - connecting and rewriting styles - also works, but is not recommended, because it pulls the styles of absolutely all components, regardless of whether you use all of them or only a few.

Separately, it should be said that it was more difficult to create a dark theme than we thought. This entailed not only the rewriting of a large number of variables (and there are a lot of them), but also the writing of a certain number of styles already on top of Ant Design. With light themes usually such problems do not arise.

For internationalization, Ant Design offers a LocaleProvider wrapper and a list of locales to choose from. ru_RU is present in the list.

Total

Of course, the Ant Design library is not without flaws. These include, for example, poor adaptation to mobile devices (there is even a separate Ant Design Mobile , but that's another story). And yet, against the background of alternatives, this project stands out for its scale, consistency, and a large set of ready-made solutions (there is even an official boilerplate for the admin panel - Ant Design Pro ). We recommend using Ant Design for a quick start of projects that are not too demanding to web design, MVP versions, projects that do not involve a wide audience.