跨平台 动态化 大厂 Flutter 动态化技术方案调研

本文地址

---

目录

目录

• 目录
• 大厂 Flutter 动态化技术方案调研
  • 动态化技术简介
  • 动态化架构对比
  • 动态化方案简介
    • 阿里 Kraken
    • 58 Flutter Fair
    • 腾讯 MxFlutter

大厂 Flutter 动态化技术方案调研

• 参考：Flutter 实现动态化更新-技术预研
• 阿里 Kraken
• 58 Flutter Fair
• 腾讯 MXFlutter
• 美团 Flap(不开源)

动态化技术简介

动态化即不依赖程序安装包，就能进行动态实时更新页面的技术。

常用的实现方式：

• 基于 webview：这是最常用的方式，但 webview 的体验比较差，同时需要做大量设备的兼容。
• 基于 GPL：GPL 即通用编程语言，比如 JavaScript。通过动态更改线上的 js 文件，Flutter 应用通过网络拉取更新后动态渲染。
• 基于 DSL：DSL 即专用领域语言，比如 xml、json。通过生成简单的 DSL 语言文件，通过解析协议对页面进行动态配置。

动态化架构对比

动态化方案简介

阿里 Kraken

• Kraken github
• WebF -- 社区版
• Kraken 官网
• Kraken 架构介绍
• 基于 Flutter 的 Web 渲染引擎「北海」正式开源

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 github
• Fair 官网
• 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 github
• MXFlutter 接入指南
• 基于 JavaScript 的 Flutter 框架 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