Java教程

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

本文主要是介绍大厂 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 语言文件,通过解析协议对页面进行动态配置。

动态化架构对比

image.png

image.png

动态化方案简介

阿里 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

这篇关于大厂 Flutter 动态化技术方案调研的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!