Flutter动态化调研实践

一，前言

1,什么是动态化？

现在移动端运用的版别更新， 最常见的方法是定时发版，无论是安卓仍是iOS，都需求提交新的安装包到运用商场进行审阅。审阅经过后，用户在运用商场进行App的下载更新。

而动态化， 就是不依靠更新程序安装包， 就能动态实时更新页面的技能。

2,动态化的必要性

为什么需求动态化技能呢？ 由于上述定时发版更新运用的方法存在一些问题，比如:

1. 审阅周期长， 且可能审阅不经过。 周期长导致发版别不行灵敏， 紧急的事务需求不能及时上线。
2. 线上呈现急需修正的bug时，需求较长修正周期，影响用户体会。
3. 安装包过大， 动辄几十兆几百兆的运用晋级可能会让用户比较抗拒。
4. 即便上线了，也无法到达悉数用户晋级， 服务端存在兼容多版别App的问题。

面对这些问题，如果能完成app增量、无感知更新，完成功用同步。无论是对公司仍是用户都是十分重要的需求，能完成app动态化更新就显得十分重要，能很好的处理以上问题:

1. 随时完成功用晋级，不存在运用商场长期审阅和拒绝上线问题，到达事务需求快速上线的意图。
2. 线上bug可以实时修正，进步用户体会。
3. 可以减小发版功用包体积，只需求替换新增功用即可。
4. 功用保持一致，相似网页相同，发版后用户同步更新，不存在旧版别兼容问题。

接下来，咱们就来剖析一下，现在业内首要的Flutter动态化更新方法。

二，动态化方案调研

在Flutter实践层面，简略来说分为三个门户：

• 方案一：JavaScript是最好的语言（碰瓷PHP） 首要思路：运用Flutter做烘托，开发运用js，逻辑层经过v8/jscore解说运转。代表结构是腾讯的MXFlutter。这个结构是开源的，大写的。

• 方案三：布局，逻辑，一把梭

  首要思路：与方案一最首要的区别是，逻辑层也是运用dart，增加了一层语法解析和运转时。有一个代表，美团的MTFlutter，但是没有开源意向，无从调查更多。

• 方案二：DSL + JS

  首要思路：依据模板完成动态化，首要布局层选用Dart转DSL的方法，逻辑层运用JS。代表结构是58同城开源的Fair。

MXFlutter

项目简介

MXFlutter 是一套依据 JavaScript 的 Flutter 结构，可以用极端相似 Dart 的开发方法，经过编写 JavaScript 代码，来开发 Flutter 运用，或者运用 mxjsbuilder 编译器，把现有Flutter 工程编译为JS，运转在 mxflutter 之上。

核心思维

核心思路是把 Flutter 的烘托逻辑中的三棵树中的榜首棵，放到 JavaScript 中生成。用 JavaScript 完好完成了 Flutter 控件层封装，可以运用 JavaScript，用极端相似 Dart 的开发方法，开发Flutter运用，运用JavaScript版的轻量级Flutter Runtime，生成UI描绘，传递给Dart层的UI引擎，UI引擎把UI描绘生产真实的 Flutter 控件。

MxFlutter 现在现已中止保护，详细请看MXFlutter。 MxFlutter经过JavaScript编写Dart，加载线上js文件，经过引擎在运转时转化并显示，从而到达动态化作用。 官方在0.7.0版别开始接入TypeScript，引进npm生态，优化了js开发的本钱，向前端生态进一步靠拢。 很惋惜，在比照各大厂的方案时，发现MxFlutter的性价比极低，学习本钱也高，而且又扔掉Dart生态。开发及保护本钱都很高。

MTFlutter

项目简介

美团的MTFlutter团队flap项目选用的静态生产DSL方案，经过对Dart语言注解，确保渠道一致性。完成了动态下发与解说的逻辑页面一体化的 Flutter 动态化方案。Flap 的呈现让 Flutter 动态化和包巨细这两个短板得到了一定程度的弥补，促进了 Flutter 生态的开展。

核心思维

经过静态生产 DSL+Runtime 解说运转的思路，完成了动态下发与解说的逻辑页面一体化的 Flutter 动态化方案，建设了一套 Flap 生态体系，涵盖了开发、发布、测试、运维各阶段。

布局和逻辑层都运用Dart, 增加了一层语法解析和运转时。但是没有开源意向，无从调查更多。

Fair

项目简介

Fair是为Flutter设计的动态化结构，经过Fair Compiler东西对原生Dart源文件的主动转化，使项目取得动态更新Widget Tree和State的才能。

创立Fair的目标是支撑不发版（Android、iOS、Web）的情况下，经过事务bundle和JS下发完成更新，方法相似于React Native。与Flutter Fair集成后，您可以快速发布新的页面，而无需等候运用的下一个发布日期。Fair供给了标准的Widget，它可以被用作一个新的动态页面或作为现有Flutter页面的一部分，诸如运营位的排版/款式修正，整页面替换，部分替换等都可以运用。

核心思维

Fair是58自研的的动态化结构，经过Fair Compiler东西对原生Dart源文件的主动转化，使项目取得动态更新Widget Tree和State的才能。

三，方案比照

经过上述三个方案的调研，咱们来大约比照一下上述结构

方案	开源方	核心思维	长处	缺陷
MXFlutter	腾讯	用js编写Dart，动态拉取js脚本	现在相对最完好的Flutter运用JS开发方案	选用js方法编写Dart，保护困难
MTFlutter	美团	布局，逻辑都运用Dart,增加语法解析和运转时	支撑布局动态化和逻辑动态化	未开源
Fair	58	经过bundle和js完成热更新	支撑布局动态化和逻辑动态化开源社区活泼, 开发东西丰富	部分语法不支撑

