Ant Design 4.0 进行时!

3,551 阅读10分钟

引言

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 = () => (
	<Compatible>
    <YourApp />
  </Compatible>
);

该兼容包同样会维持更新直到 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 废弃

📦 减小体积

优化图标尺寸

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

旧版 Icon 使用方式将被废弃

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
  	<Icon type="smile" />
    <Button icon="smile" />
  </div>
);

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

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

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

const Demo = () => (
  <div>
  	<SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

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

移除 Draft.js

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

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

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 性能优化

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

虚拟滚动

虚拟滚动是一个常见的优化手段,但是在 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 (
  	<Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

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

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

const Demo = () => {
	return (
  	<FormContext>
    	<YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

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

Table 组件

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

const Demo = () => {
	return (
  	<Table
      header={{
      	templateAreas: `
					name    address     address
					name    building    no
				`,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

表格布局

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

DatePicker 重做

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

🚀 持续更新

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

🧶 改进无障碍体验

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

🎯 开发者 API 规范

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

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

💼 React 严格模式

如果你尝试在 antd 组件外包裹 <React.StrictMode> 你会得到不少来自 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 一起做的更方便好用!