Cyanic简介：FFUF在iOS上实现了Epoxy和MvRx

一个受Airbnb启发，状态驱动的UI框架

去年，Feil，Feil＆Feil GmbH的移动团队看到了许多改进。 我们的Android团队采用MvRx作为构建状态驱动的UI的主要组件，而我们的Flutter团队创建了标准化的架构。

但是我们的iOS团队呢？

尽管Airbnb开源了Epoxy和MvRx，但没有迹象表明有iOS框架等效。 当2019年初没有发布iOS版本的公告时，我们决定创建自己的Cyanic版本，这是Epoxy和MvRx的组合。

什么是氰基？

Cyanic是旨在构建反应式，状态驱动的用户界面的框架。 它由RxSwift，RxDataSources，Sourcery，LayoutKit，功能性编程概念和Model-View-ViewModel范例支持。

在现代iOS开发中，大多数屏幕都是可滚动的，而使屏幕可滚动的两种方法是实现UICollectionView或UITableView。 Cyanic通过抽象设置UICollectionViewDataSource / UITableViewDataSource和UICollectionViewDelegateFlowLayout / UITableViewDelegate所需的大部分样板，在UICollectionView和UITableView的基础上构建。 您不再需要担心IndexPaths，UICollectionViewCell / UITableView子类和字符串标识符。

Cyanic还抽象了框架中使用的RxSwift实现，因此不需要RxSwift的知识 。 结果，我们有了一个非常干净和简单的API。

Cyanic在行动中看起来像什么？

RxSwift，RxDataSources，Sourcery和LayoutKit之间的协同作用产生了一个声明性的API，几乎与Epoxy相同。

这里是很酷的部分：

buildComponents所有大小和排列，组件之间的差异以及buildComponents的代码都在后台线程中运行！ 🤓

与Epoxy的README中的Kotlin示例相比，请看一下语法上的相似性：

仔细看看Cyanic

UI组件

在Cyanic中， 组件用作您在UICollectionViewCell / UITableViewCell中创建的子视图的UI蓝图 （如果您熟悉Epoxy，则等效于EpoxyModel ）。

ComponentLayout定义子视图的大小和布置 。 还将组件的属性绑定到子视图。 （不幸的是，Cyanic 不支持Storyboard或Xibs，因为我们的iOS团队以编程方式创建了UI）

上面的要点是一个非常简单的示例，说明了创建自定义组件时的期望。

在内部， 组件用于区分UICollectionView / UITableView的更改。 如果您熟悉diffing，就会知道在那些花哨的diffing算法中经常使用相等和哈希。

那么，Equatable和Hashable实现又如何呢？

Sourcery用于生成每个Component的Equatable和 Hashable实现 。 它还用于为每个组件生成自定义工厂方法！ 类似于Epoxy生成这些实现的方式。

状态和视图模型

如前所述，Cyanic旨在构建一个状态驱动的用户界面，并使用两个受MvRx启发的概念来做到这一点：

• 州
• 视图模型

与MvRx相同，状态将您的屏幕表示为模型，这意味着它应具有与屏幕上下文相关的属性。 例如，假设您有一个使用Cyanic构建的登录屏幕。 国家的一个例子可以是：

与MvRx相似，ViewModel拥有单一的State类型，可以充当State控制器（只有ViewModel可以修改其状态），并且可以观察其State。

像在MvRx中一样，ViewModel的State可以使用withState方法读取，而ViewModel可以使用setState方法来对其State进行withState 。 继续我们的登录屏幕示例，ViewModel的示例可能是：

结论

总体而言， Cyanic旨在为我们的iOS团队做MvRx为我们的Android团队所取得的成就。

如果您想了解更多信息，可以在我们的Github页面上找到Cyanic。 如果您想更深入地了解，请访问我们的Wiki！

特别感谢Airbnb提供了出色的软件！

在发布此文时，Airbnb提到他们正在为iOS开源其MvRx框架。 我们期待检查其实施！