Ant Design作者公佈版本更新背後的故事！

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 打造成一流的前端元件庫。而同時作為開源項目，也必須以開源的方式公開透明的維護項目。從而不辜負社區同學的信任。

以上是Ant Design作者公佈版本更新背後的故事！的詳細內容。更多資訊請關注PHP中文網其他相關文章！