The author of Ant Design announces the story behind the version update!

Ant Design is an enterprise-level UI design language and React component library launched by Ant Financial. It has received widespread attention and use since its launch in 2015, and has currently received more than 57,000 stars on GitHub. . Recently, Ant Design released version 4.0, which brings some major updates. We interviewed Jiang Jilin, one of the core authors of the Ant Design team, and talked about some of the stories behind the 4.0 version update.

Ant Design 4.0 is released. What major updates does it bring this time?

There are some major updates released this time. For example, we added a dark theme, borderless components, RTL internationalization support, and redone components such as Table, Form, Select, etc. to significantly improve performance. Since there is a lot of content, avoid turning it into a published document directly. Welcome to Yuque to view the complete update: "The official version of Ant Design is here!" 》

After years of development, Ant Design has become an ecosystem. Please introduce the important members of this ecosystem. What is the future evolution direction of the ecosystem?

Ant Design (hereinafter referred to as antd) as a design system includes more than just a component library. In addition to the familiar Ant Design React, there are also Angular versions of NG-ZORRO, Ant Desin Mobile, Ant Design Landing, HiTu React, and Ant Design Vue from community volunteers. Vertically out-of-the-box mid-end front-end/design solution Ant Design Pro and the corresponding block market, as well as derived component libraries Pro Layout and Pro Table. Design also provides a lot of specification documents and related design assets.

Ant Design is like a tree, and it is very imaginative to spread its branches and leaves on it. In the future, we will first continue to carry out in-depth research based on the design system, and secondly, we will make progress along with relevant frameworks. At the same time, Ant Design will also enrich ecological products based on real business needs.

In the process from 3.0 to 4.0, what is the biggest problem that the antd team has overcome? What new feature are you most proud of?

v4 version and community classmates have reconstructed a large number of underlying components, thus greatly improving component rendering performance. For example, field updates of the Form component in the v3 version will cause the entire Form to be re-rendered, which will cause serious performance problems in large forms. In v4, Form will only update relevant field components, thus greatly reducing rendering time. Virtual scrolling is built into components such as Tree, Select, and TreeSelect, thus significantly reducing the actual rendered elements.

Speaking of the more difficult part, this reconstruction needs to deal with the animation shrink and stretch scheme based on virtual scrolling because it supports virtual scrolling. For example, in the v3 version of the Tree component, scaling can be achieved through native transition and height to achieve shrinking and stretching effects. However, in virtual scrolling, each element is actually an independent element, so if you want to achieve the same animation effect as v3 when scaling, you need to implement the related algorithms yourself. Therefore, we divided it into multiple stages and processed different logic in different stages to combine animation implementation that supports virtual scrolling. The specific implementation logic is relatively complicated. If you are interested, you can view the relevant code of rc-virtual-list.

How does antd weigh efficiency, performance/experience and quality in design?

From a personal perspective, the latter three are not actually contradictory. Ant Design's component development generally has the following steps:

• Designers design visual and interactive drafts;

• Engineers develop;

• Code Review & Designer Review.

Every link in the middle will be completed seriously and responsibly, and the Code Review part is also the longest stage. The Code Review process will repeatedly revise the API and code implementation, and designers and developers will participate together to achieve the effect of 1 1 > 2. The development of components cannot blindly pursue efficiency. It needs to be polished slowly from design to implementation. For example, the Typography component looks very simple as a typesetting component, but it took a month from design to development. The API has been repeatedly adjusted to simplify developers' memory costs in the most streamlined way. At the same time, scalability is also taken into consideration. The design aspect has also been repeatedly considered to achieve good visual effects in both Chinese and English contexts.

In the v3 version, the performance problems of components are mainly due to the compatibility requirements for older versions of IE. Therefore, many implementations can only use relatively hacky methods. The following issues will be mentioned so I will not mention them again. . Since the minimum compatible version of IE v4 has been changed to IE 11, these are no longer restrictions, giving us the ability to gradually update to better improve performance.

We have made some trade-offs in terms of compatibility with IE. What are the reasons? What are the difficulties in being compatible with IE?

The v3 version had to make some compromises in order to be compatible with older versions of IE. For example, if flex layout cannot be used, we use float and table; sticky cannot be used, and Table has to render an additional Table to achieve the effect of fixed columns. In recent years, with the upgrade of Windows systems, the proportion of old versions of IE has become smaller and smaller. This is also an opportunity for us to abandon the outdated IE version in the v4 version and travel lightly.

