开源｜Flutter 动态化项目评测

原创秦小杰、单鹏涛 58技术

Fair2.0专题系列

NO.8 Flutter动态化项目评测

● 项目名称：Fair 2.0

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

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

Fair2.0连载公告

关于Fair 2.0详细的设计和原理介绍，请关注后续文章，我们会以连载的方式，逐步公开架构设计原理。

文章开放频率为每周2篇，分别在周二和周四，敬请关注！

《开源公告｜Fair2.0逻辑动态化开源了！》

《Fair逻辑动态化架构设计与实现》

《Fair 逻辑动态化通信实现》

《Fair 逻辑语法糖设计与实现》

《Fair 下发产物-布局DSL生成原理》

《Fair 热更新设计与实现》

《Fair 在安居客拍房App中的实践》

《Fair 下发产物-逻辑JS生成原理》

随着58安居客 Fair 项目的开源，市面上已经有好几种支持 Flutter 动态化的方案。笔者挑选了比较热门的阿里 Kraken (北海)项目、腾讯的 MXFlutter 项目和58安居客的 Fair 项目，做了一下性能数据对比，在采集数据的过程中我们也总结了这几个项目的上手体验。既然要进行数据对比，我们就先拉齐使用环境和目标功能。

体验准备

1.1 环境

我们使用AS创建一个新的 Flutter 工程，工程内默认自带 Flutter 原生的 Counting 功能（MXFlutter 目前最高版本只支持到1.22，Fair 对此版本也有支持，我们在体验时在1.22的版本上集成 Fair 和 MXFlutter；Kraken 可以支持到最新的2.2版本，我们就在2.2版本集成 Kraken 体验）

1.2 目标

完成Counting界面的动态化，功能如下：

1.3 上手初体验

Kraken项目

我们看一下项目介绍：“Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。”

如项目的介绍，我们在开发动态化“ Counting 界面“的时候，完整的使用 React 创建了体验项目。
我们先来体验一下实现功能的代码：

