Ant Design核心做者談4.0版本更新背後的故事

Ant Design 是螞蟻金服推出的一套企業級 UI 設計語言和 React 組件庫，從 2015 年推出開始便受到普遍的關注與使用，目前在 GitHub 上已收穫超過 5.7 萬個 star。近日，Ant Design 發佈了 4.0 版本，帶來了一些重大更新。前端之巔採訪了 Ant Design 團隊的核心做者之一的蔣吉麟，聊了聊 4.0 版本更新背後的一些故事。

Ant Design 4.0 發佈了，此次帶來了哪些重磅的更新？

​本次發佈了一些重大更新。好比咱們添加了暗黑主題，無邊框組件，RTL 國際化支持，Table 、Form、Select 等等的組件重作從而大幅提高性能。因爲內容很是多 ，避免直接變成發佈文檔。歡迎移步至語雀查看完整更新：《Ant Design 正式版來了！》

通過多年發展，Ant Design 已經成爲一個生態，請介紹下這個生態包括哪些重要成員，生態從此的演進方向是什麼？

Ant Design（如下簡稱 antd） 做爲一個設計體系，包含的不只僅是一個組件庫。除了耳熟能詳的 Ant Design React 外，還有 Angular 版本的 NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React，以及來自社區志願者的 Ant Design Vue。垂直方向開箱即用的中臺前端 / 設計解決方案 Ant Design Pro 和對應的區塊市場，以及衍生組件庫 Pro Layout 和 Pro Table。設計上也提供了很是多的規範文檔以及相關的設計資產。

Ant Design 像是一顆樹，在其之上開枝散葉很是的有想象空間。將來首先仍是會繼續基於設計體系進行深耕，其次會跟隨相關框架一同進步。同時 Ant Design 還會立足於真實的業務需求，來豐富生態產品。

在從 3.0 到 4.0 的過程當中，antd 團隊攻克的最大難題是什麼？最自豪的新特性是什麼？

v4 版本和社區同窗一塊兒重構了大量的底層組件，從而大幅提高了組件渲染性能。舉個例子，v3 版本中 Form 組件的字段更新會使得整個 Form 從新渲染，這在大型表單中會有嚴重的性能問題。在 v4 中，Form 只會更新相關的字段組件，從而大大下降了渲染時長。在 Tree、Select、TreeSelect 等組件內置虛擬滾動，從而大幅減小了實際渲染的元素。

說到比較難的，就是此次重構因爲支持虛擬滾動，因此須要處理基於虛擬滾動的動畫收縮伸展方案。舉個例子，Tree 組件在 v3 版本中，縮放能夠經過原生的 transition 與 height 來實現收縮伸展效果。可是在虛擬滾動中，每一個元素實際上是獨立的元素，因此縮放時若是要達到和 v3 一致的動畫效果，就須要將與之相關的算法自行實現。於是咱們將其劃分爲多個階段，在不一樣的階段處理不一樣的邏輯，從而組合出支持虛擬滾動的動畫實現。具體實現邏輯比較複雜，若是感興趣能夠查看 rc-virtual-list 的相關代碼。

antd 在設計上是如何權衡效率、性能 / 體驗和質量三者的？

我的角度看，後三者者其實並不矛盾。Ant Design 的組件開發通常有如下幾個步驟：

1. 設計師設計視覺、交互稿；
2. 工程師進行開發；
3. Code Review & 設計師評審。

中間每一個環節都會認真負責地完成，其中 Code Review 部分也是最漫長的階段。Code Review 環節會對 API 以及代碼實現反覆修正，設計與開發者共同參與，從而達到 1 + 1 > 2 的效果。組件的開發並不能一味地追求效率，從設計到實現都須要慢慢打磨。舉個例子，Typography 這個組件做爲排版組件，看起來很是簡單，可是從設計到開發完成前先後後花了一個月的時間，API 通過了反覆調整力求以最精簡的方式簡化開發者的記憶成本，同時也兼顧了拓展性。設計層面也是反覆斟酌以達到中英文語境下都有很好的視覺效果。

在 v3 版本中，組件的性能問題主要出在對舊版 IE 的兼容性需求上，於是很多實現只能使用比較黑的方式，下面的問題會提到因此不重複提了。因爲 v4 版本 IE 最低兼容版本改爲了 IE 11，這些再也不是限制，從而使得咱們有能力去逐漸更新，更好地提高性能。

在對 IE 的兼容性方面作了一些取捨，緣由是什麼？兼容 IE 的難點都有哪些？

v3 版本爲了兼容舊版 IE，不得不作一些妥協。好比說 flex 佈局不能用，咱們就用 float 和 table 來搞；不能用 sticky，Table 爲了實現固定列不得不額外再渲染一個 Table 達到固定列的效果。最近幾年，隨着 windows 系統的升級，舊版 IE 的佔比已經愈來愈小。這也是一個契機，讓咱們在 v4 版本能夠捨棄過於陳舊的 IE 版本，從而輕裝上陣。