The difficulty in being compatible with IE is that many behaviors are unexpected. Often there is no problem with the code, but the page rendering is abnormal. For this situation, a lot of black technology needs to be done. For example, forcing components to refresh, using IE-only css hacks, etc. In addition, many of the new HTML features mentioned earlier cannot be used in the IE environment, and can only be simulated by yourself, resulting in serious performance loss.

Do you think antd’s current support for TypeScript is in place? If there are still deficiencies, where are they mainly located and how will they be resolved?

In the v3 version, a large number of our underlying components are written in js, so the type definition of ts is additionally done on antd. The disadvantage is that it does not completely match the underlying components. In the v4 version, we also converted a large number of underlying components into the ts version, and used these definitions directly on the antd side, thus avoiding the mismatch of definitions in the past. Of course, this process does not happen overnight. There are still some underlying components that have not yet been converted. Students in the community are welcome to help make ts definition better.

In addition, we also encountered some interesting and annoying problems - that is, due to the upgrade of typescript and @types/react ontology, the original ts definition became invalid. There was a time when antd's Button updated its ts definition every week to adapt to the latest @types/react. This situation is inevitable, just keep updated.

In the release announcement, the contributions of two community students @saeedrahimi @shaodahong were specifically mentioned. Can you introduce the story in detail?

@saeedrahimi Classmate He contributed the RTL internationalization capabilities of all components to v4 and changed thousands of lines of code. This function is very powerful, and you will be dazzled after just one PR. In this way, we reviewed & updated over and over again, and finally realized it, which was not easy in the middle.

@shaodahong was actually an enthusiastic volunteer during v3. He also helped with a lot of work during the release of v4, among which the development of the compatibility package was mainly completed by him. Through the compatibility package, developers can upgrade antd from v3 to v4 at the lowest possible cost.

Of course, in addition to these two students, there are many volunteers involved in the development of v4. I would like to take this opportunity to express my gratitude to all volunteers again!

Some users have reported that community feedback is difficult. The source code is implemented using rc-* encapsulation, which makes developers hesitate to help fix bugs. Have you considered how to solve this problem? How does the antd team view the connection and interaction with community developers?

The rc component is designed to be simple and flexible, so it does not have a strong dependence on style. In addition to component functions, antd also has its own design system, so it will be heavier on UI Design. This division allows users to encapsulate directly based on the rc component if they only want to use the function of the component but do not need its style. For example, the underlying component of Form rc-field-form itself has no style at all, while in antd it encapsulates the styled Form and Form.Item without exposing the underlying Field component. In fact, before v4 was released, many community students had already encapsulated their own components based on rc-field-form. The two are different in terms of design ideas and will not be merged in the future.

From the perspective of sending PR, there is actually no need to have too much psychological burden. The components perform their own duties, and you will not be deterred by having an additional rc component library at the bottom. In fact, judging from daily maintenance, volunteers have the same enthusiasm for sending PRs to antd and rc. There is no such thing as a bug that cannot be fixed in the rc component. Even sometimes, on the other hand, some users only use the rc component, so they send a lot of PRs to the rc component to help improve it, which also causes these PRs to be fed back to antd.

What is the subsequent version plan? What new features are worth looking forward to in the future?

After the v4 version is released, due to the reconstruction of a large number of components, the main focus will be on bug fixes for the time being. Once it's stable, we'll be ready for React's future Concurrent mode. In addition, there are also plans to conduct research on css in js to support the ability to dynamically switch themes. Of course, as I just said, the current priority is still focused on bug fixes.

As a widely used front-end star open source project, what do you think is the reason for the success of antd so far? What are the biggest gains and lessons learned from open source in the past few years?

The popularity of Ant Design is inseparable from the support of students in the community. It is everyone's recognition that makes Ant Design what it is today. The survival of an open source project requires the power of the community in addition to maintaining updates by the maintainers. In the open source world, you will see a lot of excellent projects. But as time goes by, it is gradually no longer maintained. Therefore, how to maintain the vitality of the project is a top priority.

Ant Design has come a long way since I wrote the first line of code in 2015. The biggest gain is the help from classmates in the community, who come together to build Ant Design into a first-class front-end component library. At the same time, as an open source project, it must also be maintained openly and transparently in an open source manner. So as to live up to the trust of classmates in the community.

The above is the detailed content of The author of Ant Design announces the story behind the version update!. For more information, please follow other related articles on the PHP Chinese website!