掘力计划第 20 期:孙哲-Flutter 动态方案 Fair 原理与实践

这篇具有很好参考价值的文章主要介绍了掘力计划第 20 期:孙哲-Flutter 动态方案 Fair 原理与实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在掘力计划系列活动第20场, 58 集团-房产事业部跨端技术负责人、移动端架构师孙哲为我们分享 Flutter 动态方案 Fair 原理与实践。

摘要

跨平台技术对整体大前端的研发效率提升明显,58 集团对跨平台方案同样有着强烈诉求。Flutter 相较于其它跨端技术,在渲染效率和多端适配度上有非常大的优势,但其无法实现动态化更新,使得 Flutter 的发版成本较高。基于此背景,58 技术委员会推出了 Flutter 动态化开源项目—Fair。本次分享将对 Fair 进行一些介绍,讲解 Fair 是如何实现 Flutter 动态化以及使用 Fair 的一些最佳实践。

1 Fair 背景介绍

近年来,跨平台技术的迅速发展为移动端开发带来了革命性的变化。以 React Native 和 Flutter 为代表的跨平台技术,极大地提升了前端开发者的工作效率。

58 同城作为房产行业的龙头企业,其技术部门也在积极探索跨平台技术的应用。经过调研和实践,58 选择了 Flutter 作为主要的跨平台开发方案。相较于 React Native 等方案,Flutter 在性能和适配性方面更占优势。

但是,Flutter 也存在一些短板。其中最主要的就是无法实现动态化更新。这导致每次功能修改都需要重新构建发布,大大增加了发布成本。

为了解决这一痛点,58 技术委员会推出了开源项目 Fair,通过一系列工具链实现了 Flutter 页面的动态化。

2 Fair 实现原理浅析

2.1 架构设计

Fair 整体设计原则是要打造一个还是 Flutter 技术栈的、可通过市场审核的热更新方案。所以整体架构设计,是将 Dart 源文件转译成 DSL 通过下发 JSON 和 JS 来分别实现布局动态化和逻辑动态化。

Fair 架构图

因此 Fair 的动态化方案就包含以下三个方面:

  • 布局动态化
  • 逻辑动态化 
  • 动态内容通信

布局动态化通过自定义 DSL 语法,将 Flutter 页面描述为可解析的 JSON 格式,然后在运行时动态加载解析,重建页面布局。

逻辑动态化则是通过自定义的 Dart 转 JS 的编译工具,将 Dart 中的业务逻辑抽取出来,编译为 JS 格式,与页面交互。

动态内容通信是通过 FFI 和 method channel 搭建的 JSBridge,在 Dart 端与 JS 端建立了桥梁,让两端可以相互调用对方的方法。

2.2 布局动态化实现

布局动态化的实现主要分为三个步骤:

  1. 使用 Analyzer 库解析 Dart 代码生成抽象语法树 AST
  1. 遍历 AST,生成自定义的 JSON DSL 格式描述页面结构
  1. 运行时通过反射调用 flutter 组件构建页面

具体来说,Fair 会解析 Dart 代码,生成包含组件信息的 AST。然后根据 AST 生成 JSON 格式的 DSL,比如:

JSON
{
  "className": "Center",
  "na": {
    "child":"%(_buildText)"
  },
  "methodMap": {
    "buildText": {
        "className": "Text",
        "pa" : [
            "Hello World"
        ]
    }
  }
}

该 JSON 描述了一个 Center widget,child 属性为一个 Text widget。

运行时,Fair 通过 className 映射组件构造函数,通过反射调用该构造函数即可动态构建页面布局。

再通过 Function.apply()方法动态运行映射出的方法返回 widget。

详细解析可以查看:布局 DSL 生成原理

2.3 逻辑动态化实现

逻辑动态化同样分三步:

  1. 分析 Dart 代码,提取业务逻辑部分
  1. 自定义 Dart 转 JS 的编译器,生成 JS 文件
  1. 页面通过 JsChannel 与 JS 运行环境通信

Fair 会解析 Dart 代码,提取所有的变量,方法等作为业务逻辑。然后通过自定义的编译器,将这些逻辑转换成 JS。

举个例子:

