关于flutter:Flutter-Fish-Redux-20-架构演进实践

8次阅读

共计 3669 个字符,预计需要花费 10 分钟才能阅读完成。

Fish-Redux 开源以来,曾经在闲鱼外围链路上做了大量验证。从初期的宝贝详情页,发布页面开始,Fish-Redux 在闲鱼的应用水平逐步进步。Fish-Redux 框架的应用极大晋升了简单页面场景下的开发效率。特地是通过框架提供的组件复用和状态治理能力,咱们大幅升高了代码冗余也简化了页面复杂度。

Fish-Redux GitHub:https://github.com/alibaba/fi…

然而随着页面复杂度的一直晋升,现有能力已无奈撑持新业务场景的述求。特地是

  • 页面编排
  • 动静 AB
  • 灵活性有余

于是咱们基于 Fish-Redux 现有框架做了新一轮架构演进。通过对现有适配器能力的降级,进一步提高了架构的灵活性。Fish-Redux 的 2.0 版本正式诞生!

闲鱼 Fish-Redux 现状

Fish-Redux 曾经在闲鱼外围链路大量落地。Fish-Redux 外围收益如下:

  1. 组件复用以闲鱼的商品详情页开发为例。以外围的服务类型商品和交易类型商品为根底。借助 Fish-Redux 框架,咱们衍生出了一般宝贝,租赁宝贝,玩家号宝贝等 10 多个宝贝详情页面。这些不同类型的详情页面,不仅有本人独立的业务模块,也最大可能的复用了独特的组件模块。
  2. 状态治理在公布这种强交互场景开发中,咱们应用 Fish-Redux 高效治理了大量的页面事件,极大晋升了组件通信的效率。繁多的业务场景下也保障得了逻辑组件化。
  3. 代码构造治理 Fish-Redux 为咱们提供了很好的文件代码标准。这保障咱们在开发的时候,无论是代码格调还是我的项目构造,都有着高度一致性。公布链路咱们多人参加开发,负责对应的模块,针对对应的组件局部进行开发。特地是人员流转当前,能够疾速上手,这极大的进步了多人协同开发的效率。

Fish-Redux 面临的挑战

须要放弃 Fish-Redux 的个性前提下暴露出动静编排能力的 Adpater,满足上诉能力能力撑持为将来所须要的业务场景。

简略介绍下目前 adapter 所存在的一些短板和有余:

已有动态编排:StaticFlowAdapter

StaticFlowAdapter({
    @required List<Dependent<T>> slots,
    Reducer<T> reducer,
    Effect<T> effect,
    ReducerFilter<T> filter,
  })(Dependent = connector + component)

FlowAdapter 由 Dependent 数组决定页面展示程序。页面的展现程序间接取决于 solts,并且能间接管制各个自组件之间的数据流转,利用这一点劣势去编写简单页面,各种数据分治的逻辑,很大水平的进步来代码的可维护性。这种模式也存在某些弊病,咱们无奈对 slots 动静的进行批改,缺失动静编排能力。

[]()

已有动静编排:DynamicFlowAdapter

 final Map<String, AbstractLogic<Object>> pool;
  final AbstractConnector<T, List<ItemBean>> connector;


  DynamicFlowAdapter({
    @required this.pool,
    @required this.connector,
    ReducerFilter<T> filter,
    Reducer<T> reducer,
    Effect<T> effect,
    @deprecated Object Function(T) key,
  })

DynamicFlowAdapter 提供的外围入参是“pool”,“connector”。pool 提供的 adapter 的组件池,connector 提供组件 key,state。从列表组件动态展现转变为数据源动态控制页面列表 UI。多组件,反复展现的列表提供来便当。

DynamicFlowAdapter 也存在一些不便的中央,所有的组件数据处理都归一到了一个 connector 之中,Fish-Redux 数据分治的亮点就难以失去体现。对于咱们去编写简单动静页面列表也不是很不便。

无论是 StaticFlowAdapter 还是 DynamicFlowAdapter 都无奈同时满足动静编排加上数据分治的个性,咱们对 Fish-Redux 做了进一步的演进。

Fish-Redux 演进

第一个版本是基于 Fish-Redux 的能力咱们做了一层脚手架 effective_redux,针对咱们上诉的需要对于 DynamicFlowAdapter 进行包装(组件注册 + 数据源解决)实现了 data 映射 component 逻辑,实现了对应的动静编排能力。

  1. 脚手架中内置了一些了通用根底模版,动静模版,列表模版等,来反对一些紧急的业务需要;
  2. 对 fish redux 做了 ListAdapter 性能加强,提出了 Section 的概念。来满足对数据不同数据汇合类型展现的需要。

