哈啰出行App首页容器化架构

1. 哈啰出行App首⻚容器化架构秦阳哈啰出行平台移动端负责人

2.

3. 如何在工作中实现架构创新

4. • 背景介绍 • 架构设计思想 • 方案落地实践 • 未来展望

5. • 背景介绍 • 架构设计思想 • 方案落地实践 • 未来展望

6. 业务背景两轮出行普惠出行以单⻋，助力⻋为以快⻋和顺⻛⻋等主的出行服务，以四轮出行服务为及景区校园等特殊主，扩展到租赁和场景下的业务拓展公共交通等业务生活平台电商和线下零售一系列生活服务

7. 首⻚变迁

8. 快速通道营销活动便捷操作情境感知生活服务业务宫格头部推荐优惠卡券广告投放快捷打⻋/购票福利中心社区热⻔顺⻛⻋-司乘模式话题投票公告扫码任务活动大促单⻋/助力⻋/火⻋票/顺⻛⻋-订单管理电动⻋⻋主模式天气消息中心用户提示单⻋/助力⻋模式商品推荐用户点评

9. 业务诉求业务交付效率问题：多团队协作下，平台资源容易出现瓶颈；测试发布成本高更快更好产品体验问题：双端、不同业务模块的交互还原不一致；使用流畅度难以保障

10. • 背景介绍 • 架构设计思想 • 方案落地实践 • 未来展望

11. 技术目标研发效率支持业务隔离和标准化的接入方式，具备配置化、跨平台、动态化能力，有较高的复用性更快更好高可用性保障具备高性能和高稳定性，支持降级

12. 端容器 ๏ 容器：标准的、隔离的虚拟化技术，具备独立运行的环境 ๏ 容器的粒度：承载首⻚、业务一级⻚面等聚合业务场景的⻚面容器 ๏ 实现方式： ROI：原生技术 VS 跨端技术中间件服务端客户端业务微服务 BFF ⻚面 A CDN 路由容器路由组件化框架⻚面 C

13. 架构设计业务层业务宫格订单活动广告卡券本地生活监控层其他模块仓库流畅度崩溃加载速度宫格活动动态化模块网络数据错误流量表单公告 ... 容器框架渲染层配置解析模块管理协议层布局管理 UI框架 Data Event LifeCycle Adapter 系统能力基础能力逻辑层缓存管理更新管理事件总线容器管理器基础组件外部依赖蓝牙定位 RPC 路由网络存储地图 iOS依赖电话摄像机 Web 通用UI 基础方法库统计监控 ... 安卓依赖

14. 容器框架 ๏ 监控层容器各项性能指标、稳定性指标的监控能力 ๏ 协议层提供标准化的容器能力接口和模块接入方式，如布局协议、扩展能力等 ๏ 逻辑层提供容器状态、数据、通信等运行时管理能力 ๏ 渲染层实现容器和模块的样式和布局监控层协议层逻辑层渲染层

15. 渲染层-容器 ๏ 容器的渲染元素模块仓库布局动态模块原生UI框架+自定义的布局协议模块配置解析器 FlowLayoutAdapterProtocal UICollectionView VLayout 容器

16. 渲染层-静态模块 ๏ 静态模块元素模块仓库布局动态模块模块 ๏ 显示过程配置解析器 FlowLayoutAdapterProtocal UICollectionView 端上原生代码实现的模块不具备动态更新的能力如宫格、瀑布流、滚动条等 VLayout 容器 1 配置解析器获取模块类型 2 如果是静态模块，从模块仓库获取模块的对象信息进行创建并放入容器 3 获取业务数据并赋值

17. 渲染层-动态模块 ๏ 收益元素模块仓库布局动态模块业务配置化，交互统一，提高效率模块重展示，轻交互 ๏ 实现方式配置解析器 Widget Tree + Action ✅ AST ❎ FlowLayoutAdapterProtocal UICollectionView ๏ 适用场景 VLayout 容器

18. 动态模块-Widget Widget Tree container 配置信息 Widget text text container Layout img text

19. 动态模块-Layout 属性配置信息 Widget Layout 描述 flexDirection 主轴的方向 justifyContent item在主轴上的对⻬方式 alignItem item在交叉轴上的对⻬方式 position 布局方式 width 宽度 height 高度 margin 外边距 padding 内边距 flexGrow item放大比例 flexShrink item的缩小比例

