又快又美又好用的前端框架 Ant Design Pro V5 发布了

距离上次 Pro 发布已经过去了两年，这两年间前端的生态也发生了一些变化， Low-Code 大行其道，Bundleless 也随着 Snowpack，Vite 的发布越来越火热，前端在国际化，权限，数据流和布局方面已经有了最佳实践。 Ant Design Pro 致力于提升中后台的开发体验，在这些领域我们也提出了自己的解决方案。 ​

我们基于以上的问题，分别提供了最佳实践，模板组件，编译提速，项目集成组件，OpenAPI 五项重大功能更新，接下来我会详细介绍这些功能。

最佳实践

在 V5 中我们基于内外部的经验对中后台的常用领域做出了抽象，Ant Design Pro 研发框架基于 umi，在 V5 中我们通过一系列 umi 插件提供了一套中后台最佳实践。Pro 内置了以下的插件：

• plugin-access，权限管理
• plugin-antd，整合 antd UI 组件
• plugin-initial-state，初始化数据管理
• plugin-layout，配置启用 ant-design-pro 的布局
• plugin-locale，国际化能力
• plugin-model，基于 hooks 的简易数据流
• plugin-request，基于 umi-request 和 umi-hooks 的请求方案

这些插件都支持快速关闭，方便我们组合这些能力。同时基于 umi 的运行时的能力，这些 API 都可以从 umi 中直接导出。

// 从一个地方导出国际化，数据流，权限，网络请求
import { useModel, request, useAccess, getLocale, useIntl } from "umi";

数据流插件

在过去的几年中，前端一直都使用 redux 来作为默认的数据流方案，但是 redux 系列一直存在样板代码多，代码提示效果差等问题，导致开发体验一直不是很好。虽然 redux 的功能很强大， 但是在中后台开发中全局公用数据较少，没有复杂的数据流。借着 hooks 的东风我们在 V5 中提供了一个轻量的数据流方案 plugin-model 。

plugin-model 提供了 hooks 方案的 API, 并且基于 umi 的运行时能力提供了实时的 TypeScript 提示。

import { useModel } from "umi";

export default () => {
  const { user, fetchUser } = useModel("user");
  return <div>{user.name}</div>;
};

模板组件是我们去年工作的重点，早在 Pro 的第一个版本我们就提供了一系列的区块来帮助用户开发页面，在 2.0 中我们还提供了 umi ui 来管理区块。但是在实际的使用中我们发现区块上手成本高，耦合太强。并没有取得很好的反响。

在 2.0 中我们增加了 ProLayout 在社区得到了很好的反馈，ProLayout 给了我们灵感，我们是不是可以用抽象 Layout 的方式来抽象我们的常见页面。而在中后台中我们最常用的就是 CURD。在 ProCompoents 就是我们对于 CRUD 的抽象。

ProCompoents 以 valueType 为核心抽象了不同的 Field，而每个 Field 都包含了编辑和只读两种模式，这样一套抽象可以同时用于表格和表单。

所以我们可以根据 ProTable 的列配置生成查询表单。

这样 valueType 就可以生成表单和表格，并且在此之上增加了Field 的布局功能，我们可以用一套 Field 配置不同的 Layout 来生成不同的表单，同时我们还提供了可编辑表格，FormList 等低频高复杂度的组件。

对于开发者来说 ProTable 可以大大的减少代码量, 只需简单几行就可以得到一个全功能的表格。

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: "标题",
    dataIndex: "title",
    copyable: true,
    ellipsis: true,
  },
  {
    title: "创建时间",
    key: "showTime",
    dataIndex: "created_at",
    valueType: "date",
  },
  {
    title: "操作",
    valueType: "option",
    render: (text, record, _, action) => [<a>编辑</a>, <a>查看</a>],
  },
];

const Page = () => {
  return (
    <ProTable
      columns={columns}
      request={request("https://proapi.azurewebsites.net/github/issues", {
        params,
      })}
      rowKey="id"
      headerTitle="高级表格"
    />
  );
};