距离 Pro 的上个版本发布已经过去了 9个多月，Pro 也进行了许多的迭代，但是大部分更新仍然以修复 bug 为主。在此期间我们遇到了许多使用 Pro 的痛点，也在思考如何能够解决这些问题。与此同时整个前端业界也在发生着变化，随着业务的复杂化，微前端已经呼之欲出。类似阿里云的控制台这样的上百页面，几百位开发者共同协同的项目也会越来越多。Serverless 方兴未艾，前端上云也仍在探索，每天都有新的挑战。
v4 就是我们应对挑战的最新尝试，我们带来了 TypeScript，Layout 组件，区块等新特性，并且逐渐抽离 Pro 的组件到 Ant Design 中。同时我们也带了新的项目创建方式，显著的减少了冗余的代码。
:rocket: 快速开始
新建一个空的文件夹作为项目目录，并在目录下执行：
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, 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 的项目！
yarn
yarn start
复制代码
:trophy: TypeScript
在 v4 中，无论脚手架还是区块全部用 TypeScript 重构。TypeScript 对开发的提效无比明显，良好的生态，能极大的减少你的查询 API 的时间。更可杜绝的输错参数或者拼错变量名这种低级错误，更棒的是因其强大的类型的表达能力，你可以更轻松的读懂一个旧的项目。因为类型在一定情况下可以当成文档使用。
TypeScript 更大的优势在于简化了重构的难度。当你接手一份并不怎么健壮的遗留代码时，TypeScript 的静态类型检查会使你事半功倍。重构可能引发的类型错误，在开发时就可发现。比如升级 antd@2 到 antd@4，如果没有 TypeScript，很难想象你在上线时要承受多大的心理压力。
我们期望有一天你接手项目的时候，发现它使用了 Pro 的脚手架而使你感到安心。你可以快速上手，快速开发，并且使用相同的抽象模型和代码风格。为了更好地做到这一点，TypeScript 是必不可少的一环。
为了适应更多的情况，我们还额外提供了 JavaScript 的版本，在初始化项目的时候可以选择 JavaScript 的脚手架。
:-1: JavaScript 丢失了很多特性，对编辑器也不够友好。我们强烈建议你优先尝试使用 TypeScript。
:package: Layout
在 v2 的版本中，开始一个新项目的流程一般都是：
clone 项目
删除用不到的页面
开始开发
大部分参考页面你都不一定会用到，但是 Layout 是一定会保留的 :grin:。
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。
:cat: 组件
Pro 中提供了一系列的组件。在 v4 中，我们将他们删除，他们将会逐步的沉淀到 Ant Design 中去，在 Ant Design 中他们会得到更好的支持，更棒的社区，以及更加健壮完善的 api。
有一些你现在就可以开始使用Descriptions、 PageHeader 、Typography ，这些组件可以满足非常多的页面展示需求。Pro 中那些偏重业务的组件，我们倾向于使用区块来进行安装。
:dart: 区块 （Block）
在 v4 中我们将 Pro 的资产分成了两块，Layout 和 Pages ，所有的界面都是这两部分组成的。我们将 Layout 组件化来提供开发效率，而区块就是我们对 Pages 提效的解决方案。每个区块都是一个页面 ，它可以带着自己的状态，本地化，甚至是 mock 数据和 server。基于 umi 的能力可以让它们方便快速的集成在脚手架中。
由于区块的特性，你新建的项目都会非常简洁，没有多余依赖，没有你用不到的一堆页面。它看起来是这样的：
如果你需要 Pro 中的页面，你可以通过区块快速添加。在 Pro 的演示网站中我们增加了一个按钮，当你希望使用这个页面到项目中，你可以通过点击并拷贝下面这行代码，将这个区块下载到你的项目中去。就像去商场购买一件商品一样简单：
如果你全都要（WOW!） ，你可以在项目中运行 npm run fetch:blocks ，我们的脚本将会下载所有 Pro 中区块到项目中，方便你进行演示。
在带来好处的同时区块也造成了一些问题， 最为显著的就是冗余的代码量，这将会是我们未来工作的重点。
:sparkles: 升级到 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 版本 **:beers:，我们计划在 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 也将不断迭代下去。无论代码如何改变，我们的初心和愿景不会改变，提升每一位用户的开发效率，为每个用户带来最极致的开发体验。
:new_moon_with_face: 还有一件事
随着各大操作系统和浏览器支持 dark 模式。Ant Design Pro 和 Ant Design 也在做一些开发来支持 dark 主题 ，这个方案现在还不够完善，如果你想尝鲜，欢迎安装试用。
