抖音技术能力大揭密!钜惠大礼、深度体验,尽在火山引擎增长沙龙,就等你来! 立即报名>> 了解详情
写点什么

美团客户端响应式框架 EasyReact 开源啦

2020 年 2 月 19 日

美团客户端响应式框架 EasyReact 开源啦

前言

EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题。


目前 EasyReact 已在美团和大众点评客户端的部分业务中实践,并且持续迭代了一年多的时间。近日,我们决定开源这个项目的 iOS Objective-C 语言部分,希望能够帮助更多的开发者不断探索更广泛的业务场景,也欢迎更多的社区的开发者跟我们一起加强 EasyReact 的功能。Github 的项目地址,参见 https://github.com/meituan-dianping/EasyReact


背景

美团 iOS 客户端团队在业界比较早地使用响应式来解决项目问题,为此我们引入了 ReactiveCocoa 这个函数响应式框架(相关实践,参考之前的 系列博客 )。随着业务的急速扩张和团队拆分变更,ReactiveCocoa 在解决异步问题的同时也带来了新的挑战,总结起来有以下几点:


  1. 高学习门槛

  2. 易出错

  3. 调试困难

  4. 风格不统一


既然响应式编程带来了这么多的麻烦,是否我们应该摒弃响应式编程,用更通俗易懂的面向对象编程来解决问题呢?这要从移动端开发的特点说起。


移动端开发特点

客户端程序本身充满异步的场景。客户端的主要逻辑就是从视图中处理控件事件,通过网络获取后端内容再展示到视图上。这其中事件的处理和网络的处理都是异步行为。


一般客户端程序发起网络请求后程序会异步的继续执行,等待网络资源的获取。通常我们还会需要设置一定的标志位和显示一些加载指示器来让视图进行等待。但是当网络进行获取的时候,通知、UI 事件、定时器都对状态产生改变就会导致状态的错乱。我们是否也遇到过:忙碌指示器没有正确隐藏掉,页面的显示的字段被错误的显示成旧的值,甚至一个页面几个部分信息不同步的情况?


单个的问题看似简单,但是客户端飞速发展的今年,很多公司包括美团在内的客户端代码行数早已突破百万。业务逻辑愈发复杂,使得维护状态本身就成了一个大问题。响应式编程正是解决这个问题的一种手段。


响应式编程的相关概念

响应式编程是基于数据流动编程的一种编程范式。做过 iOS 客户端开发的同学一定了解过 KVO 这一系列的 API。


KVO 帮助我们将属性的变更和变更后的处理分离开,大大简化了我们的更新逻辑。响应式编程将这一优势体现得更加淋漓尽致,可以简单的理解成一个对象的属性改变后,另外一连串对象的属性都随之发生改变。


响应式的最简单例子莫过于电子表格,Excel 和 Numbers 中单元格公式就是一个响应的例子。我们只需要关心单元格和单元格的关系,而不需要关心当一个单元格发生变化,另外的单元格需要进行怎样的处理。“程序”的书写被提前到事件发生之前,所以响应式编程是一种声明式编程。它帮助我们将更多的精力集中在描述数据流动的关系上,而不是关注数据变化时处理的动作。


单纯的响应式编程,比如电子表格中的公式和 KVO 是比较容易理解的,但是为了在 Objective-C 语言中支持响应式特性,ReactiveCocoa 使用了函数响应式编程的手段实现了响应式编程框架。而函数式编程正是造成大家学习路径陡峭的主要原因。在函数式编程的世界中, 一切又都复杂起来了。这些复杂的概念,如 Immutable、Side effect、High-order Function、Functor、Applicative、Monad 等等,让很多开发者望而却步。


防不胜防的错误

函数式编程主要使用高阶函数来解决问题,映射到 Objective-C 语言中就是使用 Block 来进行主要的处理。由于 Objective-C 使用自动引用计数(ARC)来管理内存,一旦出现循环引用,就需要程序员主动破除循环引用。而 Block 闭包捕获变量最容易形成循环引用。无脑的 weakify-strongify 会引起提早释放,而无脑的不使用 weakify-strongify 则会引起循环引用。即便是“老手”在使用的过程中,也难免出错。