import React, {useState} from 'react';
const style = {    app: {        backgroundColor: '#ffffff',        height: '100vh',    },    ...}const Home = () => {    ...    return (        <div style={style.app}>            <div style={style.header}><a href="/myTopic.js"><img  referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"   referrerPolicy="no-referrer"  src="assets/images/baseline_west_white_24dp.png"                                                  style={style.backIcon}/></a><span>动态界面 Home</span>            </div>        ...        </div>    )}export default Home;

如上代码基本上可以实现浏览器和 Flutter App 内运行（如果图片都访问网上资源），编码方式跟 React 开发H5体验一致，对前端开发者来说是个很好的动态化框架。

MXFlutter项目

我们看一下项目介绍：“MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。”
我们同样来看一下MXFlutter实现的代码：

class MyHomePage extends MXJSStatefulWidget {  public title: string;  public constructor(title: string) {    super('MyHomePage');    this.title = title;  }
  public createState() {    return new _MyHomePageState();  }}
class _MyHomePageState extends MXJSWidgetState {  public counter: number;  public widget: MyHomePage;
  public constructor() {    super();    this.counter = 0;  }
  public build(context: MXJSBuildContext) {    return new Scaffold({      appBar: new AppBar({        title: new Text(this.widget.title),      }),      body: new Center({        child: new Column({          mainAxisAlignment: MainAxisAlignment.center,          children: [            new Text('You have pushed the button this many times:'),            new Text(`${this.counter}`, {              style: Theme.of(context).textTheme.headline4,            }),          ],        }),      }),      ...  }
  public incrementCounter() {    this.setState(() => {      this.counter += 1;    });  }}

如果不细看，还以为以上是Flutter自带的原生代码。我在开发Counting功能的时候，除了外部的“边角“配置，主体功能基本就是按照Flutter原生的认知在开发。所以相对于Kraken项目MXFlutter 考虑到了对前端开发和技术栈不熟悉的已经熟悉Flutter原生使用者。其实在项目介绍的时候，可以加一句“Flutter 原生开发体验“。

Fair项目

Fair 对 Flutter 默认 Counting 代码基本不需要改动，直接可以进行工具转化使用。Fair 使用 Fair Compiler 工具，转化成页面布局 DSL 和页面逻辑 JS 文件，做到了 Flutter 开发者的无感知。这样的能力可以更好的支持现有的项目，可以在动态和原生2种形态之间切换，稳定后的需求继续使用原生，持续保持 Flutter 的运行性能。

架构差异

2.1 相同点

3个架构都使用了JSCore来处理动态化的逻辑

2.2 差异点

开发语言

Kraken 和 MXFlutter 知识储备需要前端 + Flutter知识；Fair只需Flutter开发知识。

开发者体验

Kraken 和 MXFlutter使用JS来可以有效限制支持的语法和逻辑，Fair通过使用Fair Compiler工具来完成源Dart文件的转化。

动态引擎

Kraken 和 MXFlutter 完整的使用JS来驱动UI布局和界面逻辑；Fair布局使用DSL现实元数据驱动构建，逻辑同样使用自定义转化后的JS处理，Fair只有基本的逻辑处理才会使用JSCore来完成。
Kraken 是动态控制的RenderObject；MXFlutter和fair动态控制的WidgetTree；WidgetTree可以更灵活的跟原生界面搭配，实现部分元素的动态化。

Fair VS MXFlutter 同步通信

Fair采用双独立子线程设计，实现高效通信；MXFlutter采用子线程与UIThread通信；

对比三者，kraken 和 mxflutter 都是用 JS 开发，增加了接入和学习的成本，对于项目后期的维护，也增加了不确定性。而 Fair 通过 Flutter 原生开发，Complier 工具生成中间产物来实现动态化，可以在动态和原生2种形态之间切换，维护成本和风险低。

扩展

Kraken和MXFlutter方案可以轻松实现跨Web以及后续的跨小程序；Fair支持DSL的直接构建布局，并不区分DSL原数据是从哪里来的，换句话说可以是Sketch等各种UI工具转化，或者高级语言的AST转化，甚至了解规则后的手写。

性能对比

本小节，我们从以下几个方面进行对比：包大小、启动速度、界面帧速、内存大小。

环境

Android：Profile；iOS Release

设备

Android：OnePlus 9，Android 11；iOS iPhoneXSMax，iOS13.3

Flutter 引擎版本

Kraken 2.2 ；MXFlutter & Fair 1.22

3.1 包大小

包体积是我们应用性能的一项重要指标，合适的包体积能够提高应用的下载转化率和留存率，直接关系到用户使用量问题。三款框架编译的包大小如下图：

Android

iOS

在 Android 平台上，MXFlutter PackageSize 是其他两个的2～3倍，还有进一步的优化空间。Fair 的 Package 仅有 13 MB，这个就非常优秀了，原因与强大的 Fair Compiler 工具机制分不开的。
iOS 平台上，Fair 的包体积也是最小的。

3.2 启动时间

Flutter 应用程序启动时间测量标准不一。我们采用最能反应用户体验的方法（录屏）来测量，从点击到界面完整展示的时间。这里以应用首页完全展示的时间为基准，单位秒。

Android

iOS

可以看到，这三款框架的第一帧渲染时间不相上下。

3.3 界面帧率

帧率是检测我们应用流畅性的关键指标，优秀的帧率会带来更加顺滑的用户体验。通过Dev Tools 采集的数据如下：

Android

iOS

Android OnePlus 9 是 120Hz的刷新频率，而市面上的大部分手机都是60Hz的刷新频率。测评文章编写时，Kraken 支持最新 Flutter 版本 2.2.0，Fair 支持到了2.0.6，MXFlutter 只支持到 1.22.0，而 Flutter 2.0 性能相比之前有了很大的优化。测试过程中 Kraken 的帧率在安卓上的表现很稳定，但是在iOS的表现不佳，几轮测试下来帧率都偏低，限于目前市面上的用例较少，因此具体原因有待后续探究。而MXFlutter 与 Fair 的帧率表现一致，在 Flutter 2.0 他们应该有更好的表现，期待。

3.4 内存占用

内存优化是性能优化中很重要的一部分，优秀的内存占用可以有效降低我们应用 OOM 和 Crash 率，保证线上应用的正常使用。通过这三款框架打包的应用内存占用情况如下：

Android

iOS

其中，Kraken 和 Fair 的表现比较好，内存占用稳定。

总结

4.1 用户体验角度

3个架构各有千秋，Kraken 偏向于前端开发者；MXFlutter 前端 + 原生Flutter开发者习惯；Fair 原生开发者无感知，通过强大的Fair Compiler工具来实现动态化功能的转化。

4.2 接入成本

对比三者，Kraken 和 MXFlutter 都是用JS开发，增加了接入和学习的成本，对于项目后期的维护，也增加了不确定性。而 Fair 通过 Flutter 原生开发，Complier 工具生成中间产物来实现动态化，可以在动态和原生2种形态之间切换，维护成本和风险低。

4.3 质量数据

由于Kraken和Fair & MXFlutter 引擎版本有差异，Fair在各项质量数据的表现跟MXFlutter与Kraken相差不多，有些指标甚至更优秀。

有奖互动

Perseverance Prevails

关于 Flutter动态化项目评测 有任何疑问或想法欢迎在评论区留言

我们将选取5～10条留言送出58精美周边——58帮帮手机支架

同时项目成员将从中挑选出1～3条精华留言

精华留言将额外获得¥109元天猫精灵硬糖智能蓝牙音响

点击阅读原文链接直接进入Github

请为我们点亮star吧！

继续滑动看下一个