关于Facebook iOS UI 工具ComponentKit简介

简介: 在 iOS 上面开发界面,需要创建视图、配置界面、视图分层等等很多步骤,也就不可避免的需要书写 N 多的代码。这还仅仅是界面设计,除此之外,完成 controllers 的回调、控制内部事务在界面上的显示效果、界面的操控和内部事务的联系等等多方面的事情都需要手动解决。

在 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


相关文章
|
4月前
|
Dart 数据安全/隐私保护 Swift
iOS代码混淆工具推荐:IPA Guard详细介绍
iOS代码混淆工具推荐:IPA Guard详细介绍
187 0
|
23天前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
31 1
|
21天前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
2月前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异性:平台、工具和用户体验的对比分析
【7月更文挑战第30天】在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据着不可忽视的地位。本文将深入探讨这两大平台在开发环境、工具选择以及最终用户体验上的根本差异,并分析这些差异如何影响开发者的策略和用户的偏好。通过比较安卓的开放性与iOS的封闭性,我们将揭示不同平台下的开发哲学及其对生态系统的影响。
35 4
|
2月前
|
开发工具 Android开发 数据安全/隐私保护
探索iOS与安卓应用开发的异同:技术、工具和市场趋势
在移动操作系统的广阔舞台上,iOS和安卓两大主角各自演绎着怎样的精彩?本文将深入剖析这两大平台在应用开发过程中的技术差异、开发工具的选择以及面对的市场环境。通过数据支撑和案例分析,我们将一窥这两个系统如何影响开发者的决策,并探讨它们未来的发展方向。
|
2月前
|
监控 开发工具 Android开发
探索安卓与iOS开发的差异:平台特性、工具和市场趋势
在移动应用开发的广阔舞台上,安卓与iOS两大操作系统扮演着主角。它们各自拥有独特的平台特性、开发工具和市场定位,这些差异深刻影响着开发者的决策和产品的最终形态。本文将深入分析这两大平台的关键技术差异,探讨各自的开发环境和工具集,以及它们在市场上的表现和未来的趋势,为开发者提供一个全面的视角,帮助他们在这两个平台上做出更明智的开发选择。
|
2月前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
|
3月前
|
监控 Android开发 iOS开发
探索Android与iOS开发的差异:平台、工具和用户体验的比较
【6月更文挑战第25天】在移动应用开发的广阔天地中,Android和iOS两大平台各领风骚,它们在开发环境、工具选择及用户体验设计上展现出独特的风貌。本文将深入探讨这两个操作系统在技术实现、市场定位和用户交互方面的关键差异,旨在为开发者提供一个全景式的视图,帮助他们在面对项目决策时能够更加明智地选择适合自己项目需求的平台。
|
3月前
|
开发工具 Android开发 iOS开发
探索安卓与iOS开发的差异:从工具到用户体验
【6月更文挑战第20天】在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文将深入探讨这两个操作系统在开发环境、编程语言、用户界面设计以及性能优化等方面的关键差异。我们将通过比较分析,揭示各自平台的独特优势和面临的挑战,为开发者提供决策参考,并为最终用户提供更深层次的用户体验洞察。
|
2月前
|
测试技术 Android开发 iOS开发
IOS手机自动化一些工具的简单有哪些?
IOS手机自动化一些工具的简单有哪些?