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 的組件開發一般有以下幾個步驟：
- 設計師設計視覺、交互稿；
- 工程師進行開發；
- 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 打造成一流的前端組件庫。而同時作為開源項目，也必須按照開源的方式來公開透明的維護項目。從而不辜負社區同學的信任。
閱讀更多 支付寶科技 的文章
