跨平台 动态化 大厂 Flutter 动态化技术方案调研
目录
大厂 Flutter 动态化技术方案调研
动态化技术简介
动态化即不依赖程序安装包，就能进行动态实时更新页面的技术。
常用的实现方式：
基于 webview：这是最常用的方式，但 webview 的体验比较差，同时需要做大量设备的兼容。基于 GPL：GPL 即通用编程语言，比如 JavaScript。通过动态更改线上的 js 文件，Flutter 应用通过网络拉取更新后动态渲染。基于 DSL：DSL 即专用领域语言，比如 xml、json。通过生成简单的 DSL 语言文件，通过解析协议对页面进行动态配置。
动态化架构对比
动态化方案简介
阿里 Kraken
Kraken 是阿里开源的一款基于 W3C 标准的高性能渲染引擎。也是目前几个大厂框架内维护力度最高的库。
Kraken 的优势在于其能够基于 W3C 进行开发，而且引入 npm 生态，支持使用 Vue、React 框架开发，一般前端人员都能进行开发，学习成本很低。
- W3C 标准：Kraken 依据 W3C 标准提供渲染能力，提供浏览器中常见的标签、CSS 能力、API，让你使用前端生态构建原生应用
- 高性能：使用 AOT 构建技术将 Kraken 编译成机器码，提供更接近原生的性能；同步光栅化，支持无限列表流畅滚动且没有白屏
- 跨平台：基于 Flutter 的自绘渲染技术，不再受到平台能力制约，提供跨平台完全一致的 UI，同时支持桌面端和移动端等
- 调试工具：支持 Chrome 调试协议
- 富文本：原生支持图文混排
- 插件化：灵活的扩展能力
使用介绍
pubspec 引入，然后直接使用 Widget Kraken 传入脚本的 url 就可以了。
Widget build(BuildContext context) {
Kraken kraken = Kraken(bundleURL: 'http://xxx.js'); // 我们只需要维护js脚本就可以了
return Scaffold(
appBar: PreferredSize(),
body: kraken, // 动态化的内容
);
}
可以看到，重点在于我们如何去维护带有动态运营内容的 js 文件，这是 Kraken 相对于其他框架最有竞争力的点。
Kraken的缺点是不支持 css 样式，使 Vue 开发的体验也相对一般。但总体而言已经很不错了，官方维护力度大，满足前端生态，使用方便，是动态化技术很不错的选择。
58 Flutter Fair
Fair：Flutter over the air
Fair 是为 Flutter 设计的动态化框架，通过 Fair Compiler 工具对原生 Dart 源文件的自动转化，使项目获得动态更新 Widget Tree 和 Stat 的能力。
创建 Fair 的目标是支持不发版的情况下，通过业务 bundle 和 JS 下发实现更新，方式类似于 React Native。Fair 提供了标准的 Widget，它可以被用作一个新的动态页面或作为现有 Flutter 页面的一部分。
- 小家雀：核心运行时仅 2.6K 行代码，身型轻巧，体积没烦恼。
- 低侵入：纯 Dart 开发，左手 Flutter 右手 Fair，同一片语义下，配上就可以起飞。
- 易扩展：插拔式的组件，一个注解搞定业务组件和社区 UI 库，扩展你的无限想象。
- 更灵活：通过一份 Flutter 源代码，动态&原生灵活转换，成本无限小。
使用介绍
动态化需求无非就是把 JSON 配置文件放到线上，然后 FairWidget 每次都会重新拉取下来展示，从而实现动态化。
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
constraints: BoxConstraints(minHeight: 80),
child: FairWidget(
name: item.id,
path: 'assets/bundle/sample.json',
data: {"fairProps": json.encode({'detail': details})}, /// 拉取 json
),
);
/// 解析 json，json 配置文件按照官方协议写就可以了
Map map = await decode.decode(data, isFlexBuffer);
相关的依赖其实都是非常旧的了，很明显维护力度不够；同时对Flutter版本也有限制，Flutter每出一个版本，58Fair官方就很可能需要做一次适配。
利弊分析
- 好处：用起来很简单，性能稳定
- 缺点很明显：
- 用 JSON 来配置 UI，就注定了它是不支持逻辑的
- Flutter 的 widget 太多，Fair 目前也只能匹配有限的静态UI
- 脱离了 Dart 生态，UI都用JSON写了......
- 团队维护力度非常有限，很多插件都没有更新，pub 也没有更新
腾讯 MxFlutter
MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。
框架支持两种开发方式
- 基于 mxflutter-js 前端框架，使用 TypeScript 语言，以类似 Flutter 的 Widget 组装方式开发 UI，借助前端生态的基础能力开发 App。
- MXFlutter 在前端方向目前已经实现了使用 TypeScript 来编写，使用 Flutter Widget 的描述方式来开发业务。可以接入前端 npm 生态，并提供和 Flutter 原生十分接近的编码方式和语法提示等。
- MXFlutter 前端方向的未来规划是，实现 web 前端 dom + css 的开发方式来接入 Flutter，通过 Vue/React 等前端熟悉的开发框架来编写业务代码，自动转换为 Flutter Widget 进行渲染，实现前端开发者的零成本接入。
- 前端框架 mxflutter-js 已开源
- 不改变现有 Flutter 的开发方式，使用 MXJSCompiler 把现有工程编译为 JS，运行在 MXFlutter 框架之上。
- MXFlutter 在终端方向的思路是使用 MXJSCompiler 把现有 Flutter 工程编译为 JS，运行在 MXFlutter 框架之上。以 ReactNative 框架为参照，JS 引擎的性能可以支撑大型 App 的运行。
- 编译工具 MXJSCompiler 目前在建设中，会在后续版本稳定之后开源。
设计思路
把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject）中的 WidgetTree，放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，实现了轻量的响应式 UI 框架，支撑 JS WidgetTree 的 build 逻辑，build 过程生成的 UI 描述， 通过 Flutter 层的 UI 引擎转换成真正的 Flutter 控件显示出来。
架构
使用介绍
通过 MXJSPageWidget 传入 js 脚本，就能解析出来显示了。一般使用 MxFlutter 都是展示一整个使用 MXFlutter 框架编写的页面。
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MXJSPageWidget(
jsWidgetName: "mxflutter-ts-demo",
flutterPushParams: {
"widgetName": "WidgetExamplesPage"
}),
),
);
MxFlutter 同样也是维护力度有限。
2022-7-31
本文来自博客园，作者：白乾涛，转载请注明原文链接：https://www.cnblogs.com/baiqiantao/p/16538158.html
