MBC业务标准化容器在美团的实践

1. MBC业务标准化容器在美团的实践廖子尧前端技术专家

2.

3. 自我介绍 3 • 2017年10月加入美团 • 先后负责过美团首页、美团大搜的架构优化工作 • 搭建了MBC移动业务容器的动态化解决方案 • https://github.com/jeasonlzy

4. • 传统模式 • MBC业务标准化容器 • 方案落地实践 • 未来规划收获： 01 如何从现有的业务出发，对业务进行建模抽象，打造一套通用的业务架构来提升开发效率 02 如何对现有的开发模式进行优化，打造一套高效的产研工具闭环来提升产研效率 4

5. 传统模式业务开发上线流程

6. 传统模式 - 业务痛点页面结构变化特点用户流量大体验要求高重展示轻交互重运营重策略挑战性能优异埋点可靠快速交付样式灵活方案 Native + 动态布局问题上线效率低开发成本高动态力度小模板样式变化 01 样式变化多 02 模板增长快 03 增长模板 200+ 动态布局：https://tech.meituan.com/2019/09/19/litho-practice-in-dynamic-program-mtflexbox.html

7. 传统模式 - 流程痛点

8. 从研发流程解决？

9. 新研发模式 - 理想流程

10. 新研发模式 - 解决思路标准化动态化配置化数据标准化动态孵化页面页面配置化埋点标准化客户端容器动态化模板配置化交互标准化服务端容器动态化埋点配置化设计语言标准化智能化千人千面

11. MBC业务标准化容器以标准化为基础的，可以提升产研开发效率的工具链

12. MBC全景美团业务标准化容器 ( M eituan B usiness C ontainer) • 以标准化协议为基础 • 以数据驱动为核心 • 以动态配置为手段 • 产研开发提效的工具链

13. 标准化 - 业务建模页面布局结构模块顺序卡片样式元素字段色彩风格

14. 标准化 - 业务建模页面卡片/元素模块状态栏组件卡片1 卡片2 导航栏组件下拉刷新组件元素1 卡片3 元素2 卡片4 列表组件模块1 拆模块2 模块3 加载更多组件合 1. 作为数据入口点，负责整体结构 1. 模块功能聚焦，边界清晰 1. 样式变化种类繁多 2. 处理与后端数据的关联展示 2. 内部排列方式可枚举 2. 具备基本的用户交互 3. 由模块组成 3. 由卡片组成 3. 承载大部分的UI实现元素 3

15. 标准化 - 数据标准化 overlap： • 导航栏与状态栏的位置关系 needCache： • 与页面的缓存模式结合使用 dataType： • 描述两次数据之间的行为 • replace、append、modify、update refreshTop： • 是否支持下拉刷新 • 下拉刷新的样式 refreshBottom： • 是否支持加载更多 • 加载更多的样式 • 是否支持数据预加载 • 是否支持视图预加载 actionBar、statusBar： • 描述导航栏与状态栏的样式 headers： • 页面头部，无法下拉 groups： • 核心列表区 extra： • 辅助控制字段

16. 1 标准化 - 数据标准化 2 网格布局模块排列方式抽象出多种布局结构 • 数据结构统一 • 接口差异大 • 关键字段统一 • 控制字段乱 • 数据解析统一 • 层级不规范 4 7 横滑布局 1拖N布局 5 8 banner布局开发成本高分Tab布局 13 17 20 18 21 23 22 24 有标准无标准 10 12 16 19 6 9 11 15 流式布局 3 25~29 30 31 32 适配成本高 33 理解成本高瀑布流布局 36 34 35 37 38 14

17. 标准化 - 埋点标准化灵犀广告 Metrics mge2 mge4 外卖广告 FPS pv mv 广平广告启动时间 tag 埋点上报卡顿率埋点策略点击策略露出策略停留策略埋点类型点击埋点曝光埋点统计埋点重复过滤性能埋点埋点配置下发

18. 动态化思考：如何保证前后端在不同的业务场景下，都能遵循同一套标准协议？

