目前，闲鱼的主要业务场景都是基于流式场景构建的。在闲鱼的主要几个业务场景下存在两种类型的页面：一种是复杂交互的页面，如发布页面、商品详情页；另一种是轻交互、需要一定动态化能力满足千人千面的运营配置及快速A/B实验需求的页面，如首页、搜索页面、我的等页面。
在这些轻交互、动态化运营的页面场景下，有很多共通的处理逻辑：页面的布局、数据的管理、事件逻辑驱动的数据变化以及数据驱动的视图状态更新；这些工作往往大部分都是重复的工作，重复的代码逻辑。
在研发效能、交付效率方面，业务的变化往往依赖于版本发布，动辄两周的发版周期，对于需要快速投放和响应的业务来说，上线时间过长将难以接受。
能否设计一种流式页面搭建能力，实现页面的快速搭建，减少重复代码，提升研发效能；提供业务动态化的能力，减少对发版发布的依赖，提高上线的交付效率？
为了解决以上问题，在Flutter版本首页改版的契机下，闲鱼设计了一套流式场景下的页面搭建架构设计。
流式页面容器架构设计在流式布局的架构设计过程中，面对实际的业务场景，通过以下几个方面解决端到端的流式页面容器设计：
在搭建平台侧，实现页面搭建、组件管理、协议编排等能力，与投放平台、A/B实验平台和监控平台打通；
在客户端侧，采用MVVM模型，设计通用的事件协议，抽象通用的页面布局、数据管理及事件处理的能力，减少重复的代码开发，提升研发效率。在页面布局管理方面，与列表容器PowerScrollView深度结合，实现高效的页面渲染、数据驱动的页面刷新能力；
使用阿里巴巴集团DinamicX作为DSL实现动态模板渲染，满足投放以及运营需求；
在与服务端通信协议方面，闲鱼一直在实践Flutter+FaaS的云端一体化开发，借助FaaS的能力，定义一套云端一体化的事件协议，解决业务逻辑动态化的问题，减少发版依赖，进而提升交付效率。
arch
在流式页面容器架构设计中，重点包括以下几个核心模块：协议层、事件中心和数据中心。下面介绍这几个模板的详细设计。
协议的设计在页面容器协议的设计方面，在结合闲鱼业务以及阿里巴巴集团的一些技术方案后，闲鱼采用了三层协议的设计：Page、Section和Component。
Page层协议主要包含整个页面Sections信息，以及下拉刷新、上拉加载更多等配置信息；
Section层协议包含当前Section的布局信息、初始化Event、LoadMoreEvent及Components等信息；
Component层协议与具体业务相关，对于容器来说是黑盒的，具体如何渲染会交给业务方处理；默认提供DX解析渲染Handler。
protocol
在通信协议的设计上，全部采用事件传递的方式，包括：客户端与服务端、组件与组件、页面与组件、页面与App之间。这也是云端一体化的设计，理论上开发者只需要考虑事件的发送与接收，具体事件的处理在客户端还是在服务端，由对应的Handler决定。在云端一体化的设计下，事件的处理更加灵活，可以更方便地将逻辑后移，当业务发生变更时，减少对发版的依赖。
接下来就让我们来具体看一看事件中心的设计。
事件中心的设计一切皆是Event；
在PowerContainer的设计中，一切皆是事件：不论是数据的更新、消息的传递、网络请求、服务端返回的结果，还是自定义的本地处理逻辑。闲鱼抽象定义了八种通用的事件类型，整个页面容器通过事件的流动，完成页面UI的渲染和刷新，以及业务逻辑的表达和执行。
event
以一次网络请求为例，一次下拉刷新会获取每个Section的initEvent事件，并添加到事件中心；事件中心根据事件类型找到对应的Handler来处理。
如果initEvent配置的是remote请求，则交给remoteHandler发送网络请求，将事件传送给FaaS端；在FaaS端收到Event后，在FaaS端的事件中心分发，找到对应的hsf服务并获取数据，最后拼装成Event的方式，下发给客户端；客户端接收到之后继续让Event在事件中心流动起来。
在处理完远端下发的事件之后，EventCenter会发送事件结束的广播，便于业务处理相关自定义事件。
eventremote
通用事件抽象下面我们来具体看一看通用事件的抽象：
Restart事件：指定整个Page或者某个Section的刷新事件，对于需要刷新的Section，会将其initEvent事件加入事件中心。initEvent常见的一般为一个Remote事件，也可以是任意其他事件。
LoadMore事件：LoadMore事件主要处理分页加载更多数据的场景。
Update事件：Update事件主要处理数据源的更新及UI的刷新。
Context更新事件：每个Section都存在一个Context信息，代表了服务端与客户端请求的上下文信息；每个Section的Rmote事件请求，都会默认将Context信息发送给服务端，相应的服务端可以下发Context事件更新指定Section的Context信息；具体使用场景例如分页加载的pagenumber等；
Replace事件：Replace事件替换Section信息，在tab切换等场景使用会使用；
Remote事件：远端请求事件；
Native事件：本地通用事件，如页面跳转、toast提示、数据埋点等；
Custom事件：版本预埋的业务自定义事件。
数据中心的设计在MVVM架构中，数据中心承担着ViewModel的角色，处理Update事件，主要负责数据的更新及UI视图的刷新。对于数据的Update事件，闲鱼根据自身业务场景抽象了几种通用的数据更新类型：overload、patch、override和remove。在UI渲染方面，闲鱼将列表容器PowerScrollView与动态模板渲染DXFlutter相结合，实现页面渲染及数据更新后的页面刷新能力。
列表容器PowerScrollView是闲鱼实现的一套功能完善、高性能的列表布局容器，满足了页面容器对于瀑布流、卡片曝光、锚点定位等能力的需求。在视图渲染刷新方面，PowerScrollView提供了列表的局部刷新能力，完美地解决了数据更新后视图的刷新问题。
在协议设计上，二级协议Section以及Footer、Header的设计与PowerScrollView的设计是一一对应的。二级协议Section定义了唯一标识Key，在UI渲染中，对应到PowerScrollView的SectionKey。在数据更新后，页面容器会根据SectionKey实现视图的局部刷新能力。
render
关于PowerScrollView的详细设计和介绍可以参考闲鱼技术
转载请注明：http://www.0431gb208.com/sjszlfa/9187.html