另外,ReactiveCocoa 框架为了方便开发者更快的使用响应式编程,Hook 了很多 Cocoa 框架中的功能,例如 KVO、Notification Center、Perform Selector。一旦其它框架在 Hook 的过程中与之形成冲突,后续问题的排查就变得十分困难。


调试的困难性

函数响应式编程使用高阶函数还带来了另外一个问题,那就是大量的嵌套闭包函数导致的调用栈深度问题。在 ReactiveCocoa 2.5 版本中,进行简单的 5 次变换,其调用栈深度甚至达到了 50 层(见下图)。



ReactiveCocoa 的调用栈


仔细观察调用栈,我们发现整个调用栈的内容极为相似,难以从中发现问题所在。


另外异步场景更是给调试增加了新的难度。很多时候,数据的变化是由其他队列派发过来的,我们甚至无法在调用栈中追溯数据变化的来源。


风格差异化

业内很多人使用 FRP 框架来解决 MVVM 架构中的绑定问题。在业务实践中很多操作是高度相似且可被泛化的,这也意味着,可以被脚手架工具自动生成。


但目前业内知名的框架并没有提供相应的工具,最佳实践也无法“模板化”地传递下去。这就导致了对于 MVVM 和响应式编程,大家有了各自不同的理解。


EasyReact 的初心

EasyReact 的诞生,其初心是为了解决 iOS 工程实现 MVVM 架构但没有对应的框架支撑,而导致的风格不统一、可维护性差、开发效率低等多种问题。而 MVVM 中最重要的一个功能就是绑定,EasyReact 就是为了让绑定和响应式的代码变得 Easy 起来。


它的目标就是让开发者能够简单的理解响应式编程,并且简单的将响应式编程的优势利用起来。


EasyReact 依赖库介绍

EasyReact 先是基于 Objective-C 开发。而 Objective-C 是一门古老的编程语言,在 2014 年苹果公司推出 Swift 编程语言之后,Objective-C 已经基本不再更新,而 Swift 支持的 Tuple 类型和集合类型自带的 map 、filter 等方法会让代码更清晰易读。在 EasyReact Objective-C 版本的开发中,我们还衍生了一些周边库以支持这些新的代码技巧和语法糖。这些周边库现已开源,并且可以独立于 EasyReact 使用。


EasyTuplle


EasyTuple


EasyTuple 使用宏构造出类似 Swift 的 Tuple 语法。使用 Tuple 可以让你在需要传递一个简单的数据架构的时,不必手动为其创建对应的类,轻松的交给框架解决。


EasySequence


EasySequence


EasySequence 是一个给集合类型扩展的库,可以清晰的表达对一个集合类型的迭代操作,并且通过巧妙的手法可以让这些迭代操作使用链式语法拼接起来。同时 EasySequence 也提供了一系列的 线程安全 和 weak 内存管理的集合类型用以补充系统容器无法提供的功能。


EasyFoundattiion


EasyFoundation


EasyFoundation 是上述 EasyTupleEasySequence 以及未来底层依赖库的一个统一封装。


用 EasyReact 解决之前的问题

EasyTupleEasySequenceEasyFoundationEasyReact 因业务的需要而诞生,首要的任务就是解决业务中出现的那几点问题。我们来看看建设至今,那几个问题是否已经解决:


响应式编程的学习门槛

前面已经分析过,单纯的响应式编程并不是特别的难以理解,而函数式编程才是造成高学习门槛的原因。因此 EasyReact 采用大家都熟知的面向对象编程进行设计, 想要了解代码,相对于函数式编程变得容易很多。


另外响应式编程基于数据流动,流动就会产生一个有向的流动网络图。在函数式编程中,网络图是使用闭包捕获来建立的,这样做非常不利于图的查找和遍历。这样使得框架在运行过程中可以随时查询到节点和边的关系,详细内容可以参见 框架概述


