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插件-功用开发

模板代码运用
Flutter动态化-Fair接入实践记录

挑选代码模板,生成对应的代码文件。

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

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

一键打包

功用开发完结后,可运用 AS 插件进行一键打包。

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

过程四:发动本地热更新服务

打包完结之后,可发动本地热更新服务,进行开发功用预览。

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

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

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

开发者选项

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

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

输入 host,加载 bundle 列表。挑选对应的 bundle,进行功用预览。

手机摇一摇,可触发从头加载功用。

过程五:IDE插件-上传 bundle 到线上环境

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

依据文章中的过程,和官方群里及时的疑问回答, 咱们构建了fair载体工程以及本地服务工程。

从创立载体工程,创立动态化工程,到编写FairWidget的整个流程。 以及在更新代码后, 运用插件东西从头生成产品,并发动本地服务,体会了完好的热更新流程。

三,关于事务页面

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

四,配套开发东西推荐

Faircli配套东西链

官方为了让开发者快速上手,下降接入门槛, 处理在接入过程中的痛点。 Fair团队开发了Faircli配套东西链,主要包括三个部分:

  • 工程创立:快速建立Fair载体工程及动态化工程。
  • 模板代码:供给页面及组件模板。
  • 本地热更新:线下开发运用,完结开发阶段快速预览Fair动态化功用。

在装置了东西链供给的dart命令行东西及AS插件后, 经过创立模板, 构建产品, 本地启服务,体会热更新功用,开发者可以轻松接入并体会Fair。

Fair语法检测插件

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

查看以下示例:

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

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

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

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

3,依据提示点击替换

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

经过插件,在编写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开发人员处理动态化的痛点。