Fair 中的 MVVM 依赖于 Flutter 原生模式,如上图所示,JS 域的数据同步给 Dart 域,只需要在 JS 侧调用熟悉的 setState 即可。当然这部分对使用 Fair 框架的开发者是无感知的,编译工具帮我们完成了相关的转换。原生代码和生成的 JS 代码,对比如下:

JavaScript
_incrementCounter: function _incrementCounter() {const __thiz__ = this;with (__thiz__) {setState('#FairKey#', function dummy() {
            _counter++;});}},

Dart
void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

大家可以看到,除了 JS 简化访问域的 with 和通信目标对象需要的 FairKey,其他代码差别并不大。

详细解析可以查看:Fair 逻辑动态化架构设计与实现

2.4 动态内容通讯

js 与布局文件的通信,本质上就是 js 与 dart 之间的通信,因为两者都是以 native 平台做依托,所以需要 native 作为消息的转发器,负责消息的分发。

对于 dart 与 native 之间的通信,我们使用的是官方提供的 message-channel 与 dart:FFI。message-channel 主要有、BasicMessageChannel、MethodChannel、EventChannel,该通道主要用于异步通信,dart:FFI 是官方提供的直接调用 native c/c++代码的工具,主要用于同步通信。

对于 native 与 js 之间的通信,我们则可以用注入方法的形式建立联系,native 侧注入本地方法,那么 js 则可以调用该方法发送消息并获取结果值,而如果是 js 提供本地方法, 那 native 侧可以执行 js 中的方法获取 js 发送的结果。

详细解析可以查看:Fair 逻辑动态化通信实现

3 Fair 生态建设

为了更好地帮助开发者使用 Fair 实现 Flutter 动态化,Fair 项目组还开发了一系列辅助工具。

3.1 构建工具

提供了命令行工具,在 Flutter 项目中通过简单配置即可生成动态化代码。

只需三步即可构建 Flutter 动态化工程

获取 faircli

JSON
dart pub global activate faircli

创建动态化工程

Dart
faircli create -n dynamic_project_name

dynamic_project_name: 动态化工程名

创建载体工程

Dart
faircli create -k carrier -n carrier_project_name

carrier_project_name: 载体工程名

3.2 模板插件

下载 Fair 模板插件,可以通过 idea 直接选择模板页面进行二次开发。

3.3 热更新平台

提供了开源的远程更新平台,可以在构建后自动上传编译产物,进行云端更新。

热更新平台所有代码也已开源,全部使用 dart 进行开发,具体原理实现可推荐阅读:Flutter + Dart 三端一体化动态化平台实践

4 Fair 落地实践

Fair 目前在 58 同城内部已经有 10 多个 App 使用,覆盖不同的业务场景。无论是整页动态化还是卡片动态化都可以完美支持。

同时还开源了组件库,提供常用的列表、导航等组件的动态化实现,降低开发成本。

动态化后的页面和原生页面没有明显区别。

在性能方面,Fair 对性能影响很小,接入前后平均帧率无影响。由于解析和引擎的影响,内存和启动时间方面会略有增加,但在可接受范围内。

具体使用和实践可参考:Flutter 热更新 Fair 真。体验

5 总结与规划

Fair 为 Flutter 提供了动态化能力,可以极大降低 Flutter 的发布成本。同时还提供了一整套从开发到发布的解决方案。

未来计划会继续完善组件库,增加对 Flutter 状态管理框架的支持,让 Fair 更加简单、稳定。

欢迎大家使用 Fair,也欢迎大家为我们点亮 star
Github 地址:github.com/wuba/fair
Fair 官网:fair.58.com

关于掘力计划

掘力计划由稀土掘金技术社区发起,致力于打造一个高品质的技术分享和交流的系列品牌。聚集国内外顶尖的技术专家、开发者和实践者,通过线下沙龙、闭门会、公开课等多种形式分享最前沿的技术动态。文章来源地址https://www.toymoban.com/news/detail-623134.html

