關于Facebook iOS UI 工具ComponentKit簡介

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

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

為了解決這一挑戰性的問題，我們從自己的 ReactJS 得到啟發，把很多具體的東西抽象出來，做出一個功能性的、響應式程式設計模型的 iOS 原生 UI 架構 ComponentKit，目前 News Feed 在應用這個架構。

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 不僅僅可以極大地提高開發效率，界面響應速度和軟體的運作效率也會有極大地提升。

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'      

pod try ComponentKit