美团外卖前端容器化演进实践( 五 ) _美团

两端对齐的收益
之前因为历史原因，提单页很多的功能模块，Android和iOS在实现上大相径庭，完全不一样的实现让两端在新业务需求到来时，在与服务端接口对接、开发工时和开发方案上都存在很大的差异，这些差异点对产品需求的排期、开发和测试上线上都产生了很多负面的影响。
提单页在容器化后的另外一项收益，就是Android和iOS在模块层级的代码实现，完成了统一。借助于PGA框架和Element注册机制，Android和iOS具有大致相同的模块结构，相同native_id的模块获取的API接口返回字段完全一致；在页面请求接口数据时，相同ID的模块也提供同样的数据字段。在后续的开发过程中，两端对API接口字段的请求趋于一致，可以最大程度地减少因为两端不一致带来的合作方开发成本，也可以在一定程度上减轻下游的测试压力。
总结与展望
外卖客户端一直在推动核心页面的标准化，同时一直在探索尝试让核心页面也具备动态化能力。提单页作为下单路径上的核心页面，在PGA框架的基础上完成了容器化重构。至此，外卖首页、点菜页和提单页在页面这一层级都统一使用PGA框架实现。统一化和标准化之后，可以让编程风格趋于一致，代码结构在不同平台保持统一，在后续的需求开发中，可以有效减少因为两端实现不一致出现的隐性开发成本。
提单页在容器化之后，让区域动态化的技术演进更容易推进。模块之间的解耦让不同模块可以自由选择模块内使用的技术栈而不会对其他模块产生影响。对于提单页的部分模块，完全可以通过Mach或者RN等动态化方案来实现，通过区域动态化来进一步减少开发成本，提高业务需求的开发效率。
在提单页之后，客户端会继续推进订单状态页使用PGA框架实现容器化，让标准化框架对用户下单路径上的核心页面实现100%覆盖。同时积极在提单页的商家商品信息展示、放心吃、准时保等模块探索页面的部分区域动态化，进一步缩减包大小，提高开发效率。
附录
1. Mach (马赫) 是外卖终端组自研的多终端跨平台级的局部动态化技术。
2. MRN 是美团基于React-native 0.54.3进行的二次封装，抹平了两端上的差异，并且提供了一些基础库和组件库供业务开发同学使用。
3. Metrics 是美团平台团队和外卖团队，开发的新一代App性能采集、监控、统计平台。
4. Hertz（赫兹）是一个自动化的性能采集与监控SDK，可以在开发、测试、灰度、运维各阶段，采集性能指标、检测卡顿、测量页面加载时间，帮助开发者监控和定位性能问题。
作者简介
李肖、廷瑞、彦平、同同均为美团外卖团队工程师。
欢迎加入美团前端技术交流群，跟作者零距离交流。如想进群，请加美美同学的微信（微信号：MTDPtech03），回复：容器化，美美会自动拉你进群。
招聘信息