Flutter动态化-Fair接入实践记录

Flutter动态化-Fair接入实践记录

一，动态化方案调研

目前移动端应用的版本更新， 最常见的方式是定期发版，无论是安卓还是iOS，都需要提交新的安装包到应用市场进行审核。审核通过后，用户在应用市场进行App的下载更新。而动态化， 就是不依赖更新程序安装包， 就能动态实时更新页面的技术。

因为定期发版更新应用的方式存在一些问题，比如:

1. 审核周期长， 且可能审核不通过。 周期长导致发版本不够灵活， 紧急的业务需求不能及时上线。
2. 线上出现急需修复的bug时，需要较长修复周期，影响用户体验。
3. 安装包过大， 动辄几十兆几百兆的应用升级可能会让用户比较抗拒。
4. 即使上线了，也无法达到全部用户升级， 服务端存在兼容多版本App的问题。

面对这些问题，如果能实现app增量、无感知更新，实现功能同步。无论是对公司还是用户都是非常重要的需求，能实现app动态化更新就显得非常重要，能很好的解决以上问题:

1. 随时实现功能升级。
2. 线上bug可以实时修复，提高用户体验。
3. 减小发版功能包体积。
4. 发版后用户同步更新，不存在旧版本兼容问题。

为了解决以上痛点，团队决定开启Flutter动态化的调研，学习之路。

经过团队近期的调研和学习，对业界Flutter动态化框架进行了如下总结:

• MXFlutter: 使用js编写dart, 其抛弃了 Dart 生态，维护困难。
• MTFlutter: 布局，逻辑都使用Dart,增加语法解析和运行时, 由于其未开源，无从深入研究。
• Fair: 使用转换AST+JS的方式，通过下发bundle 和 js实现热更新。 代表框架 Fair。

综上， MXFlutter官方已经停止更新， 而且需要使用js写Dart，而这种方式让开发效率受到极大影响； MTFlutter目前未开源，无从继续研究。 所以在接下来团队开始着重调研和尝试使用 Fair。

二，Fair接入初体验

这里参考了Fair团队出品的 Fair 配套工具链介绍。通过使用Fair配套工具链，体验了完整的Fair工程的创建流程。

步骤一：工具安装

安装 Faircli 命令行工具

dart pub global activate faircli

安装 AS 插件

暂时支持本地安装，后续会发布到插件市场。FairTemplate-1.0.0.zip 插件下载

• 本地安装：打开AS菜单栏/Android Studio/Preference/Plugins/Install Plugin from Disk... 安装后即可使用。

准备工作完成后，下面进入开发使用流程。

步骤二：Faircli-工程创建

工程分为载体工程及动态化工程。动态化的功能模块需要在动态化工程中开发。载体工程提供 bundle 下载、加载及基础能力支持。

创建动态化工程

faircli create -n dynamic_project_name

dynamic_project_name: 动态化工程名

创建载体工程

faircli create -k carrier -n carrier_project_name

carrier_project_name: 载体工程名

步骤三：IDE插件-功能开发

模板代码使用

选择代码模板，生成对应的代码文件。

在生成的代码中，进行二次开发。

一键打包

功能开发完成后，可使用 AS 插件进行一键打包。

步骤四：启动本地热更新服务

打包完成之后，可启动本地热更新服务，进行开发功能预览。

当控制台打印如下信息，表示成功启动本地热更新服务。

开发者选项

运行载体工程，进入开发者选项页面。

输入 host，加载 bundle 列表。选择对应的 bundle，进行功能预览。

手机摇一摇，可触发重新加载功能。

步骤五：IDE插件-上传 bundle 到线上环境

根据文章中的步骤，和官方群里及时的疑问解答， 我们构建了fair载体工程以及本地服务工程。

从创建载体工程，创建动态化工程，到编写FairWidget的整个流程。 以及在更新代码后， 使用插件工具重新生成产物，并启动本地服务，体验了完整的热更新流程。

三，对于业务页面

四，配套开发工具推荐

Faircli配套工具链

官方为了让开发者快速上手，降低接入门槛， 解决在接入过程中的痛点。 Fair团队开发了Faircli配套工具链，主要包含三个部分:

• 工程创建：快速搭建Fair载体工程及动态化工程。
• 模板代码：提供页面及组件模板。
• 本地热更新：线下开发使用，实现开发阶段快速预览Fair动态化功能。

在安装了工具链提供的dart命令行工具及AS插件后， 通过创建模板， 构建产物， 本地启服务，体验热更新功能，开发者可以轻松接入并体验Fair。

Fair语法检测插件

官方为了让开发者在Fair开发过程中，出现不正确或者不支持的语法问题。 开发了配套插件去提示用户使用Fair语法糖。

查看以下示例:

1,build方法下if的代码检测，及提示引导信息

2,点击more action 或者 AS代码提示快捷键

3,根据提示点击替换

通过插件，在编写fair过程中，可以快速识别并解决不支持的语法问题。 提高开发Fair效率。

热更新平台

官方提供了FairPushy的热更新平台，可以clone部署到自己服务器，就可以实现平台搭建。这里记录一下本人搭建热更新平台时所踩过的坑吧。

1、我们需要创建一个本地的mysgl数据库，注意这个数据库一定不能用最新的8.x的版本，因为fair pushy链接数据库的插件貌似不支持这么高版本的验证。方式，所以会链接失败。这个问题我倒腾了半天才解决。

2、上传patch时，选择本地文件的功能在pushy的项目里是不包含的，需要我们自己来接入上传方式才行，当你接入完前后端准备上传patch时，选择本地文件总是失败，那不是你的错，是还没有集成这个功能。如果你没有接本地上传功能，也可以通过先将patch上传到我们的指定云存储，再将链接添加到 pushy平台来发布。

3、在pushy搭建完成后我们要在app里集成pushy的sdk 来下载patch。当初始化patch时我们需要传入一个updateUrl，这个updateUrl如果不说明可能大家都不知道这是什么东西。

FairPushy.init(
            appID:'30',
            updateUrl:"http://localhost/app/patch", debug:true);

将上面的updateUrl的http://localhost换成你自己pushy server端域名即可

4、这个问题大家不一定都能碰到，如果你的服务端也是用docker来部署的，那就要学习一下dockerfile的编写才行，而且在下载fltter sdk时需要翻墙，当 然也可以从本地导入。这主要就是docker的学习了。如果你的服务端不需要 docker那就直接用一个服务器来搞定前后端就行啦。

5、在部署完前后端后，我们需要将前端dart_dio.dart文件中的 static const StringbaseUrl='http://localhost/'; 变量中的http://localhost 换成对应的server端的域名才行。这样后端才能为前端提供服务。

五，总结

通过近期对Fair在Flutter动态化方向上的探究方案。 发现相比较于业界其他Flutter动态化方案，有着较大的优势。

Fair通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。目前官方维护力度较大， 社区活跃，并且有比较全面的Fair生态工具。 期待 Fair 团队可以解决在开发Fair过程中一些体验问题，如语法支持不全等， 让Fair成为真正能够让开发者可以快速接入，能够达到和正常开发Flutter接近的体验。 为广大Flutter开发人员解决动态化的痛点。