Shulou(Shulou.com)06/02 Report--

This article mainly shows you "what are the updates of Ant Design 4.0", which is easy to understand and well organized. I hope it can help you solve your doubts. Let the editor lead you to study and study this article "what updates are there in Ant Design 4.0".

Ant Design 4. 0 has been released. What are the big updates this time?

Some major updates have been released this time. For example, we have added Dark themes, borderless components, RTL internationalization support, Table, Form, Select, and so on to greatly improve performance. Because there is a lot of content, avoid directly becoming a published document. Welcome to the Finch to view the full update: "here comes the official version of Ant Design!" "

After years of development, Ant Design has become an ecology. Please introduce what important members this ecology includes, and what is the direction of ecological evolution in the future?

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

Ant Design is like a tree, and there is room for imagination to spread branches and leaves on it. In the future, first of all, we will continue to carry out deep ploughing based on the design system, and then we will make progress with the relevant framework. At the same time, Ant Design will also be based on real business needs to enrich ecological products.

What is the biggest challenge that the antd team has overcome in the process from 3.0 to 4.0? What is the proudest new feature?

V4 version reconstructs a large number of underlying components together with community students, thus greatly improving the rendering performance of the components. For example, field updates to the Form component in v3 will cause the entire Form to re-render, which can cause serious performance problems in large forms. In v4, Form updates only the relevant field components, greatly reducing the rendering time. Virtual scrolling is built into components such as Tree, Select, TreeSelect, and so on, which greatly reduces the elements of actual rendering.

What is difficult to say is that this refactoring needs to deal with the animation contraction and stretching 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. But in virtual scrolling, each element is actually an independent element, so if you want to achieve the same animation effect as v3, you need to implement the related algorithm on its own. Therefore, we divide it into multiple stages and deal with different logic in different stages, so as to combine the animation implementation that supports virtual scrolling. The specific implementation logic is more complex, if you are interested, you can check the relevant code of rc-virtual-list.

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

From a personal point of view, the latter three are not contradictory. The component development of Ant Design generally has the following steps:

Designers design visual and interactive drafts

Engineers carry out development

Code Review & designer review.

Each link will be completed conscientiously and responsibly, and the Code Review part is also the longest stage. Code Review will repeatedly modify API and code implementation, and designers and developers will participate together to achieve the effect of 1 + 1 > 2. The development of components can not blindly pursue efficiency, from design to implementation need to be polished slowly. For example, as a typesetting component, Typography looks very simple, but it took a month from design to development, and API has been repeatedly adjusted to simplify developers' memory costs in the most streamlined way, while taking into account expansibility. At the design level, it is also considered repeatedly to achieve good visual effects in both Chinese and English context.

In the v3 version, the performance problem of the component is mainly due to the compatibility requirements of the old version of IE, so many implementations can only use a darker way, so the following problems will be mentioned so I will not repeat them. As the v4 IE minimum compatible version has been changed to IE 11, these are no longer restrictions, which gives us the ability to update gradually and improve performance.

What are the reasons for making some trade-offs in terms of compatibility with IE? What are the difficulties of being compatible with IE?

V3 has to make some compromises in order to be compatible with the old version of IE. For example, if the flex layout cannot be used, we will do it with float and table; we cannot use sticky,Table to render an extra Table to achieve the fixed column effect. In recent years, with the upgrade of windows system, the proportion of old IE has become smaller and smaller. This is also an opportunity for us to get rid of the overly old IE version in v4 and pack it light.

The difficulty of being compatible with IE is that a lot of behavior is unexpected, often the code is fine, but page rendering is not normal. For this situation, we need to do a lot of cool techs. For example, let the component force refresh, use IE only's css hack, and so on. In addition, many of the new HTML features mentioned above cannot be used in the IE environment and can only be self-simulated to cause serious performance loss.

Do you think antd's current support for TypeScript is in place? If there are still deficiencies, what are the main areas and how will they be solved?

In v3, most of our underlying components are written in js, so the type definition of ts is done extra on antd, which has the disadvantage that it doesn't exactly match the underlying components. In the v4 version, we also converted a large number of underlying components to the ts version, using these definitions directly on the antd side, thus avoiding past definition mismatches. Of course, this process is not achieved overnight, there is a sub-section of the underlying components have not yet been completed, welcome students in the community to help make the definition of ts better.

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

In the announcement, the contributions of two community students @ saeedrahimi @ shaodahong are specifically mentioned. Can you tell us more about the story?

@ saeedrahimi classmate he contributed the RTL internationalization ability of all components to v4, changing thousands of lines of code. This function is so big that you can see dazzling after a PR. So we Review & Update over and over again, and finally implement it, which is not easy in the middle.

@ shaodahong has been an enthusiastic volunteer since v3 and helped to do a lot of work in the release of v4, of which he mainly completed the development of the compatibility package. With compatibility packs, developers can upgrade antd from v3 to v4 at as little cost as possible.

Of course, in addition to these two students, there are a lot of volunteers involved in the development of v4. I would like to take this opportunity to thank all the volunteers again.

Some users report that it is difficult to feed back to the community, and the source code is implemented using rc-* encapsulation, causing developers to be deterred from trying to help repair bug. Have you considered how to solve this problem? How does the antd team view contacts and interactions with community developers?

Rc components are designed to be simple and flexible, so they are not strongly dependent on styles. In addition to component functions, antd also has its own design system, so it will be heavier on UI Design. This partition allows users to encapsulate directly based on rc components if they only want to use the functionality of the component but do not need its style. For example, rc-field-form, the underlying component of Form, has no style at all, while the antd out encapsulates styled Form and Form.Item without exposing the underlying Field components. In fact, before the release of v4, many community students have packaged their own components based on rc-field-form. The two are different in design ideas, so they will not be merged in the future.

From the perspective of PR, in fact, there is no need to have too much psychological burden. Components perform their own functions and will not be deterred by the addition of an rc component library at the bottom. In fact, from the usual maintenance point of view, volunteers send PR to antd and rc is the same, there is no bug because in the rc component can not be repaired. Even sometimes, in turn, some users only use rc components, so they send a lot of PR to rc components to help improve, which makes these PR also feed back to antd.

What is the subsequent version planning? What new features will be expected in the future?

After the release of v4, due to the refactoring of a large number of components, the main focus will be on bug fix for the time being. When it is stable, we will be ready for React's future Concurrent model. In addition, there are plans to do some research for css in js to support the ability to change topics dynamically. Of course, as I just said, the priority now is to focus on bug fix.

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 of open source in recent years?

The popularity of Ant Design is inseparable from the support of the students in the community, and it is everyone's recognition that makes Ant Design today. The survival of an open source project requires not only the maintenance of updates, but also the strength of the community. In the open source world, you will see a lot of excellent projects. But with the passage of time, gradually no longer maintenance. Therefore, how to maintain the vitality of the project is the top priority.

It has been many years since Ant Design wrote his first line of code in 2015. The biggest harvest is the help from the students in the community to build Ant Design into a first-class front-end component library. At the same time, as an open source project, we must maintain the project openly and transparently in the way of open source. In order to live up to the trust of the community students.

These are all the contents of this article entitled "what are the updates in Ant Design 4.0". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.