Ant Design Pro v4 is Here

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

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

🚀 快速开始

新建一个空的文件夹做为项目目录，并在目录下执行：github

yarn create umi // or npm create umi
复制代码

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

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  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 的项目！npm

yarn
yarn start
复制代码

🏆 TypeScript

在 v4 中，不管脚手架仍是区块所有用 TypeScript 重构。TypeScript 对开发的提效无比明显，良好的生态，能极大的减小你的查询 API 的时间。更可杜绝的输错参数或者拼错变量名这种低级错误，更棒的是因其强大的类型的表达能力，你能够更轻松的读懂一个旧的项目。由于类型在必定状况下能够当成文档使用。api

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

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

为了适应更多的状况，咱们还额外提供了 JavaScript 的版本，在初始化项目的时候能够选择 JavaScript 的脚手架。markdown

👎 JavaScript 丢失了不少特性，对编辑器也不够友好。咱们强烈建议你优先尝试使用 TypeScript。antd

📦 Layout

在 v2 的版本中，开始一个新项目的流程通常都是：

clone 项目
删除用不到的页面
开始开发

大部分参考页面你都不必定会用到，可是 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。

有一些你如今就能够开始使用 Descriptions、PageHeader、Typography ，这些组件能够知足很是多的页面展现需求。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.js 和 BasicLayout.less。用新版 BasicLayout.tsx 替换掉。

若是你修改了原 BasicLayout，记得将更改的逻辑应用到替换后的文件中。

🧩 Ant Design 4.0

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

面向将来，放弃老的浏览器和 React 15，兼容即将到来的 React 17。
最大程度向下兼容。
关键组件重构重作。
性能更好、体积更小。

你能够在这篇 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 提交问题。

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