20. 配置信息 Widget Tree Layout 动态模块解析 ๏ 动态模块渲染 1 配置解析器获取模块类型 2 如果动态模块，获取模块的Widget Tree和布局信息，采用preload和缓存的机制提高性能 3 根据Widget Tree和布局信息动态搭建原生视图 4 获取业务数据并赋值 ๏ 动态模块交互响应 1 Widget的action属性是一个url，表示交互响应的方式 Action解析用户交互

21. 逻辑层 ๏ 提供容器状态、数据、通信等运行时管理能力模块运行时模块通信容器管理

22. 逻辑层-工作流容器管理模块A 活动模块B 模块注册 A创建数据处理事件监听 B创建模块加载显示事件监听事件总线缓存管理隐藏事件触发销毁

23. 协议层 Layout ๏ 容器布局协议单元格大小单元格横向和纵向边距分组的间距头部/尾部的大小 Data Lifecycle Protocol Event Adapter+

24. 协议层 Layout ๏ 容器数据协议分组/单元格数量单元格内容头部/尾部的内容 Data Lifecycle Protocol Event Adapter+

25. 协议层 Layout ๏ 生命周期协议创建 - 显示 - 刷新 - 消失 - 销毁 ๏ 应用场景 Data Lifecycle Protocol 性能监控曝光计算 Event Adapter+

26. 协议层 Layout ๏ 事件协议事件总线监听（模块事件，定时器等） Data Lifecycle Protocol Event Adapter+

27. 协议层 Layout ๏ 扩展协议错误降级定时器启动和关闭其他 Data Lifecycle Protocol Event Adapter+

28. 工作流 ·

29. 监控层 ๏ 监控层质量指标的监控和归因分析三大⻩金指标健康分归因分析归因分析健康分流量异常性能 PV/UV 崩溃率加载时⻓版本网络错误网络延迟设备业务错误其他 APM

30. 监控层 ๏ 健康分⻚面维度的质量评分，体现各项技术指标现状和目标的差距健康分 = x 单项指标的现状，y 单项指标的目标例如，⻚面加载速度的理想目标是1s，当前⻚面的数值区间(1.2s-1.5s), 单项得分80分，再和网络延迟、错误率等指标得分一起加权平均得到⻚面健康分

31. 监控层 ๏ 健康分应用健康分是⻚面用户体验的技术估分经验区间估分法，数值相对稳定⻚面之间的分数没有参照性

32. 归因分析 ๏ 网络分析分阶段 DNS-TCP-SSL-HTTP 错误类型：超时问题接口：发现曝光埋点问题流量：业务数据压缩

33. • 背景介绍 • 架构设计思想 • 方案落地实践 • 未来展望

34. 三要素架构场景、目标和实现工具优化使用效率，辅助调试分析标准开发、测试、发布标准

35. 基础技术支撑

37. 标准实施 ๏ 标准制定的思路问题导向：弥补研发-测试-发布的流程的不足目标导向：约束变更的影响程度和范围 UI 逻辑组件 ๏ 标准实施的经验数据驱动，工具提效，先易后难，责权明确基础库依赖集系统环境

38. 调试分析监控平台配置平台静态检查生成二维码创建模块配置开发获取模块配置扫码模块信息开发模块开始调试上传数据性能对比提交代码

39. 项目历程首⻚改造项目启动容器框架完成，支持10+模⻚面改造，增加业务场景块，交互体验升级，建设配置后台。 201912 2020H1 系统优化业务能力丰富，配置中心升级打通数据链路；完善首⻚技术架构升级加强动态化能力，增加模块监控和降级，云-端一体化研发，标准，扩展协议层，性能优化 2020H2 2021

40. 项目收益 1 2 3 研发效率提升 Less is more，新架构下业务配置能力和动态化能力提升，平台端开发资源的依赖度降低，协作成本降低稳定性保障提升更细粒度和全面的监控体系；动态更新能力和降级能力；填补研发测试规范的不足体验提升持续优化性能，首⻚TTI下降40%；模块开发标准化，交互还原质量提升

41. 总结场景问题方法流程效果渲染研发瓶颈体验保障架构提效逻辑体验协议稳定标准工具扩展

42. • 背景介绍 • 架构设计思想 • 方案落地实践 • 未来展望

43. 未来展望低代码平台 • 动态性 • 配置能力 • 场景扩展端智能 • 推荐决策 • 实时性 • 端侧算力配置平台组件区布局设计台配置区

44.