原创王海君 58技术 2021-08-31 09:09

Fair2.0系列专题

NO.1  Fair 2.0 逻辑动态化

●项目名称：Fair 2.0

●Github地址：https://github.com/wuba/fair

●项目简介：Fair是为Flutter设计的动态化框架，可以通过Fair Compiler工具对Dart源文件的转化，使项目获得动态更新Widget的能力。Fair 2.0是为了解决 Fair 1.0版本的“逻辑动态化”能力不足。

1 逻辑动态化背景

Fair是一套支持Flutter动态化的框架。Fair 2.0是为了解决 Fair 1.0版本的“逻辑动态化”能力不足。

Github：https://github.com/wuba/fair

2 逻辑动态化选型与思考

Fair 2.0立项后，我们针对逻辑动态化的支持，做了如下方案可行性对比和总结：

最终Fair项目组确定了，通过自研转换工具，对Dart源文件分别提取布局相关DSL和逻辑相关JS，布局相关DSL采用Fair 1.0的成果动态构建，逻辑相关JS文件传输到JScore来运算，并把最终的结果返回给Dart侧进行数据的绑定。

相应的架构图如下：

3 业界架构对比

3.1 MXFlutter & Kraken 分层架构

MXFlutter和Kraken 都构建了JS生态的架构，在JS域构件了对应的Widget、BuildEngine以及通信接口。如下图所示：

3.2 Fair 分层架构区别

Fair 架构由2部分组成，1为同Kraken和MXFlutter的App运行环境，2为Fair Compiler把Dart源文件编译成DSL和JS动态产物的工具。对比如下：

Fair 框架中Widget构建、数据绑定以及基本的逻辑（if、List Map…）处理都在Dart域完成，留给JS侧的只有基本数据类型、运算和方法调用处理。

4 Fair逻辑能力的构成

Fair 使用Fair 语法糖和Fair布局子方法拼接，构建了Dart侧的基础逻辑处理能力。逻辑能力构成如下图所示：

架构设计与实现详细内容，请阅读（这些会在随后进行更新）：

《Fair 逻辑动态化架构设计与实现》：介绍了整体架构和设计思想

《Fair 逻辑动态化通信实现》：介绍Dart<->Native<->JS的通信原理和过程

《Fair 下发产物-布局DSL生成原理》：介绍布局DSL的提取原理

《Fair 下发产物-逻辑JS生成原理》：介绍逻辑相关的JS提取原理

《Fair 逻辑语法糖设计与实现》：布局中基础逻辑的解决方案

Fair 2.0开源相较于kraken和mxflutter项目晚，我们也设定了Fair的使用开发者。Fair是一个“低成本”的动态化解决方案，通过不改变Flutter 开发者习惯的情况下，通过Fair Compiler工具，实现源Flutter Dart文件动态化转化，当面对紧急需求时，可以做到不发布。但是动态化是有性能损失的，Fair希望最大化的使用Flutter 源文件，通过预埋动态入口的方式达到原生和动态的最优搭配。
Fair在58安居客内的“安居拍房”App已经集成和上线使用，详细内容介绍，请阅读：

《Fair 2.0 在安居拍房App落地实践》

Fair主工程只提供了核心动态化功能实现，但是搭建热更新环境还是需要自己根据团队的情况搭建。我们也有推荐实践，请阅读：

《Fair 热更新设计与实现》

为了大家更了解Fair，我们还做了Fair与已开源的kraken和mxflutter的开发体验和性能数据对比。详情请阅读：

《Flutter 动态化项目评测》

5 项目信息

5.1 项目推动者

Fair项目由58技术委员会开源小组推动构建，持续推动58集团开源文化建设，鼓励技术同学以团队或个人的形式参与开源项目建设或开源贡献。在开源小组的推动下，已经在Github开源11个项目，涉及AI算法、UI自动化代码生成、Flutter布局动态化、NodeJS框架、Paxos一致性算法实现等多个技术领域，也跟知名的开源项目Taro合作，主导完成并开源Taro RN项目。

5.1 项目成员

刘阳、王海君、林乐洋、卜杰、罗正龙、柯超、单鹏涛、李昊、赵倩、陈有余、刘超、谢雄亮、孙哲最后，感谢大家能够使用Fair方案，有任何问题或者建议，欢迎在评论区留言或在微信群里直接联系我们。谢谢大家。