● 项目名称:Fair 2.0
● Github地址:https://github.com/wuba/fair
● 项目简介:Fair是为Flutter设计的动态化框架,可以通过Fair Compiler工具对Dart源文件的转化,使项目获得动态更新Widget的能力。Fair 2.0是为了解决 Fair 1.0版本的“逻辑动态化”能力不足。
随着58安居客 Fair 项目的开源,市面上已经有好几种支持 Flutter 动态化的方案。笔者挑选了比较热门的阿里 Kraken (北海)项目、腾讯的 MXFlutter 项目和58安居客的 Fair 项目,做了一下性能数据对比,在采集数据的过程中我们也总结了这几个项目的上手体验。既然要进行数据对比,我们就先拉齐使用环境和目标功能。
1 体验准备
1.1 环境
我们使用AS创建一个新的 Flutter 工程,工程内默认自带 Flutter 原生的 Counting 功能(MXFlutter 目前最高版本只支持到1.22,Fair 对此版本也有支持,我们在体验时在1.22的版本上集成 Fair 和 MXFlutter;Kraken 可以支持到最新的2.2版本,我们就在2.2版本集成 Kraken 体验)
1.2 目标
完成Counting界面的动态化,功能如下:
(由于慕课网无法支持gif图,完整gif图查看请点击:Fair动态gif图查看)
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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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项目
iFair 对 Flutter 默认 Counting 代码基本不需要改动,直接可以进行工具转化使用。Fair 使用 Fair Compiler 工具,转化成页面布局 DSL 和页面逻辑 JS 文件,做到了 Flutter 开发者的无感知。这样的能力可以更好的支持现有的项目,可以在动态和原生2种形态之间切换,稳定后的需求继续使用原生,持续保持 Flutter 的运行性能。
2 架构差异
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转化,甚至了解规则后的手写。
3 性能对比
本小节,我们从以下几个方面进行对比:包大小、启动速度、界面帧速、内存大小。
环境
Android:Profile;iOS Release
设备
Android:OnePlus 9,Android 11;iOS iPhoneXSMax,iOS13.3
Flutter 引擎版本
Kraken 2.2 ;MXFlutter & Fair 1.223.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 采集的数据如下:AndroidiOS
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 总结
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相差不多,有些指标甚至更优秀。
谢谢大家!
交个朋友,帮我们点个star吧 🌟 😇:
Github地址:https://github.com/wuba/fair
共同学习,写下你的评论
评论加载中...
作者其他优质文章