另外对于已经熟悉了 ReactiveCocoa 的同学来说,我们也在数据的流动操作上基本实现了ReactiveCocoa API。详细内容可以参见 基本操作。更多的功能可以向我们提功能的 ISSUE ,也欢迎大家能够提 Pull Request 来共同建设 EasyReact。


避免不经意的错误

前面提到过 ReactiveCocoa 易造成循环引用或者提早释放的问题,那 EasyReact 是怎样解决这个问题的呢?因为 EasyReact 中的节点和边以及监听者都不是使用闭包来进行捕获,所以刨除转换和订阅中存在的副作用(转换 block 或者订阅 block 中导致的闭包捕获),EasyReact 是可以自动管理内存的。详细内容可以参见 内存管理


除了内存问题,ReactiveCocoa 中的 Hook Cocoa 框架问题,在 EasyReact 上通过规避手段来进行处理。EasyReact 在整个计划中只是用来完成最基本的数据流驱动的部分,所以本身与 Cocoa 和 CocoaTouch 框架无关,一定程度上避免了与系统 API 和其他库 Hook 造成冲突。这并不是指 Easy 系列不去解决相应的部分,而是 Easy 系列希望以更规范和加以约束的方式来解决相同问题,后续 Easy 系列的其他开源项目中会有更多这些特定需求的解决方案。


EasyReactt 的调试

EasyReact 利用对象的持有关系和方法调用来实现响应式中的数据流动,所以可方便的在调用栈信息中找出数据的传递关系。在 EasyReact 中,进行与前面 ReactiveCocoa 同样的 5 次简单变换,其调用栈只有 15 层(见下图)。



EasyReact 的调用栈


经过观察不难发现,调用栈的顺序恰好就是变换的行为。这是因为我们将每种操作定义成一个边的类型,使得调用栈可以通过类名进行简单的分析。


为了方便调试,我们提供了一个 [EZRNode graph] 方法。任意一个节点调用这个方法都可以得到一段 GraphViz 程序的 DotDSL 描述字符串,开发者可以通过 GraphViz 工具观察节点的关系,更好的排查问题。


使用方式如下:


  1. macOS 安装 GraphViz 工具 brew install graphviz

  2. 打印 [EZRNode graph] 返回的字符串或者 Debug 期间在 lldb 调用 [EZRNode graph] 获取结果字符串,并输出保存至文件如 test.dot

  3. 使用工具分析生成图像 circo Tpdftest.dot otest.pdf && open test.pdf


结果示例:



节点静态图


另外我们还开发了一个带有录屏并且可以动态查看应用程序中所有节点和边的调试工具,后期也会开源。开发中的工具是这样的:



节点动态图


响应式编程风格上的统一

EasyReact 帮助我们解决了不少难题,遗憾的是它也不是“银弹”。在实际的项目实施中,我们发现仅仅通过 EasyReact 仍然很难让大家在开发的过程中风格上统一起来。当然它从写法上要比 ReactiveCocoa 上统一了一些,但是构建数据流仍然有着多种多样的方式。


所以我们想到通过一个上层的业务框架来统一风格,这也就是后续衍生项目 EasyMVVM 诞生的原因,不久后我们也会将 EasyMVVM 进行开源。


EasyReact 和其他框架的对比

EasyReact 从诞生之初,就不可避免要和已有的其他响应式编程框架做对比。下表对几大响应式框架进行了一个大概的对比:


项目EasyReactReactiveCocoaReactiveX
核心概念图论和面向对象编程函数式编程函数式编程和泛型编程
传播可变性
基本变
组合变
高阶变
遍历节点 / 信号
多语言支持Objective-C(其他语言开源计划中)Objective-C、Swift大量语言
性能较快
中文文档支持
调试工具静态拓扑图展示和动态调试工具(开源计划中)Instrument


性能方面,我们也和同样是 Objective-C 语言的 ReactiveCocoa 2.5 版本做了相应的 Benchmark。


测试环境

编译平台: macOS High Sierra 10.13.5


IDE: Xcode 9.4.1


真机设备: iPhone X 256G iOS 11.4(15F79)