然而做完第一个版本后引发了一些思考:

  1. 动静编排能力是否应用 fish redux 的用户也须要
  2. 针对页面改变批改了页面框架的外观是否减少学习老本,开发人员的不习惯
  3. 技术带动业务倒退,业务需要是否能反补技术框架能力等

第二个版本咱们决定将局部能力反补至 fish redux 中。通过一些思考和目前存在的 Adapter 一些性能实现比照,总结了目前咱们能反补到 fish redux 的能力局部。并且统一化了 FlowAdapter,同时提供了动静编排的能力。

改良后的编排:FlowAdapter

Dependent = connector(数据形容)+component(UI 形容配置)

从新思考了 Adapter 的核心思想:Dependent 汇合的中转站,解决汇合内的数据流转,组件的刷新逻辑。同时将解决后的汇合转换成 UI 界面特定数据。

动静编排实现:FlowAdapater 不再以动态的模式获取组合的 Dependent 列表,由动态参数 List 转变为 FlowDependencies 获取的动静回调。咱们能够在 FlowDependencies 中做一系列扩大,例如页面展现动静编排,组件的 AB 性能等等。

分治数据个性:动静获取的 List 为 connector+component 的数据汇合,不再是繁多的做数据映射 UI 的逻辑解决,将真正的数据处理过程交回到各个 connector 中,放弃了 adapter 内组件的数据处理分治个性。

当然咱们也做了 adapter 的规整。上诉介绍的两种 adapter 其实咱们会发现外部的实现逻辑是放弃不统一的,static adapter,dynamic adapter 真正去解决组件汇合的拉平逻辑是不同的。

针对这种咱们把 StaticFlowAdapter,DynamicFlowAdapter 性能实现迁徙至咱们的新版 FlowAdapter 中。保障 Adapter 能力实现统一,外观保持一致,升高学习老本,也能对立做一些性能上的优化。

成果展现

fish redux 实现架构降级后,咱们的详情 & 公布链路做了对应的代码批改。

内置模版注册,依据服务端下发的配置信息决定页面的编排程序。基于框架提供出对应的动静编排能力,咱们能做到咱们提出的一些业务可能性。

  • 【动静编排能力】咱们的编排程序,展现数据是由服务端返回的配置信息数据决定的。也就是说页面的展现是有服务端确定的。咱们后续对模块之间的程序调整不再依赖于客户端本地批改后进行发包批改。同时咱们也做了对应数据一场的兜底计划,规范的页面展现程序;
  • 【组件 AB 能力】组件 AB 的能力能够交付到服务端前置解决,同时也能够本地代码中减少动静替换的代码,依据不同的配置分桶做一些定制化的解决;
  • 【动静模版】动静模版的减少为了满足产品疾速验证某个业务模块是否可行,间接线上做测试校验,不须要客户端发版本。

详情的成果展现:基于价格模块的地位调整,高低架进行了一些尝试。咱们能很快的进行一些线上调整动作。

瞻望

这次咱们针对 fish redux 的 adapter 做规整,对于编排数据获取的思路转变,更加明确了 adapter 的性能职责。在基本之处对 adapter 做了优化解决,更加适应业务场景。此次的优化批改后续会合并至 fish redux release 之中,为大家带来更多的应用便捷之处。

基于这次框架的演进,为咱们带来了 fish redux 针对不同容器下更多的思考,咱们不单单只满足于一般列表的 adapter 适配,fish redux 针对不同容器展现,咱们也在着手筹备。对于瀑布流场景或者其余的容器内也能有很好的落地。也会在 fish redux 层面做出一些对 PowerScrollView 的适配。

对于一些业务的解决方案,动静模版,AB 能力我也冀望输入到 fish redux 的扩大包中,不单单解决框架层面的一些问题,最终是一个框架平台的模式让使用者更加繁难。对 fish redux 的能力扩大也是咱们后续的一个重要命题。

最初,欢送大家踊跃尝试 fish redux,并在社区中发出声音,提出问题或者改良倡议,以及奉献代码。

咱们置信将来 fish redux 会在更多的场景,能力上应用呈现在屏幕上,让大家感触到 fish redux 的美好之处。

正文完
 0