Fair接入案例分享|【火花思维】调研-接入流程全记录

原创
2023/02/14 09:47
阅读数 401


转载推荐

Fair是58TC委员会推出的动态化开源项目。项目开源至今受到了行业内的广泛关注,也有很多小伙伴加入到了Fair项目中来,为我们提供了很大的帮助。
Fair在接下来会更加关注用户体验,持续降低接入和使用成本,打造出更好用的Flutter动态化方案。

转载文章是来自于“火花思维”小伙伴们从Flutter动态化立项到开发到上线的全链路分享,内容非常详实,非常感谢小伙伴们的认可,也为贵公司项目选择Fair落地Flutter动态化能力而感到荣幸。


以下为Fair调研-接入流程记录,欢迎在留言区评论交流。


1

动态化方案调研

目前移动端应用的版本更新, 最常见的方式是定期发版,无论是安卓还是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


2

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的整个流程。以及在更新代码后, 使用插件工具重新生成产物,并启动本地服务,体验了完整的热更新流程。


3

对于业务层面

Fair 能做到像素级别的还原,因此接入前后,页面几乎看不出任何差异。


4

配套开发工具推荐

Faircli配套工具链

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

  • 工程创建:快速搭建Fair载体工程及动态化工程。

  • 模板代码:提供页面及组件模板。

  • 本地热更新:线下开发使用,实现开发阶段快速预览Fair动态化功能。

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

Fair语法检测插件

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

查看以下示例:

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

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

3,根据提示点击替换

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

热更新平台

官方提供了FairPushy的热更新平台,可以clone部署到自己服务器,就可以实现平台搭建。

热更新平台搭建避坑指南

官方提供了热更新平台搭建具体步骤,在这里就不在赘述了,这里记录一下本人搭建热更新平台时所踩过的坑吧。

1、我们需要创建一个本地的mysql数据库,注意这个数据库一定不能用最新的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 String baseUrl = ‘http://localhost/’;变量中的http://localhost换成对应的server端的域名才行。这样后端才能为前端提供服务。


5

总结

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

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

本文分享自微信公众号 - 58技术(architects_58)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部