有赞 Flutter 混编方案

George 发布于1年前

文 | 张玉柱 on 电商移动

一、背景

目前准备试水 Flutter,但是多数 native 开发是不了解 Flutter,因此需要设计一种比较“舒服”的集成方式。

二、混编方案

2.1 方案考量

  • 如果直接采用 Flutter 工程结构来作为日常开发,那这部分 Native 开发也需要配置Flutter环境, 相当程度的了解 Flutter 一些技术,成本比较大;

  • 同时如果工程耦合,对于开发过程也是很难受的。

基于以上两点思考,针对 Android iOS 有如下方案:

2.2 Android

先看下官方的集成方式:

这种方式使得工程强耦合,虽然便于开发调试,但是违背了第一点,大多数 native 同学都需要配置 Flutter 环境, 成本很大。

2.3 iOS

2.3.1 官方 iOS 混编方案简介

  • 在native项目  Podfile 中通过 eval binding特性注入  podhelper.rb 脚本,在  pod install/update 时执行此脚本,脚本主要处理:

  • Pod本地依赖Flutter引擎(Flutter.framework) 与Flutter插件注册表(FlutterPluginRegistrant)

  • Flutter插件通过  flutter packagesget 指令安装后生成的  .flutter-plugins 文件解析,然后Pod本地依赖所有的插件

  • 在pod install执行完的钩子  post_install 中,获取当前pod target工程对象,导入  Generated.xcconfig 配置,其中都为环境变量的配置,主要为后续的  xcode_backend.sh 脚本执行做准备

  • 在构建阶段  BuildPhases 中注入构建是需要执行的  xcode_backend.sh 脚本,脚本主要完成Flutter产物的构建并将其添加到对应的native工程中去,后续会进一步介绍此脚本

2.3.2 优点

  • 无缝开发,配置好后就可以只在 Flutter 工程内进行业务开发,无缝同步到 native 工程中

  • 不需要单独拆分组件,免去管理组件的版本及发布成本

2.3.3 缺点

  • 非常耦合,需要修改原有 native 工程配置,需要添加特定脚本去编译 Flutter

  • 需要修改原有 pod 的 xcconfig 配置

  • 所有团队开发成员都必须要配置 Flutter 开发环境才能编译成功

2.4 小结

基于以上思考,同时考虑到某个 Flutter 业务模块可能会引入到不同的 App 中,同时考虑到某个业务实现方式方面的解耦(某个业务可能用 native, flutter, weex 开发),有以下方案( 中间产物库每个 Flutter 业务模块都是独立的 ):

Android:

有赞 Flutter 混编方案

iOS:

有赞 Flutter 混编方案

三、Flutter产物结构

3.1 Android

有赞 Flutter 混编方案

3.2 iOS

有赞 Flutter 混编方案

关于编译模式了解更多可参考查看 Flutter 的编译模式 。

四、Flutter 产物收集

4.1 Android

在 Android 端集成 Flutter 较为简单,只需要获取到上文所讲的 Flutter 产物即 aar 文件。 但是由于插件文件散落每次获取比较麻烦所以目前简单用脚本收集。

脚本收集主要是依靠项目里 .flutter_plugins 文件,该文件会记录 flutter 项目中引用的插件名以及本地路径等,因此可以通过该路径抓取插件的 aar 文件。

目前该python脚本只抓取 Release 的 aar 文件,如果需要获取 debug 的可以手动修改:

执行抓取脚本 ./flutter_aar.sh

脚本执行完 Flutter 产物 aar 文件统一生成在根目录下 android-build 文件夹中。

有赞 Flutter 混编方案

4.2 iOS

通过查看 Flutter 编译脚本 xcode_backend.sh 和测试单独引入编译产物,发现其实 只要拥有Flutter的编译产物 ,宿主项目就可以接入Flutter的功能。

4.2.1 脚本简单分析

  • engine/Flutter.framework Flutter 核心库拷贝 ->  Flutter.framework

  • debug 模式下 Dart 业务代码编译(JIT) ->  App.framework

  • 非 debug 模式下 Dart 业务代码编译(AOT) ->  App.framework

  • 资源文件等打包 ->  flutter_assets

4.2.2 方案分析

设计

有赞 Flutter 混编方案

  • 插件统一编译成.a库,添加对应头文件

  • App.framework 及 engine/Flutter.framework 添加

  • 目前初期 demo 将上述生成的产物统一放入到私有库当中,然后 native 宿主工程 pod 依赖此库,只需要在使用 Flutter 代码的地方 import 对应的头文件即可正常使用

脚本编写

  • 后续规划

  • 脚本优化,添加自动pod库检测及上传

  • App.framework/Flutter.framework 体积太大,放到git仓库不太友好,考虑后续上传到CDN,然后在pod安装的时候预先执行脚本把两个产物拉下来

五、Flutter产物上传

5.1 Android

上面产物搜集完成后,需要上传 maven 仓库,方便集成以及版本控制:

因此引用链如下:

  • Android

有赞 Flutter 混编方案

  • iOS

有赞 Flutter 混编方案

六、总结

以上比较全面的描述了有赞的 Flutter 混编方案,目前有赞已经在内部使用的App上使用 Flutter 开发了一些页面作为试点。 后续会考虑在线上 App 试点,目前正在进行 Flutter 基础库的搭建,之后会专门有文章分享。

相关阅读:

官方 iOS 混编方案: https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

Flutter的编译模式: https://stephenwzl.github.io/2018/07/30/flutter-compile-mode/

扩展阅读

  1. 有赞移动 App 一键切换网关实践

  2. 有赞零售小票打印图片二值化方案

  3. 有赞 Android 崩溃保护的探索及实践

  4. 有赞零售小票打印跨平台解决方案

  5. 有赞移动 iOS 组件化(模块化)架构设计实践

  6. 有赞Flutter插件开发与发布

-The End-

Vol.204

有赞技术团队

为 442 万商家,150 个行业,330 亿电商交易额

提供技术支持

微商城|零售|美业 | 教育

微信公众号:有赞coder    微博:@有赞技术

技术博客:tech.youzan.com

The bigger the dream, 

the more important the team.

查看原文: 有赞 Flutter 混编方案

  • bluebear
  • MarjoryGiles
  • TomMilo
  • DeweyKelly
  • AugustusBlake
  • GeorgeXaviera
  • BruceFlora