💥 Ant Design 4.0 is in progress!

Preview Site

next.ant.design

Recap

It has been 16 months since December 2017 when Ant Design 3.0 was released. We fixed plenty of bugs and added lots of new features(changelog) within 4289 commits, 138 releases, 7675 issues & PRs, that brought us 25375 stars in GitHub. We also released Ant Design Pro 4.0. Support for TypeScript, blocks, and abstraction of layouts. We want to thank every contributors and your contribution makes Ant Design better and better.

At the same time, we released Ant Design Pro 4.0. Support TypeScript, Block and Provides Layout component.

At this moment, we are thinking: Ok then, what's next? What can we do to make Ant Design going further? It is the time to plan for the Ant Design 4.0! 🍻

Following is the detail plan about 4.0. We may adjust some of them since it's still in planning.

🌓 About Compatibility

We will remove deprecated props in 4.0, which means deprecated props will be no longer supported. If you're not getting any warning from latest 3.x, it will be seamless to upgrade. Otherwise, there will be half year maintenance phase for 3.0 after 4.0 is released.

We know it's troublesome to do upgrades. We're planning to provide compatible package to handle this:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (



);

This package will be available till the end of 3.x maintenance phase.

Use latest React API

We have provided React 15 support for a long time. But it seems not necessary from social feedback (There are nearly 0% of issues about React 15), since React has strong compatibility. To support React 15, we use new API very carefully. This will be not a problem after 4.0 anymore:

• Provides Hooks api for related component
• Support Concurrent mode (Still preparing, will continue adjust in 4.0)
• Embrace React 17(wow！~)

Stop IE9/10 support

Ant Design 3.0 spends lots of effort to support old IE. But according to the industry statistics, usage of IE9/10 get lower and lower with Windows upgrade. We will stop support IE 9/10 in 4.0 (but still support IE 11), which means newer browser feature support will be possible.

Other compatible update

• Less 2.x upgrade to Less 3.x
• Icon adjustment
• Mention deprecated

📦 Reduce size

Optimize icon size

We use svg icon (why svg?) after [email protected] . We use string name to map the icon, which can not load on demand. We import all the icon file into antd which makes bundle size large. We will handle this in 4.0.

Old Icon usage way will be** deprecated**:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>


  </div>
);

Will use import single Icon instead in 4.0 :

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>

    } /&gt;
  </div>
);

You can still use compatible way in old way.

Remove Draft.js

We use Draft.js in Mention component to confirm popup location, but only a small part functionality of it is used. It seems over cost. We plan to remove Draft.js in 4.0, and use other light solution instead. At the same time, to distinguish with origin Mention component in 3.0, a new component Mentions will be introduced to avoid api conflict. Also, it supports compatible way:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (

);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (

);

🧭 Performance optimization

We get few performance issue for large data set from community. We'll make sure some optimization will be done here.

Virtual scrolling

Virtual scrolling is a common way to do performance optimization. We're planning to support this natively in components. It may not finish immediately in 4.0 release. Will integrate step by step.

Refactor Animation

We did some hack with animation in the past. It works well in most case. We plan to use much pure React way instead of hack one. This update will be in silence, nothing will affect you.

🧩 Components Optimization

We've add many components in 3.0, and will continue in 4.0. These components will come from business scenario, Ant Design Pro and social requirement. New components process will be same as Ant Design 3.0, we will put related design file in PR and collect it in the official website. Release in each minor version.

Besides, we plan to refactor some key components to make easier to use. Includes but not only:

Form

Form is one of the most usage component. We notice that social have many comments on the API design.
We wish to simplify the API in 4.0:

• Form will include data store. No need to use Form.create() anymore.
• Fom.Item will include field bind. No need to use getFieldDecorator anymore.
• Form.Item will keep the value, but the validator will be disabled when field removed.

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (





  );
}

In the real world, we meets lots of communication between forms (usually in detail configuration). We want to make it easier:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (




  );
};

If you want to follow Form progress, you can see here.