可以看到， MXFlutter需求运用js写Dart, 官方现已中止更新，而这种方法咱们不能接受， MTFlutter现在未开源，无从继续研讨。 接下来侧重看一下 Fair。

四，Fair接入进程

1,增加依靠

推荐运用pub方法引进

# add Fair dependency
dependencies:
  fair: 2.7.0
# add compiler dependency
dev_dependencies:
  build_runner: ^2.0.0
  fair_compiler: ^1.2.0
# switch "fair_version" according to the local Flutter SDK version
dependency_overrides:
  fair_version: 3.0.0

Flutter版别切换

经过切换 flutter_version 版别进行版别兼容。例如，将本机切换为 flutter 2.0.6 后，Fair 需求同步切换

# switch to another stable flutter version
dependency_overrides:
  fair_version: 2.0.6

2,运用 Fair

在App中接入Fair步骤如下：

将 FairApp 增加为需求动态化部分的顶级节点

常见做法是作为 App 的根节点，如果不是全局选用也可以作为子页面的根节点

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FairApp.runApplication(
    _getApp(),
    plugins: {
    },
  );
}
dynamic _getApp() => FairApp(
  modules: {
  },
  delegate: {
  },
  child: MaterialApp(
    home: FairWidget(
            name: 'DynamicWidget',
            path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',
            data: {"fairProps": json.encode({})}),
  ),
);

增加动态组件

每一个动态组件由一个FairWidget表明。

FairWidget(
  name: 'DynamicWidget',
  path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',
  data: {"fairProps": json.encode({})}),

依据不同场景诉求，FairWidget可以混合和运用

1. 可以作为不同组件混合运用
2. 一般作为一个全屏页面
3. 支撑嵌套运用，即可以部分嵌套在一般Widget下，也可以嵌套在另一个FairWidget下

五，Fair接入体会

1，fork,下载工程

将官方Github工程fork到自己库房后， 下载工程。运用官方供给的 test_case/best_ui_templates工程体会fair的体会。

2, 执行 pub get

在 best_ui_templates工程中，执行 pub get指令获取依靠。

3，开发事务

接下来正式开始开发流程。 把一个页面改写为 用Fair 编写:

1. 创立需求动态化的 componnet, 并增加 @FairPatch() 注解。增加上注解后，在Fair生成产品时，会把此Component build生成 FairWidget加载的产品。

2, 执行 Fair东西链插件的指令生成产品， 如图:

3, 最终生成的产品，拷贝到 assets/bundle目录下(装备config.json后，会主动拷贝)

4, 看作用， 下图为运用 Fair 改造后的页面：

六，Fair优势

1，社区活泼度高

官方对Fair保护力度大，版别更新较快，问题修正及时，活泼的开发者社区氛围。

使得开发者在开发Fair进程中遇到的问题， 可以及时反馈给官方， 并能得到快速的帮助和处理。

2, 一份代码，灵敏运用

Fair的区别于MTFlutter和MXFlutter这2种动态化方案，Fair能让同一份代码在Flutter原生和动态之间随意切换。在开发跟版别需求时，运用原生代码发布，以此继续保持Flutter的功用优势；而在热更新场景可以经过下发动态文件来到达动态更新Widget的意图。运用方法愈加灵敏。

3，配套开发东西丰富

Faircli配套东西链

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

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

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

Fair语法检测插件

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

查看以下示例:

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

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

3,依据提示点击替换

经过插件，在编写fair进程中，可以快速识别并处理不支撑的语法问题。 进步开发Fair功率。

Fair Web代码编辑器

Fair其中一个方向是在线动态化渠道，即在网页中编辑dart代码，在线预览Flutter作用和Fair动态化作用，而且发布Fair动态化产品。

经过在Fair Web代码编辑器，开发者可以在没有复杂的IDE装备的情况下，在网页端开发Fair并预览。 这无疑是下降了接入本钱， 为开发者可以快速体会Fair供给了十分便捷的方法。

七，总结

经过近期对各大互联网公司在Flutter动态化方向上的探究方案。 发现这些方案都还没有到达老练阶段，想在实践事务上落地， 还得看各团队后期的保护力度和开发投入程度。

MXFlutter运用js编写Dart的方法， 扔掉了本来Flutter的开发模式， 导致开发本钱大，以及后续保护本钱也大，官方已中止保护。

MTFlutter选用布局,逻辑都是运用Dart, 经过静态生产 DSL+Runtime 解说运转的思路，处理布局和逻辑的动态化，但是并没有开源方案，无从深入研讨。

Fair经过Fair Compiler东西对原生Dart源文件的主动转化，使项目取得动态更新Widget Tree和State的才能。现在官方保护力度较大， 社区活泼，而且有比较全面的Fair生态东西。 期待 Fair 团队可以处理在开发Fair进程中一些体会问题，如语法支撑不全等， 让Fair成为真实可以让开发者可以快速接入，可以到达和正常开发Flutter接近的体会。 为广阔Flutter开发人员处理动态化的痛点。

支撑咱们

欢迎大家运用 Fair，也欢迎大家为咱们点亮star
Github地址：github.com/wuba/fair
Fair官网：fair.58.com/

欢迎奉献

经过Issue提交问题，奉献代码请提交Pull Request，管理员将对代码进行审阅。