Flutter混合开发架构演进

409 阅读2分钟

作者:Young,转自公众号 "黑金之路"

一. 背景

        目前移动端涉及到 Android、iOS、小程序,各自含有自己源生的一套架构体系,部分功能 H5 实现,Flutter 开发框架的出现完美的解决了该问题。

        产品希望部分功能能快速集成到小程序,大部分正在迭代的程序都是原生实现,为满足正常迭代同时,稳步进行架构演进,选择 Flutter 混合开发模式。

二. 演进过程

阶段1:混合开发的架构

多 Engine 并存,独立或新的业务需求独立 Engine 开发

图片

面临的问题:

1)新增的 Flutter Engine 如何脱离 Native 工程调试开发?

    关键问题点:基础数据的依赖,模拟 Native 交互

    解决方案:

    通过 Flutter 提供的 Channel,实现向 Native 的数据读取,在 Channel 的基础上实现数据 mock 的方案。(后面单独篇幅详解,Channel 通道、mock 的方案,敬请期待)

图片

阶段2:演进后的开发架构

  • 采用多 Module ,通过 Router 进行数据、页面的访问或跳转
  • Router 底层对接 ChannelManager ,是否需要和 Natvie 通信(取决于路由的字典)
  • 整体 App 为 Flutter -> Native -> Flutter 的混合模式

图片

1)组件划分原则

1.1)基本原则

资料

图片

1.2)独立业务模块原则

  • 拆分后该模块不需要横向依赖即可独立运行
  • 模块的子元素拆分后和其它模块的子元素有耦合的情况下,按照层级深度、业务关联强度优先的原则,采用路由访问的原则

2)调用关系

  • 业务组件间调用关系(横向)

  •  业务组件和基础组件、通用组件的调用关系(纵向)

  •  通用模块之间调用关系:再不可避免的场景中可单向调用.如:埋点需要使用到网络

图片