测试对象

  1. listener、map、filter、flattenMap 等单阶操作

  2. combine、zip、merge 等多点聚合操作

  3. 同步操作


其中测试的规模为:


  • 节点或信号个数 10 个

  • 触发操作次数 1000 次


例如 Listener 方法有 10 个监听者,重复发送值 1000 次。


统计时间单位为 ns。


测试数据

重复上面的实验 10 次,得到数据平均值如下:


namelistenermapfilterflattenMapcombinezipmergesyncWith
EasyReact186066530285707704300772597616234540633844821979445712359669
ReactiveCocoa40542617441636945095903446757572090960281433116691389896953619799
RAC:EasyReact217.89%245.71%640.29%615.39%3353.83%226.10%70.22%433.83%



性能测试结果


结果总结

ReactiveCocoa 平均耗时是 EasyReact 的 725.41%。


EasyReact 的 Swift 版本即将开源,届时会和 RxSwift 进行 Benchmark 比较。


EasyReact 的最佳实践

通常我们创建一个类,里面会包含很多的属性。在使用 EasyReact 时,我们通常会把这些属性包装为 EZRNode 并加上一个泛型。如:


// SearchService.h
#import <Foundation/Foundation.h>#import <EasyReact/EasyReact.h>
@interface SearchService : NSObject
@property (nonatomic, readonly, strong) EZRMutableNode<NSString *> *param;@property (nonatomic, readonly, strong) EZRNode<NSDictionary *> *result;@property (nonatomic, readonly, strong) EZRNode<NSError *> *error;
@end
复制代码


这段代码展示了如何创建一个 WiKi 查询服务,该服务接收一个 param 参数,查询后会返回 result 或者 error。以下是实现部分:


// SearchService.m
@implementation SearchService
- (instancetype)init { if (self = [super init]) { _param = [EZRMutableNode new]; EZRNode *resultNode = [_param flattenMap:^EZRNode * _Nullable(NSString * _Nullable searchParam) { NSString *queryKeyWord = [searchParam stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]; NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"https://en.wikipedia.org/w/api.php?action=query&titles=%@&prop=revisions&rvprop=content&format=json&formatversion=2", queryKeyWord]]; EZRMutableNode *returnedNode = [EZRMutableNode new]; [[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { if (error) { returnedNode.value = error; } else { NSError *serializationError; NSDictionary *resultDictionary = [NSJSONSerialization JSONObjectWithData:data options:0 error:&serializationError]; if (serializationError) { returnedNode.value = serializationError; } else if (!([resultDictionary[@"query"][@"pages"] count] && !resultDictionary[@"query"][@"pages"][0][@"missing"])) { NSError *notFoundError = [NSError errorWithDomain:@"com.example.service.wiki" code:100 userInfo:@{NSLocalizedDescriptionKey: [NSString stringWithFormat:@"keyword '%@' not found.", searchParam]}]; returnedNode.value = notFoundError; } else { returnedNode.value = resultDictionary; } } }]; return returnedNode; }]; EZRIFResult *resultAnalysedNode = [resultNode if:^BOOL(id _Nullable next) { return [next isKindOfClass:NSDictionary.class]; }]; _result = resultAnalysedNode.thenNode; _error = resultAnalysedNode.elseNode; } return self;}
@end
复制代码


在调用时,我们只需要通过 listenedBy 方法关注节点的变化:


self.service = [SearchService new];[[self.service.result listenedBy:self] withBlock:^(NSDictionary * _Nullable next) {    NSLog(@"Result: %@", next);}];[[self.service.error listenedBy:self] withBlock:^(NSError * _Nullable next) {    NSLog(@"Error: %@", next);}];
self.service.param.value = @"mipmap"; //should print search resultself.service.param.value = @"420v"; // should print error, keyword not found.
复制代码


使用 EasyReact 后,网络请求的参数、结果和错误可以很好地被分离。不需要像命令式的写法那样在网络请求返回的回调中写一堆判断来分离结果和错误。


因为节点的存在先于结果,我们能对暂时还没有得到的结果构建连接关系,完成整个响应链的构建。响应链构建之后,一旦有了数据,数据便会自动按照我们预期的构建来传递。