Table

In the past, we received lots of Table feedback. We know that expand and scroll props not works well together. This time, we will focus to fix it. Besides, we will do much on the Table optimization. And easy way to do the layout：

const Demo = () => {
  return (
    <table>
  );
};

We also plan to add Summary Footer to support summary row.

New DatePicker

Current DatePicker satisfies most requirement. But from community discussion, we can dig it more. We will provide rest year picker and ranger picker (discuss). And also, we will update the DatePicker design style to enhance user experience.

🚀 Continue updating

Besides content above, we also plan to do some continue updating. These will keep updating in 4.0 to enhance development and user experience.

🧶 Improve accessibility

Ant Design 3.0 has limited support for accessibility, we plan to adjust the dom structure and add more aria mark to enhance the screen reader experience. Besides, we also prepare to optimize key board interaction.

🎯 Developer API standard

We find some API naming style is little different with others. It's not a problem for Typescript developer, but it's hard to remember otherwise.
Thus, we will create a naming standard document which includes current APIs and related naming rules. In new feature, will follow the naming rule to avoid API naming conflict. Also, we welcome community opinions about this in PR.

💼 React Strict Mode

If you tried wrap antd component with `` , you will get warning. We've already replace some components with new life cycle method. This work will continue in 4.0.

💡 Improve developer experience

In the past, we found that some issue comes repeatedly. These issues somehow are usage question. We think we can do something on this (actually already start in 3.0). In development environment, we will warning unexpected status (like invalidate Moment object, prefix/affix adjustment cause dom structure change, etc.). We believe that console is the first place to focus when meet problem. Provides proper tips can help to find the problem. At same time, we will summary other questions into FAQ of each Component document. From the side of maintenance, we can't help on each usage question, but they do exist, particularly with new come developers. FAQ may help to save lots of searching time. If you have interest on this, welcome to help enhancing developer experience with us.

🐱 Design Resource

Ant Design is not only a component library. Design is the support power. We will sync update the design resource (Sketch component package, Kitchen tools, Design Token, etc.). We will also adjust current component style to enhance user experience.

Milestones

Here is our milestones plan. We will create related issue on Github. And also welcome social contributor:

Q2

• Mark related API as Deprecated and remove from document.
• Low level component warn update.

Q3

• Create antd 4.0 branch and update the document.
• Components development.

Q4

• Release Ant Design 4.0.

Welcome aboard

We will keep you posted during the developing process. Content above may not be final. Thought/advice from community will be more than welcome! Let's make Ant Design 4.0 better!

引言

Ant Design 于 17 年 12 月发布 3.0 以来，已经经历了 16 个月的时间。在此期间，我们修复了海量 Bug、以及增加大量新功能（更新日志）。提交了 4289 个 commits，发布了 138 个版本，关闭了 7675 个 issues 和 PRs，新增了 25375 个 stars。我们也发布了 Ant Design Pro 4.0。支持了 TypeScript、区块以及对布局进行抽象。我们想感谢各位社区志愿者，是你们的奉献使 Ant Design 变得更加好用。

与此同时，我们也在思考下一步是什么，如何才能使 Ant Design 走的更远，我们预计在今年 Q4 发布 Ant Design 4.0 版本。🍻

以下是关于 4.0 的详细计划，当然这仍在计划中。正式发布时可能会有调整。

🌓 兼容性调整

我们将在 4.0 中，对标记为 Deprecated 的属性进行移除。届时你将不能再使用废弃的方法。如果你将你的项目升级到最新的 3.x 于控制台中没有看到来自 antd 的 warning 信息，那么你升级 4.0 也将是无缝的。对于 3.x 版本，我们仍将在 4.0 发布后额外进行半年的维护工作。

我们知道升级版本舍弃废弃 API 的精力非常大，我们计划在发布 4.0 的同时也提供兼容包以协助项目过渡（相关 API 仍在设计中，正式发布时可能会有所不同）：

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (



);