19. 动态化 - BFF破局者 BFF是（Backend For Frontend） • 服务于前端的后端 • 解决多端业务耦合的问题 • 服务自洽，谁使用谁开发 BFF的困境 • 技术栈不统一，学习难度大 • 后端开发流程，客户端上手成本高 • 服务粒度重，运维成本高

20. 动态化 - 容器方案服务端动态化容器数据源容器 API配置编排服务客户端动态化容器业务服务热部署 API网关业务模块1 DSL引擎 Java引擎 Android/iOS 业务模块2 API网关业务服务 Local引擎在线编译动态孵化新页面业务模块3 API网关我们的方案 • 服务编排 + 热部署降低发布成本 • 容器负责运维 • 客户端负责业务逻辑 • 模块使用Java开发成本低、性能高降低开发成本快速上线业务服务

21. 动态化 - 实战示例 • 编写DSL，获取业务数据 • 编写业务模块，将业务模型转化成标准化协议数据

22. 动态化 - 实战示例配置数据源配置API

23. 动态化 - 客户端页面容器效率性能灵活性 • 三足鼎立，不可兼得 • 内置9种布局算法 • 比MRN性能好、比插件化兼容性高

24. 动态化 - 客户端模板容器解析标签树节点树 <Container> Container <Container> <Container> <Image> <For> 表达式计算 Container 视图树 FlexLayout Container FlexLayout FlexLayout XML <Text> • 以Flexbox规范为核心 • 绑定视图与业务数据 • 动态下发渲染 Image 数据绑定 Text Text Text ImageView TextView TextView TextView

25. 配置化如何打造产研配置能力形成闭环？

26. 配置化 - 模板配置化 • 降低技术壁垒，上手简单好用 • 嵌入研发流程，打造产研闭环 • 模板丰富，满足多样化场景 • 云真机实时预览，所见即所得数据绑定模板库

27. 配置化 - UI2Code 设计稿转代码是前端工程师日常重复性工作，工作复杂度低，工时占比高业界方案： • 一种是通过训练神经网络，从图片或草图直接生成代码 • 一种是基于Sketch源文件，从中解析出图层信息转化成DSL并生成代码算法准确率不高 02 01 代码可读性差 03 研发流程覆盖窄

28. 配置化 - UI2Code 我们的方案： • 组件识别 • 横竖切割算法 + 模型选择算法 • 可视化干预 • 属性推断 + 业务信息绑定 • 深度集成研发流程

29. 配置化 - UI2Code DSL生成过程

30. 配置化 - UI2Code 线上案例：

31. 配置化 - 埋点配置化 • 支持可视化配置 • 实时圈选控件 • 支持携带业务特有数据前端配置后端云真机平台

32. 配置化 - 埋点配置化效果演示：

33. 落地与实践 MBC方案解决的问题： 1 核心业务既要高性能又要灵活性的问题 2 MBC方案适用场景： 01 团队对页面的性能要求和稳定性要求较高，还期望有不错的动态能力 02 业务以展示为主的，诸如列表型首页、商品列表页、Feed流页面、搜索页面等业务开发流程中产研配合效率低下的问题 03 MBC方案的缺点： • 前期学习成本高 • 业务首次接入成本高后端接口模型稳定，但客户端技术方案、展示样式多变 04 现有的产研流程配合效率成为了业务发展的瓶颈

34. 收益 ↓ 50 % ↑ 60 % 人力成本产研效率 50 % 启动时长对比 MBC服务端容器节点耗时业务覆盖度 MBC接口成功率 FPS对比

35. 未来规划动态化配置化进一步增强逻辑动态化能力，收敛可交互的行为，支持交互更加复杂的页面与逻辑支持页面配置化能力，将全页面配置能力开放给RD、PM、运营，完全解放RD对后端接口的适配工作智能化彻底解耦样式与数据，做到页面结构、模板样式、页面内容三者的千人千面

36.

37.

38. MBC_业务标准化容器在美团的实践扫描二维码提交议题反馈