在这个例子中,我们不需要显式地来调用网络请求,只需要给响应链中的 param 节点赋值,框架就会主动触发网络请求,并且请求完成之后会根据网络返回结果来分离出 result 和 error 供上层业务直接使用。


对于开源,,我们是认真的

EasyReact 项目自立项以来,就励志打造成一个通用的框架,团队也一直以开源的高标准要求自己。整个开发的过程中我们始终保证测试覆盖率在一个高的标准上,对于接口的设计也力求完美。在开源的流程,我们也学习借鉴了 Github 上大量优秀的开源项目,在流程、文档、规范上力求标准化、国际化。


文档

除了 中文 README英文 README 以外,我们还提供了中文的说明性质文档:



和英文的说明性质文档:



后续帮助理解的文章,也会陆续上传到项目中供大家学习。


另外也为开源的贡献提供了标准的 中文贡献流程英文贡献流程 ,其中对于 ISSUE 模板、Commit 模板、Pull Requests 模板和 Apache 协议头均有提及。


如果你仍然对 EasyReact 有所不解或者流程代码上有任何问题,可以随时通过提 ISSUE 的方式与我们联系,我们都会尽快答复。


行为驱动开发

为了保证 EasyReact 的质量,我们在开发的过程中使用 行为驱动开发。当每个新功能的声明部分确定后,我们会先编写大量的测试用例,这些用例模拟使用者的行为。通过模拟使用者的行为,以更加接近使用者的想法,去设计这个新功能的 API。同时大量的测试用例也保证了新的功能完成之时,一定是稳定的。


测试覆盖率

EasyReact 系列立项之时,就以高质量、高标准的开发原则来要求开发组成员执行。开源之后所有项目使用 codecov.io 服务生成对应的测试覆盖率报告,Easy 系列的框架覆盖率均保证在 95% 以上。


namelistener
EasyReactcodecov 97%
EasyTuplecodecov 96%
EasySequencecodecov 98%
EasyFoundationcodecov 100%


持续集成

为了保证项目质量,所有的 Easy 系列框架都配有持续集成工具 Travis CI。它确保了每一次提交,每一次 Pull Request 都是可靠的。


展望

目前开源的框架组件只是建立起响应式编程的基石,Easy 系列的初心是为 MVVM 架构提供一个强有力的框架工具。下图是 Easy 系列框架的架构简图:



Archticture


未来开源计划

未来我们还有提供更多框架能力,开源给大家:


名称描述
EasyDebugToolBox动态节点状态调试工具
EasyOperation基于行为和操作抽象的响应式库
EasyNetwork响应式的网络访问库
EasyMVVMMVVM框架标准和相关工具
EasyMVVMCLIEasyMVVM项目脚手架工具


跨平台与多语言

EasyReact 的设计基于面向对象,所以很容易在各个语言中实现,我们也正在积极的在 Swift、Java、JavaScript 等主力语言中实现 EasyReact。


另外动态化作为目前行业的趋势,Easy 系列自然不会忽视。在 EasyReact 基于图的架构下,我们可以很轻松的让一个 Objective-C 的上游节点通过一个特殊的桥接边连接到一个 JavaScript 节点,这样就可以让部分的逻辑动态下发过来。


结语

数据传递和异步处理,是大部分业务的核心。EasyReact 从架构上用响应式的方式来很好的解决了这个问题。它有效地组织了数据和数据之间的联系, 让业务的处理流程从命令式编程方式,变成以数据流为核心的响应式编程方式。用先构建数据流关系再响应触发的方法,让业务方更关心业务的本质。使广大开发者从琐碎的命令式编程的状态处理中解放出来,提高了生产力。EasyReact 不仅让业务逻辑代码更容易维护,也让出错的几率大大下降。


