Ant Design
首发于Ant Design
Ant Design Pro v4 is Here

Ant Design Pro v4 is Here

距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主。在此期间我们遇到了许多使用 Pro 的痛点,也在思考如何能够解决这些问题。与此同时整个前端业界也在发生着变化,随着业务的复杂化,微前端已经呼之欲出。类似阿里云的控制台这样的上百页面,几百位开发者共同协同的项目也会越来越多。Serverless 方兴未艾,前端上云也仍在探索,每天都有新的挑战。

v4 就是我们应对挑战的最新尝试,我们带来了 TypeScript,Layout 组件,区块等新特性,并且逐渐抽离 Pro 的组件到 Ant Design 中。同时我们也带了新的项目创建方式,显著的减少了冗余的代码。

🚀 快速开始

新建一个空的文件夹作为项目目录,并在目录下执行:

yarn create umi // or npm create umi

选择 ant-design-pro 就是 v4 的脚手架了。

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

脚手架将会自动安装,然后运行即可跑起一个 Ant Design Pro V4 的项目!

yarn  
yarn start

🏆 TypeScript

在 v4 中,无论脚手架还是区块全部用 TypeScript 重构。TypeScript 对开发的提效无比明显,良好的生态,能极大的减少你的查询 API 的时间。更可杜绝的输错参数或者拼错变量名这种低级错误,更棒的是因其强大的类型的表达能力,你可以更轻松的读懂一个旧的项目。因为类型在一定情况下可以当成文档使用。

TypeScript 更大的优势在于简化了重构的难度。当你接手一份并不怎么健壮的遗留代码时,TypeScript 的静态类型检查会使你事半功倍。重构可能引发的类型错误,在开发时就可发现。比如升级 antd@2 到 antd@4,如果没有 TypeScript,很难想象你在上线时要承受多大的心理压力。

我们期望有一天你接手项目的时候,发现它使用了 Pro 的脚手架而使你感到安心。你可以快速上手,快速开发,并且使用相同的抽象模型和代码风格。为了更好地做到这一点,TypeScript 是必不可少的一环。

为了适应更多的情况,我们还额外提供了 JavaScript 的版本,在初始化项目的时候可以选择 JavaScript 的脚手架。

👎 JavaScript 丢失了很多特性,对编辑器也不够友好。我们强烈建议你优先尝试使用 TypeScript。

📦 Layout

在 v2 的版本中,开始一个新项目的流程一般都是:

  1. clone 项目
  2. 删除用不到的页面
  3. 开始开发

大部分参考页面你都不一定会用到,但是 Layout 是一定会保留的 😁。

Pro 的 Layout 的具有很多很棒的功能,无论是自动生成菜单,自动生成面包屑。各种美观的布局,即使是一个刚接触前端的同学,也可以为自己的项目快速搭建起一个框架。

但是强大也代表了繁琐,更加雪上加霜的是我们将所有的代码细节暴露给了每一个用户。虽然 Layout 看起来只是一个UI,但是逻辑却分散在多个文件中。对于开发者来说他可能只关注展示效果,但是为了修改一个小小的地方可能需要在好几个文件中跳转,还需要细心地观察数据的流向。对于开发者来说这是个很大困扰。更不用说繁琐的升级方式,几乎没有用户会在表现正常时升级 Layout

为了解决这些问题 ,v4 中我们抽离了 Ant Design Pro Layout。现在它作为一个包重新登场,保留了原来几乎所有的功能!而使用起来只要短短几行代码:

import ProLayout from '@ant-design/pro-layout';

render(
  <ProLayout
    logo={<img src="https://demo.com/logo.png" />}
    layout="sidemenu"
    navTheme="dark"
    fixSiderbar
    locale="zh-CN"
  />
, document.getElementById('root'));

也许你的代码已经成型很久,但是没关系,你也可以快速的接入。而且它只与 antd 耦合。这意味着它可以支持所有的脚手架。

在可定制性方便我们提供了非常非常多的 render 方法,你几乎可以自定义 render 任何的块 menu、header、footer 甚至是 title。在 api 方面也是靠拢 antd 的成熟方案。如果你熟悉 antd 的,用起来就会像一个强大的 antd 的组件一样,没有上手成本。如果你想立马尝试,看这里@ant-design/pro-layout。 欢迎点赞吐槽。或者发起 PR。