该兼容包同样会维持更新直到 3.0 维护工作停止为止。

使用最新版本 React API

我们相当长一段时间内都在支持 React 15 版本，但是从社区反馈上看，这其实并不重要（React 15 的 issue 数趋近于 0%）。因为 React 本身就具备非常健壮的兼容性。而为了支持 React 15，我们在开发过程中对于新的 API 使用非常慎重。在 4.0 版本后，我们会以最新 React 版本作为基准进行开发：

• 提供相关组件的 Hooks 版本
• 支持 Concurrent 模式（当然，需要准备的事情比较多，会在 4.0 发布中持续调整。）
• 拥抱 React 17 （wow！~）

停止 IE9/10 支持

Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。然而根据业界统计，IE9/10 浏览器无论是在全球还是在国内份额都在随着 Windows 系统更新而在不断缩减。我们在 4.0 版本，会停止对 IE 9/10 的支持工作（但仍然会支持 IE 11）。这也意味着，支持新的游览器特性成为可能。

其他兼容性调整

• Less 2.x 升级为 Less 3.x
• Icon 使用变更
• Mention 废弃

📦 减小体积

优化图标尺寸

在 [email protected] 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名设置图标的 API，在这种设计下我们无法做到按需加载，因而我们全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们将会对此进行调整以优化体积。

旧版 Icon 使用方式将被废弃：

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>


  </div>
);

4.0 中会采用按需引入的方式：

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>

    } /&gt;
  </div>
);

你将仍然可以通过上文兼容方法继续使用。

移除 Draft.js

我们在 Mention 组件中引入了 Draft.js 以实现下拉提示定位功能，然而我们只使用了它很小一部分的功能。从性价比上考虑，显得有些浪费。我们计划在 4.0 中移除对其的依赖，转而使用更轻量级的解决方案。同时，为了区分 3.0 中的 Mention 组件，我们会提供一个新的组件 Mentions 以防止 API 冲突。同样的，它也支持通过上文兼容方法来继续使用：

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (

);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (

);

🧭 性能优化

在维护过程中，我们收到不少关于大数据的下的性能讨论。为此，我们也计划对性能进行优化。

虚拟滚动

虚拟滚动是一个常见的优化手段，但是在 Ant Design 中由于存在动画效果，使得自定义虚拟滚动并不那么容易。现在，我们计划带滚动的组件中原生支持虚拟滚动。当然，我们并不会保证在 4.0 发布时所有组件已经更新完成，会持续更新。

动画改进

过去，我们使用了一些 hack 的方式来对动画进行处理。大部分场景下，都工作的相当好。在 4.0 中，我们计划对此进行调整，摒弃 hack 的方式转向更加 React 的道路。该调整将会静默更新，你不需要对此做任何更改。

🧩 关于组件

在 3.0 中，我们已经持续添加了不少组件。在 4.0 中，我们仍将进行下去。这些组件将从我们的业务场景、Ant Design Pro 以及社区需求中进行提炼，这是一个持续的过程。新增组件的流程与 Ant Design 3.0 相同，我们会沉淀相关组件的设计稿在 PR 中展示并与官网进行更新，开发完成后会在每个月的 minor 版本中发布。

此外，我们还准备重构一些关键组件，以提高其开发与交互上的易用性。其中包含但不限于：

Form 组件

表单组件的受众群体十分庞大，我们也注意到社区对繁琐的表单 API 的抱怨，在 4.0 里我们希望探索更好的 API 形式以简化开发成本：

• Form 将默认聚合表单数据域，你不再需要通过 Form.create() 创建上下文。
• Fom.Item 将默认聚合表单字段，你不需要通过 getFieldDecorator 绑定 Field。
• Form.Item 的值将总会保留，但是其验证功能只有表单项可见时才会生效。

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (





  );
}

在现实场景中，我们遇到了多表单联动的场景（常见于详细化配置）。我们知道这使用起来并不方便，因而也将提供表单间联动的功能：

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (




  );
};