到了这里,关于掘力计划第 20 期:孙哲-Flutter 动态方案 Fair 原理与实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【动态规划】879. 盈利计划

    【动态规划】【广度优先搜索】【状态压缩】847 访问所有节点的最短路径 动态规划汇总 集团里有 n 名员工,他们可以完成各种各样的工作创造利润。 第 i 种工作会产生 profit[i] 的利润,它要求 group[i] 名成员共同参与。如果成员参与了其中一项工作,就不能参与另一项工作。

    2024年01月23日
    浏览(44)
  • P1507 NASA的食物计划 (动态规划)

    NASA(美国航空航天局)因为航天飞机的隔热瓦等其他安全技术问题一直大伤脑筋,因此在各方压力下终止了航天飞机的历史,但是此类事情会不会在以后发生,谁也无法保证。所以,在遇到这类航天问题时,也许只能让航天员出仓维修。但是过多的维修会消耗航天员大量的能

    2024年04月09日
    浏览(33)
  • 原理底层计划----注册中心Nacos

    Why 服务多了,需要统一的管理 为了更好地查找这些服务 1、为什么要将服务注册到nacos? 之前的痛点 ● 需要手动的维护所有的服务访问ip地址列表。 ● 单个服务实现负载均衡需要自己搭建,例如使用nginx负载均衡策略,或者基于容器化多实例部署单个服务,在实例之间做负载

    2024年01月25日
    浏览(53)
  • 【新星计划·2023】单臂路由的原理讲解

    单臂路由是指在路由器的一个接口上通过配置子接口的方式,实现原来互相隔离的VLAN之间可以互相通信。 网络中通过 VLAN技术 来实现 隔离广播 、 方便管理及提高安全性等功能 ,一旦划分VLAN后, 同—VLAN之间可以相互通信,不同VLAN间禁止相互通信。 问题来喽!!! 在企业

    2024年02月06日
    浏览(83)
  • 【新星计划·2023】单臂理由的原理讲解

    单臂路由是指在路由器的一个接口上通过配置子接口的方式,实现原来互相隔离的VLAN之间可以互相通信。 网络中通过 VLAN技术 来实现 隔离广播 、 方便管理及提高安全性等功能 ,一旦划分VLAN后, 同—VLAN之间可以相互通信,不同VLAN间禁止相互通信。 问题来喽!!! 在企业

    2024年02月05日
    浏览(46)
  • 面试被问到:测试计划和测试方案有什么区别?

    面试的时候,很多小伙伴都被面试官问过这个问题 “测试计划和测试方案有什么区别”? 到底有什么区别呢?我们先好好了解下这两个文档。 1、测试计划是什么? 测试计划是组织管理层面的文件,从组织管理的角度对一次测试活动进行规划。对测试全过程的测试范围、组

    2023年04月14日
    浏览(80)
  • 茶饮门店本地生活抖音团购运营方案计划书

    茶饮门店本地生活抖音团购运营方案计划书 部分资料预览 资料部分是网络整理,仅供学习参考。 PPT可编辑80页(完整资料包含以下内容) 目录 抖音本地生活运营方案 1. 账号基础搭建与优化 - 门店账号搭建:确保门店信息真实性,包括营业、时间、人均价位等,以提升账号

    2024年04月23日
    浏览(76)
  • 【每日一题Day208】LC1335工作计划的最低难度 | 动态规划

    工作计划的最低难度【LC1335】 你需要制定一份 d 天的工作计划表。工作之间存在依赖,要想执行第 i 项工作,你必须完成全部 j 项工作( 0 = j i )。 你每天 至少 需要完成一项任务。工作计划的总难度是这 d 天每一天的难度之和,而一天的工作难度是当天应该完成工作的最大

    2024年02月05日
    浏览(70)
  • nginx fair负载均衡方式使用

    抱歉,我之前回复错误,没有完成回答。以下是完整的安装过程: 1. 下载Fair模块源代码: 在 https://github.com/gnosek/nginx-upstream-fair/releases 下载最新版本的Fair模块源代码。 2. 下载Nginx源代码: 在 http://nginx.org/en/download.html 下载最新版本的Nginx源代码。 3. 解压下载的Nginx和Fair模块源

    2024年02月09日
    浏览(40)
  • Win11 预览体验计划空白无显示的一种解决方案

    某一天你心血来潮,打算参与Win11 预览体验计划,但体验计划页面显示“Your PC does not meet the minimum hardware requirements for Windows11…”,经过查询网上经验并一番操作后,预览体验计划干脆什么都不显示了,一片空白: 此时的一种解决思路: 根据你想进入的预览体验计划通道,

    2024年02月05日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包