ComponentKit：一個功能性的和聲明性的 Facebook iOS UI 工具

Facebook 昨天發佈了他們的 iOS UI 開發工具 - ComponentKit，這是一個受 React 啓發而產生的 iOS 視圖框架，最開始用於 Facebook 的 News Feed，如今已經開始做爲整個 Facebook 的 iOS 開發工具。今天我把他們官方的介紹博客翻譯一下，你們互相交流。如下是博客原文全譯。

---

在 iOS 上面開發界面，須要建立視圖、配置界面、視圖分層等等不少步驟，也就不可避免的須要書寫 N 多的代碼。這還僅僅是界面設計，除此以外，完成 controllers 的回調、控制內部事務在界面上的顯示效果、界面的操控和內部事務的聯繫等等多方面的事情都須要手動解決。即使是界面很簡單的 App，若是存在這種複雜的雙向數據流的關係，那麼代碼也會變得很複雜很容易出錯。Qt 的信號、槽和 iOS 的 Target-Action 機制其實也是很容易實現這種雙向數據流的關係，可是沒有辦法解決界面和事務之間的聯繫，也有不少其餘的問題：性能、測試等。

這些問題曾經困擾了咱們多年。News Feed 是有着複雜的列表樣式外觀的 iOS 軟件，由許多的 Row Type 組成，每個 Row 都有各類各樣不一樣的很煩的界面樣式和交互方式，這個就很坑了。每次維護這個東西都像是在清理廁所，尤爲是它的功能還在不斷增長，它的代碼在不斷變多，版本迭代速度快到你都沒辦法直到天天都到底增添了什麼新代碼，上司還要拿着報告說「你這個軟件太慢了，影響用戶體驗，給你三個小時把這個 App 的速度提升 80%」。

爲了解決這一挑戰性的問題，咱們從本身的 ReactJS 獲得啓發，把不少具體的東西抽象出來，作出一個功能性的、響應式編程模型的 iOS 原生 UI 框架 ComponentKit，目前 News Feed 在應用這個框架。

如今 ComponentKit 將基於 BSD 協議對外開源。

ComponentKit 簡介

ComponentKit 使用功能性和聲明性（declarative）的方法來進行建立界面，和以往不一樣的是，ComponentKit 使用單向數據流的形式從 不可變的模型 映射到不可變的組件來肯定視圖的顯示方式。ComponentKit 的 declarative 看上去和 declarative UI(QML) 差很少，其實差得遠。QML 更偏向於 UI 設計的描述性，而 ComponentKit 則是作好基本 UI 和事件之間的聯繫，讓事件設計和 UI 設計能夠分開單獨完成。

內在決定外在，組件的功能和內部的層次決定了用戶界面該如何規劃，界面的規劃決定了 UI Kit 的元素層次結構的設計。

傳統作法的結果是大部分時間都被浪費在 UI 該如何實現，ComponentKit 卻可讓你把時間都用在在 UI 該怎麼設計上面。

例如，傳統的 iOS 開發中，爲了開發一個帶有 header、text 和 footer 的視圖，須要如下步驟：

1. 分別建立 header 視圖、text 視、footer 視圖的實例
2. 將三個視圖添加爲 container 的子視圖
3. 添加約束條件，讓每一個視圖和 container 的寬度相同
4. 添加更多的約束條件，確保每一個視圖的擺放位置

可是 ComponentKit 不同，ComponentKit 是一種描述性的開發包：你只須要提供你但願獲得什麼便能獲得什麼，而不和傳統的 iOS 開發同樣，再去一個一個地建立視圖、修改視圖樣式、添加視圖、添加約束條件。如圖所示，想要獲得這個佈局，只須要使用描述性的語言描述「我想要一個 header 組件，一個 text 組件，一個 footer 組件，他們的寬度相同，從上到下排列在一塊兒」。單單從這點來看，和 QML 相比，ComponentKit 更相似於 Bootstrap：提供已經完成的組件，你只須要決定組件如何擺放，即可輕鬆地開發出 UI 界面。

ComponentKit 已經徹底把如何渲染 UI 的事情抽象出來，程序員徹底能夠不去考慮具體是如何實現渲染的，也不用去考慮界面渲染該如何優化。ComponentKit 使用後臺線程進行界面佈局，也實現了智能組件重用，你徹底能夠不去考慮界面致使的內存泄露問題。ComponentKit 不只僅能夠極大地提升開發效率，界面響應速度和軟件的運行效率也會有極大地提高。

若是你想深刻了解 ComponentKit，你能夠 參考 Adam Ernst 的這篇文章，也能夠去看一下 Ari Grant 的視頻的後半部分。

將 News Feed 移植到 ComponentKit

ComponentKit 極大地提高了 News Feed 的 UI 響應速度和穩定性，也讓整個軟件的內部編碼更容易理解。ComponentKit 達到了以下的目標：

1. 減小了 70% 的界面渲染代碼，麻麻不再用擔憂我每次去維護以前都要看那本又臭又長的手冊而後花一上午的時間去理解那個錯綜複雜的佈局了。
2. 顯著地提升了滑屏的性能。ComponentKit 消除了許多的 container 視圖，盡力將全部的視圖結構化簡。更簡潔的視圖結構意味着界面的渲染性能和執行效率更高。
3. 提升測試覆蓋率。ComponentKit 對於 UI 模塊化的設計保證了每一部分均可以被分離開來單獨進行測試。再加上 snapshot tests，咱們如今幾乎已經能夠對 News Feed 的全部部分都進行測試了。

引入了 ComponentKit 以後，咱們可以維護更少的代碼，有更少的 bug 須要修復，有更大的測試覆蓋率：咱們如今能夠有更多的時間作羞羞的事情了

ComponentKit 已經在生產環境的 News Feed 上用了六個月，咱們以爲能夠一直用下去。如今將 ComponentKit 開源，讓整個 iOS 開發者社區的人都有 Facebook 的生產效率，也都能和 Facebook 同樣作出高性能的 App。很但願你也能在你的開發環境中使用 ComponentKit，而後給咱們反饋。

咱們從新定義瞭如何在 iOS 上開發界面，但願你也能用 ComponentKit 開發出更優雅的 App。

-（譯文完）-

快速入門

ComponentKit 已經在 CocoaPods 中可用了，只須要在 Podfile 添加以下代碼便可：

pod 'ComponentKit', '~> 0.9'

ComponentKit Demo：

pod try ComponentKit

更多資料：

• ComponentKit GitHub
• 開發者文檔

---

原文：Introducing ComponentKit: Functional and declarative UI on iOS