美团客户端动态化实践

1. 美团客户端动态化实践美团点评：方锦涛

2.

3.

4. 目录美团动态化的背景动态化技术方案概览美团客户端动态化体系移动端动态化未来之路

5. 关于美团 • 200+品类到店到家 … … 出行 …

6. 关于美团客户端平台 • 众口难调 − 业务发展阶段不一样 − 团队技术栈不一样 − 历史包袱不一样

7. 移动端开发的痛点 Native • • 多端开发升级慢 H5 • • 功能弱体验差

8. 动态化的目的 • 提高迭代效率 – 相对Native 开发效率：多端开发更新效率：升级慢 • 提高用户体验 – 相对H5 功能问题体验问题

9. 目录动态化的目的动态化技术方案概览美团客户端动态化体系移动端动态化未来之路

10. 动态化技术方案概览已知方案百度轻应用, 小程序, DynamicLoadAPK, ReactNative, HtmlNative 阿里巴巴支付宝小程序, Weex, Atlas, Tangram 腾讯微信小程序, VasSonic, ReactNative Google Android Instant App, Progressive Web App, Flutter Facebook ReactNative 携程 DynamicAPK, Ctrip ReactNative(CRN) 滴滴 VirtualAPK, DynamicCocoa 其他快应用

11. 动态化技术方案总结新开发模式虚拟运行环境布局动态化 FlexboxLayout Yoga ReactNative Flutter Tangram Weex 快应用偏Native 偏H5 Atlas DroidPlugin VasSonic PWA VirtualAPK InstantApp PhoneGap 小程序业务插件化（Android）原有开发模式 Web容器增强

12. 动态化之路 Native H5

13. 动态化方案的选择 • 迁移效率 • 开发效率 • 更新效率 • 稳定性 • 流畅度

14. Web容器增强短期运营业务-案例： Web能力增强（Hybrid/PWA）迁移效率各类节日运营活动、广告运营活动流畅度开发效率稳定性更新效率

15. 业务插件化业务插件化（Atlas/DroidPlugin/VirtualAPK）一键动态化-案例：迁移效率老业务一键迁移：美团大交通业务流畅度开发效率稳定性更新效率

16. 布局动态化极致稳定性-案例：布局动态化（Flexbox/Yoga/Tangram）迁移效率流畅度美团首页运营位、外卖首页运营位开发效率稳定性更新效率

17. 虚拟运行环境新业务动态化-案例：虚拟运行环境（RN/Weex/Flutter）迁移效率美团“发现”Tab 流畅度开发效率稳定性更新效率

18. 动态化技术方案对比方案迁移效开发效更新效稳定性流畅度适合场景率率率 Web容器增强高高高中低短期运营业务业务插件化高中中中中一键动态化 Android 布局动态化低中高高高极致稳定性虚拟运行环境中高高中中新业务尝试

19. 目录动态化的目的动态化技术方案概览美团客户端动态化体系移动端动态化未来之路

20. 美团客户端动态化的痛点布局动态化：动业务发展阶段不一致 MTFlexbox 态业务插件化：化团队技术栈不一致求不历史包袱不一致美团插件化框架Hydra 诉多套解决方案虚拟运行环境： MRN 一 Web容器增强：致 TitansX

21. 美团平台动态化体系全景图布局动态化业务接口辅助工具运行环境业务插件化虚拟运行环境 Web容器增强 MTFlexbox Hydra MRN TitansX 布局模型一键插件化API 组件和框架 TitansX JS API DSL定义 Native扩展支持动态布局IDE 插件构建工具 Bundle拆分工具调试工具扩展组件库调试工具布局解析器 Multidex加载多实例运行环境离线化 Native控件支持资源管理器替换稳定性监控长连接反劫持基础动态化服务（升级管理、新版本推送、安全保障等）

22. 布局动态化-IDE工具

23. 布局动态化效果

24. Android业务插件化-方案对比框架接入方式 Atlas （阿里）迁移成本代码迁移资源迁移特有的awb方式高低 VirtualAPK 需要手工配置脚本未知高（滴滴） RePlugin 业务无法共享组件高高（360） Hydra 跟库依赖集成一致零成本零成本（美团）

25. Android业务插件化: 难点资源处理插件对宿主的资源访问问题库依赖无缝切换代码处理系统函数调用的兼容性问题插件依赖

26. 业务插件化: 解决方案 • 介入编译打包过程，全局修改字节码所有资源 .ap_ 美团APK 所有库所有代码插件资源 .dex .ap_ 插件APK 插件依赖插件代码 .dex

27. 美团Android插件化效果 compile(‘train:9.1’) pluginCompile(‘ train:9.1’ )

28. 虚拟运行环境：MRN MRN业务开发平台发布系统开发工具业务组件业务框架线上运维发布流程调试工具组件规范应用架构稳定性监控静态检查代码转换工具 UI组件页面模板性能监控持续集成发布平台业务异常监控 Native桥 ReactNative框架优化内核优化双平台对齐业务隔离容灾备份

29. RN的状态过高期望的峰值可实质生产的高峰期见度 RN的状态泡沫化的谷底期诞生的促动期成熟度稳步爬升的光明期

30. 美团动态化方案总结方案业务/页面布局动态化美团首页、搜索结果页、外卖首页、美食首页等 MTFlexbox 业务插件化搜索业务、火车票、机票、周边游、到餐旗舰店、金融闪付等 Hydra 虚拟运行环境收藏业务、内容业务、火车票部分页面、外卖退款页等 MRN Web容器增强各种运营活动页面 TitansX

31. 目录动态化的目的动态化技术方案概览美团客户端动态化体系移动端动态化未来之路

32. 动态化的未来之路 Native H5

33. 似曾相识的PC年代重交互效率工具：CS 其他：BS

34. 动态化的未来之路示例项目编辑工具推荐的方向例子业务插件化各种笔记软件、美颜软件等插件化、InstantApp 交易工具 Web容器增强/虚拟运行环境资讯工具 Web容器增强通讯工具业务插件化小程序、快应用、PWA、RN 小程序、PWA 插件化实物电商、生活服务电商等各类新闻软件各类IM、视频聊天工具

35. 动态化的未来之路 • 重交互效率工具 – Native • 其他– JS

36.

37.

38.

39.