如果你想关注 Form 进度，欢迎查看进度。

Table 组件

在过去的版本中，我们接到了关于 Table 组件非常多的反馈。我们知道过去 Table 的 expand 和 scroll 属性一直不能很好的工作。这一次，我们会着力解决这方面的冲突问题。此外，我们还会进一步对 Table 组件进行性能调优。以及探索一些更加简易的表格布局方式：

const Demo = () => {
  return (
    <table>
  );
};

此外，我们还计划添加 Summary Footer，以支持汇总需求。

DatePicker 重做

现有的 DatePicker 已经满足了大部分需求，但是从社区讨论来看。我们还有更加深入挖掘的机会，我们将补全剩余的年选择器以及对应的范围选择器（讨论）。此外，我们会调整相关日期时间选择器样式，进一步降低用户的认知成本。

🚀 持续更新

除了以上内容外，我们也计划一部分持续更新的内容。这会在 4.0 中保持跟进，以更好的提升用户开发与使用体验。

🧶 改进无障碍体验

Ant Design 3.0 中对于无障碍体验支持度稍显欠缺，为此我们计划调整组件结构并添加更多的 aria 标记以改进读屏体验。此外，我们还准备优化现有的组件键盘交互方式，以确保可以有更好的全键盘交互体验。

🎯 开发者 API 规范

在演进过程中，我们发现少量 API 风格会与其他组件显得格格不入。对于 TypeScript 用户而言这不是什么问题，但是对于其他用户而言，这会造成记忆困扰。

因此我们会整理出一份标准命名文档。该文档会包含现有的 API 列表以及恰当的命名规范。在新增功能时，也会依据该规范进行命名。以避免未来可能产生的 API 分歧。当然，我们也欢迎社区同学在 PR 中进行反馈。

💼 React 严格模式

如果你尝试在 antd 组件外包裹 `` 你会得到不少来自 antd 组件的警告信息。我们在 3.0 时已经更新了一部分组件的生命周期方法。在 4.0 中，我们仍将继续。

💡 改进开发者体验

在过去的维护过程中，我们发现某些 issue 会往复的出现。这些 issue 常见于一些使用规范或者应用场景的问题。为此，我们决定在这边做出改进（其实从 3.0 开始，我们已经在改进了）。在开发环境中，我们对于一些意外情况（例如无效的 Moment 对象、Input 的 preffix/affix 动态调整导致的 Dom 结构变化等等）会在控制台进行提示。我们确信，控制台是开发者在遇到问题时首先会关注的地方，在此提供适当的提示可以帮助快速定位问题。同时，对于一些特殊的使用方式或者场景。我们会在相应的组件文档中提供 FAQ。从项目维护角度看，我们的精力无法针对使用方式的 issue 做详细的解答。但是这些疑问是现实存在的，尤其对于新人开发者而言，一个 FAQ 可以帮助节省大量搜索时间。如果你有兴趣，也欢迎社区志愿者帮助一起完善开发者体验。

🐱 设计资产管理

Ant Design 不仅仅是一套组件库，背后有着强大的设计体系作为支撑。我们在 4.0 会同步更新最新的设计相关资产（Sketch 组件包、Kitchen 工具集、Design Token 等等），以方便设计师以及对设计感兴趣的同学作为参考。也会对现有的组件设计样式进行微调，以提升视觉效果以及用户体验。

时间计划

以下是我们的时间安排，其中部分组件更新是持续进行的。我们会在 github 上建立相关 issue，也欢迎社区志愿者一同参与：

Q2

• 将需要废弃 API 标记为 Deprecated 状态，并于文档中清除。
• 底层组件进行预热。

Q3

• 建立 antd 4.0 分支，并进行文档更新。
• 底层组件开发。

Q4

• 发布 4.0 版本。

欢迎参与

在 4.0 开发过程中，上述内容可能会有所调整。欢迎社区同学提供宝贵的想法和建议，让我们把 Ant Design 4.0 一起做的更方便好用！