Plan about Ant Design V5

2 years ago, we’ve released antd v4 which bring the compact & dark theme and performance improvement. And now, it’s time to plan for the furture version v5.

Motivation

For real world, it exist many web app which need more flexible design style. As design system, we should consider the balance of restraint and freedom. We don’t hope developer to modify too much on the detail style which may easily break on the minor version update with DOM structure adjust. It should be more safety to edit on the design token instead. And also part of style calculated by less not fully provided on the default.less file also makes it hard to modify globally. Thus, we want to remove all the hard code style on each components and makes it all controlled by design token. And same time, we notice that micro-frontends brings development efficiency but same time exists style scope resolution is costly. It means when development mix multiple version of antd in same page will face the style conflict. We want to resolve this on antd side. ​

Plan

Here is the plan that we want to apply on next major version:

New Design System

In next major version. We want to make the design as an agile, simple enterprise-grade product. It can help more businesses to quickly build their own design systems, while maintaining the consistency and high efficiency of the underlying infrastructure. We will:

1. Upgrade the default theme style to generate more abstract but powerful design token
2. Provides more user friendly interface to ensure developer can using antd design token to create their own components
3. Connect with Kitchen to provide a seamless design experience

CSS IN JS

We will use cssinjs to replace current less resolution. Less works well in the past years. It’s very powerful style compile tool. But weak on the dynamic theme & micro-frontend situation. In Ant Design Pro, we using online less compiler to realize the dynamic theme effect but not recommend to use on the production env. It’s little sticky. After replacement, it will reduce the time on compile phase and support the tree-shaking on client side. No need to install babel-plugin-import anymore. Usage of it is similar with current css variable resolution which is no need to config webpack:

<ConfigProvider theme={{ primaryColor: 'red' }}>
  <MyApp />
</ConfigProvider>

​ You can still use current antd className which we will also provided in v5.After alpha release, we will follow up to upgrade Ant Design Pro with cssinjs version.

React 18

React 18 rc version is out. It’s predictable the concurrent mode is coming. We will list all the un-compatible components and fix one by one. It’s in the plan but we can not promise much on this since React 18 is still on the way. We will:

• Remove all findDOMNode directly call in code. (but still provide fallback if passed node is not ref-fable)
• Check all render-time props calculation conflict.
• Test coverage of concurrent mode.

Drop IE support

Since modern browsers comes years, it’s a good time to think about this. For antd v4, we rise the version support to IE 11. And it will be to Edge instead in next major version. In this way, we can use some fashion style and reduce the code size for the compatible content. If you have the requirement of IE 11 support, you can still use v4 instead.

Replace Moment.js

We’ve notice that Moment is in maintain mode. As v4, we do not want to makes a breaking change on minor version. But it can be done in v5. In v4, we’ve provided the way to replace moment. And in next major version, Day.JS will be the default lib in antd. You can still use the same way as v4 to replace back if you want to.

API Upgrade

And in recent years, many developer also using antd in LowCode case. Most components works well on this but some popup components like Modal, Tooltip, Popover, etc. can hardly configure. We will provide related components to makes it easy to use on LowCode. ​ Also, we have some legacy props definition which increase the memory cost (like Cascader searchValue, onSearch ,showSearch, etc). We may clean up these props and make more unique. And for some API which export the ReactNode (like TreeSelect onSelect) will be replaced with data option instead. Since much components is replaced with Hooks version, there is no more exist node instance.

Compatible Package

Like v3 to v4, we will also provides the compatible package for user easy move to latest version. It will provide all the components with HOC version to make sure API alignment. And also provide the v4 theme, which is default implement on the compatible package. We hope the give warning when developer using the legacy interface and help to migrate to v5. And also, it’s better to use codemod tool to upgrade directly.

import { TreeSelect } from 'antd';

// To

import { TreeSelect } from '@ant-design/compatible-v4';

What’s in experimental tag version?

I guess you’ve already notice that antd release v5 experimental tag version. It’s not ready for production use yet. Our designers is still working on v5 design. This version is used for validating our new design token algorithm flexibility and CSS-in-JS availability. It still need long time testing and we will come in furture if we are real ready : )

To ensure our design token is enough flexible, we will continue adjust design token modal with desinger and find more possibility. So before major release, current token modal is not stable and we do not promise it will be the same as final design.

Summarize

During the time developing, nothing changed. We will keep maintain v4 and add new feature on it. At same time, we will fork v5 branch for the research of cssinjs solution and other attempt. You can view it on the github.

Task list here.

Have a nice day. Ant Design loves you : )

[MarkLyck]

finally getting rid of the less nightmare, that is amazing! Thank you!!!

[yesmeck]

Move from enzyme to React Testing Library? https://dev.to/piotrstaniow/time-to-say-goodbye-enzyme-js-348c