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外围收益如下:
- 组件复用以闲鱼的商品详情页开发为例。以外围的服务类型商品和交易类型商品为根底。借助Fish-Redux框架,咱们衍生出了一般宝贝,租赁宝贝,玩家号宝贝等10多个宝贝详情页面。这些不同类型的详情页面,不仅有本人独立的业务模块,也最大可能的复用了独特的组件模块。
- 状态治理在公布这种强交互场景开发中,咱们应用Fish-Redux高效治理了大量的页面事件,极大晋升了组件通信的效率。繁多的业务场景下也保障得了逻辑组件化。
- 代码构造治理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逻辑,实现了对应的动静编排能力。
- 脚手架中内置了一些了通用根底模版,动静模版,列表模版等,来反对一些紧急的业务需要;
- 对fish redux做了ListAdapter性能加强,提出了Section的概念。来满足对数据不同数据汇合类型展现的需要。
然而做完第一个版本后引发了一些思考:
- 动静编排能力是否应用fish redux的用户也须要
- 针对页面改变批改了页面框架的外观是否减少学习老本,开发人员的不习惯
- 技术带动业务倒退,业务需要是否能反补技术框架能力等
第二个版本咱们决定将局部能力反补至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的美好之处。