团队介绍

  • 成威,项目的发起人,负责美团客户端新技术调研。国内函数式编程、响应式编程的爱好者,多年宣传和布道响应式编程实践并取得一定的成绩。

  • 姜沂,项目的主要开发者。

  • 秦宏,项目的主要开发者。

  • 君阳,项目的早期开发者。

  • 思琦,Easy 系列图标设计者,文档和代码翻译者。

  • 志宇,参与了大部分的重构设计。

  • 恩生,文档和代码翻译者。

  • 姝琳,文档和代码翻译者。


2020 年 2 月 19 日 20:51255

评论

发布
暂无评论
发现更多内容

6. 自定义容器类型元素验证,类级别验证(多字段联合验证)

YourBatman

Hibernate-Validator Bean Validation 多字段联合验证

号外!5G+X联创营华为云官网上线,5G 创业春天来了!

华为云开发者社区

华为 程序员 AI 5G

AI技术在音乐类产品中的应用场景

HIFIVE嗨翻屋

人工智能 AI 音乐 音乐制作

《迅雷链精品课》第六课:主流区块链数据存储分析(一)

迅雷链

区块链

DataOps系列丨DataOps理念与设计原则

DataPipeline数见科技

大数据

Springboot过滤器和拦截器详解及使用场景

996小迁

Java 编程 架构 面试 springboot

架构师训练营 1 期 - 第九周 - 性能优化 3

三板斧

32核打赢AMD64核 英特尔Ice Lake为HPC提供强劲性能

新闻科技资讯

微服务手册:高速查询?除了Redis我们还有另外的选择

互联网应用架构

redis 微服务 springboot Caffeine 高速缓存

媲美物理机,裸金属云主机如何轻松应对11.11大促

京东科技开发者

云计算 服务器 云主机 裸金属容器

3年Java开发经验从阿里、美团、滴滴面试回来,想和Java程序员谈一谈感悟及面经

Java架构之路

Java 程序员 架构 面试 编程语言

阿里P8架构师吐血整理的《SpringBoot+Vue全栈开发实战》文档资料

Java架构之路

Java 程序员 架构 面试 编程语言

互联网券商系统搭建建议书

软件开发大鱼V15724971504

国际配售 港股交易系统开发 证券交易系统 IPO系统开发 金融平台搭建

DataOps系列丨数据的「资产负债表」与「现状」

DataPipeline数见科技

大数据

区块链+供应链,双链融合开启新时代

CECBC区块链专委会

区块链 供应链物流

前嗅教你大数据——史上最全代理IP服务商对比

前嗅大数据

大数据 数据采集 动态代理 静态代理 代理IP

DataPipeline 王睿:业务异常实时自动化检测 — 基于人工智能的系统实战

DataPipeline数见科技

大数据

MySQL 连接为什么挂死了?

华为云开发者社区

微服务 数据 存储

架构师训练营 1 期 -- 第九周作业

曾彪彪

极客大学架构师训练营

入坑 docsify,一款神奇的文档生成利器!

沉默王二

docsify

【得物技术】浅谈分布式事务中间件Seata

得物技术

开源 分布式事务 中间件 解决方案 seata

释放数字化活力 高质量建设数字中国

CECBC区块链专委会

数字经济

DataPipeline CTO 陈肃:构建批流一体数据融合平台的一致性语义保证

DataPipeline数见科技

数据融合

【JDD京智大咖说】AI 未来,路在何方?NLP、CV 技术的探索与展望

京东科技开发者

人工智能 CV nlp

架构师训练营 W05 作业

Geek_f06ede

Scrum指南这么改,我看要完蛋!

华为云开发者社区

Scrum 敏捷 改版

京东T8Java架构师总结整理的15w字的Java面试手册,2021年金三银四不愁涨不了薪!

Java架构之路

Java 程序员 架构 面试 编程语言

一周信创舆情观察(11.9~11.15)

统小信uos

第九周学习性能优化 3 总结

三板斧

极客大学架构师训练营

数字人民币究竟是什么

CECBC区块链专委会

数字货币

企业工作流设计原则及多项目整合开发注意事项

Marilyn

敏捷开发 工作流 企业开发

Study Go: From Zero to Hero

Study Go: From Zero to Hero

美团客户端响应式框架 EasyReact 开源啦-InfoQ