🐱 组件

Pro 中提供了一系列的组件。在 v4 中,我们将他们删除,他们将会逐步的沉淀到 Ant Design 中去,在 Ant Design 中他们会得到更好的支持,更棒的社区,以及更加健壮完善的 api。

有一些你现在就可以开始使用 DescriptionsPageHeaderTypography ,这些组件可以满足非常多的页面展示需求。Pro 中那些偏重业务的组件,我们倾向于使用区块来进行安装。

🎯 区块(Block)

在 v4 中我们将 Pro 的资产分成了两块,Layout 和 Pages ,所有的界面都是这两部分组成的。我们将 Layout 组件化来提供开发效率,而区块就是我们对 Pages 提效的解决方案。每个区块都是一个页面 ,它可以带着自己的状态,本地化,甚至是 mock 数据和 server。基于 umi 的能力可以让它们方便快速的集成在脚手架中。

由于区块的特性,你新建的项目都会非常简洁,没有多余依赖,没有你用不到的一堆页面。它看起来是这样的:

如果你需要 Pro 中的页面,你可以通过区块快速添加。在 Pro 的演示网站中我们增加了一个按钮,当你希望使用这个页面到项目中,你可以通过点击并拷贝下面这行代码,将这个区块下载到你的项目中去。就像去商场购买一件商品一样简单:



如果你全都要(WOW!) ,你可以在项目中运行 npm run fetch:blocks ,我们的脚本将会下载所有 Pro 中区块到项目中,方便你进行演示。

在带来好处的同时区块也造成了一些问题, 最为显著的就是冗余的代码量,这将会是我们未来工作的重点。

✨ 升级到 v4

Ant Design Pro 4.0 兼容了 2.0 的所有特性,从 2.0 升级到 4.0 不需要要做任何改动。在 Ant Design Pro 4.0 中,我们将 Layout 抽离成了单独的组件。你可以选择将其替换成最新的组件。

npm i @ant-design/pro-layout --save

src/layouts目录下,删除BasicLayout.jsBasicLayout.less。用 href="github.com/ant-design/a">新版BasicLayout.tsx替换掉。

如果你修改了原 BasicLayout,记得将更改的逻辑应用到替换后的文件中。

🧩 Ant Design 4.0

与此同时我们也在紧锣密鼓的筹划下一个 Ant Design 的大版本,预计在 2019 年 Q4 发布 Ant Design 4.0 版本 🍻,我们计划在 4.0 中解决一些饱受诟病的问题。

  1. 面向未来,放弃老的浏览器和 React 15,兼容即将到来的 React 17。
  2. 最大程度向下兼容。
  3. 关键组件重构重做。
  4. 性能更好、体积更小。

你可以在这篇Ant Design 4.0看到完整的路线图。

🥇 展望未来

从 2017 年 10 月 29 日 年 @afc163 发布了第一个版本以来,到现在的 2019 年 Pro 发生了很多的改变,底层框架修改为 umi,代码组织方式改为区块,完全的拥抱的 TypeScript,可以说已经和当初那个 Pro 已经不是同一个脚手架了,Ant Design 也发布了 4.0 的规划,在未来 Ant Design Pro 和 Ant Design 也将不断迭代下去。无论代码如何改变,我们的初心和愿景不会改变,提升每一位用户的开发效率,为每个用户带来最极致的开发体验。

🌚 还有一件事

随着各大操作系统和浏览器支持 dark 模式。Ant Design Pro 和 Ant Design 也在做一些开发来支持 dark 主题,这个方案现在还不够完善,如果你想尝鲜,欢迎安装试用。

🤝 特别鸣谢

感谢所有提交错误、发起PR、回复问题、编写文档等的人!特别感谢这两位社区伙伴 @xiaohuoni @imhele,他们承担了很大一部分的 v4 开发工作。

如果你在使用 Ant Design Pro 时遇到任何问题,可随时在 GitHub 提交问题

感谢你的阅读,敬请安装、尝试。 🎉

编辑于 2019-05-31

文章被以下专栏收录

    Ant Design 是一个致力于提升「用户」和「设计者」使用体验的企业级设计体系,利用统一的设计规范、前端实现、设计/研发工具链对产品研发赋能,全面提升企业级产品的使用体验和研发效率。