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