兼容 IE 的難點在於不少行爲是非預期的，每每代碼沒有什麼問題，可是頁面渲染就是不正常。對於這種狀況，就須要作很多的黑科技。好比說讓組件強制刷新、使用 IE only 的 css hack 等等。此外前面提到的不少 HTML 新特性在 IE 環境下沒法使用，只能自行模擬致使嚴重的性能損耗。

你認爲 antd 目前對 TypeScript 的支持到位了嗎？若是還有欠缺，主要在哪些地方，將怎麼解決？

在 v3 版本中，咱們大量底層組件是經過 js 編寫，於是 ts 的類型定義是在 antd 上額外作的，這樣的缺點就是和底層的組件並不徹底匹配。在 v4 版本中，咱們將大量底層組件也轉成了 ts 版本，在 antd 端直接使用這些定義，從而避免了過去定義不匹配的狀況。固然，這個過程也不是一蹴而就的，還有一分部底層組件尚未完成轉，歡迎社區的同窗一同幫助讓 ts 定義作得更好。

除此以外，咱們也遇到一些有趣而惱人的問題——那就是因爲 typescript 和 @types/react 本體的升級，致使本來的 ts 定義失效。過去有過一段時間，antd 的 Button 每週都在更新 ts 定義來適配最新的 @types/react。這種狀況在所不免，保持更新便可。

在發佈公告裏專門提到了 @saeedrahimi @shaodahong 兩位社區同窗的貢獻，可否具體介紹下這裏面的故事？

@saeedrahimi 同窗他爲 v4 貢獻了所有組件的 RTL 國際化能力，改了數千行代碼。這個功能很是大，過一次 PR 能夠看到眼花。就這樣咱們一遍遍地 Review & Update，最終將其實現，中間很是不容易。

@shaodahong 其實在 v3 時就已是熱心志願者了，在 v4 的發佈中，也幫助作了不少的工做，其中兼容包的開發主要是由他完成的。經過兼容包，開發者能夠以儘量小的成原本將 antd 從 v3 升級到 v4。

固然，除了這兩位同窗外，還有很是多的志願者參與了 v4 的開發工做。借這個機會，再次向各位志願者表示感謝！

有部分用戶反饋社區反哺困難，源碼使用 rc-* 封裝實現，致使開發者想幫忙修復 bug 卻望而卻步，這方面有考慮如何解決嗎？antd 團隊是怎樣看待與社區開發者之間的聯繫和交互的？

rc 組件的設計思想是簡單且靈活，於是它不會對樣式有強依賴。而 antd 除了組件功能外，還有着本身的設計體系，因此在 UI Design 上也會更重一些。這種劃分，使得若是用戶只想用組件的功能卻不須要它的樣式就能夠直接基於 rc 組件進行封裝。舉個例子，Form 的底層組件 rc-field-form 自己徹底不帶樣式，而在 antd 出則是封裝出帶樣式的 Form 和 Form.Item 且不暴露底層的 Field 組件。其實在 v4 發佈前，已經有很多的社區同窗基於 rc-field-form 封裝出本身的組件了。二者從設計思想上是不一樣的，於是在將來也不會合並。

從發 PR 角度看，其實沒必要有太多的心理負擔。組件各司其職，不會由於底層多一個 rc 組件庫就望而卻步。其實從平時的維護看，志願者給 antd 和 rc 發 PR 的熱情是同樣的，不存在有 bug 由於在 rc 組件裏就修不了的狀況。甚至有時候反過來，有的用戶只用了 rc 組件，於是給 rc 組件發了不少的 PR 來幫助改進，這也使得這些 PR 一樣反哺給了 antd。

後續的版本規劃是怎樣的？將來還將有哪些值得期待的新特性？

v4 版本在發佈後，因爲大量組件的重構，主要精力暫時會聚焦於 bug fix 上。待其穩定後，咱們會爲 React 將來的 Concurrent 模式作好準備。此外，也有計劃爲了 css in js 作一下調研，以支持動態切換主題的能力。固然，就像剛剛說的，目前的首要任務仍是聚焦在 bug fix 上。

做爲被普遍使用的前端明星開源項目，你認爲 antd 發展至今取得成功的緣由是什麼？開源這幾年最大的收穫和教訓是什麼？

Ant Design 受歡迎離不開社區同窗的支持，是你們的承認才使得 Ant Design 可以走到今天。一個開源項目的成活，除了維護者的保持更新外，也須要來自社區的力量。開源界中，你會看到很是多的優秀項目。可是隨着時間推移，逐漸再也不維護。於是如何保持項目的活力是重中之重。

Ant Design 從 2015 年寫下第一行代碼至今走過了很多年頭。最大的收穫就是來自社區同窗的幫助，來一塊兒把 Ant Design 打形成一流的前端組件庫。而同時做爲開源項目，也必須按照開源的方式來公開透明的維護項目。從而不辜負社區同窗的信任。