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 提交問題。

感謝你的閱讀，敬請安裝、嘗試。 🎉