美团到店前端工程化架构演进

1. 美团到店前端架构标准化演进张芳美团/到店平台技术部

2.

3. 个人介绍上海交通大学毕业后加入美团负责过营销C/B端业务，主要做低代码平台的建设和维护目前在到店平台技术部负责到店前端研发框架基础设施建设个人主要兴趣点是前端工程化和工具链发展。

4. 目录 • 业务背景简介 • 架构演进历程 • 阶段一 —— 规范化 • 阶段二 —— 工程化

5. 你能得到什么 • 如何在一个大型团队中快速落地架构标准化演进 • 演进过程中有哪些关键的方法和实践 • 标准化架构演进能给团队带来什么样的收益

6. 目录 • 业务背景简介 • 架构演进历程 • 阶段一 —— 规范化 • 阶段二 —— 工程化

7. 业务背景业务发展，团队规模快速扩大，技术「熵增」问题严重

8. 2019年初到店前端团队技术架构需求组件类库设计开发联调测试语言框架技术选型构建上线监控运维基础架构故障运营流程规范（多套）研发框架 10+自研 Lego/Node-Server/… 研发支撑

9. 到店前端团队挑战技术问题管理问题成本无统一的工具抓手来提升整体能力基线效率上层解决方案无法统一建设及快速复用质量

10. 架构标准化目标需求组件类库设计开发联调测试语言框架技术选型构建上线监控运维基础架构故障运营流程规范（一套）研发框架研发支撑

11. 目录 • 业务背景简介 • 架构演进历程 • 阶段一 —— 规范化 • 阶段二 —— 工程化

12. 目录 • 业务背景简介 • 架构演进历程 • 阶段一 —— 规范化 • 阶段二 —— 工程化

13. 架构标准化第一步规范先行规范先行规范先行

14. 统一流程规范建立跨团队统一认知 Why 为规模化建设工程化能力打基础降低沟通协作成本学习成本减少因规范不一致造成的质量问题

15. 统一流程规范如何制定 How 如何落地

16. 统一流程规范卡控工具运营大盘抓手统一基础设施落地存量项目按需，规范渐进接入增量项目全量，规范全部达标策略先增量，后存量流程发起提案委员会评审公示两周修改业务规范规范基础规范发布提案工具建设运营制定

17. 统一基础设施抓手基础设施研发规范研发流程需求管理 -Ones 设计平台 -Ingee 代码托管 -Code 需求规范设计规范开发规范联调规范开发联调需求设计 API管理 -PApi CI/CD 平台 -Talos 测试规范测试构建构建 CDN 监控-Raptor S3 上线规范上线埋点-灵犀监控运维大盘-Tinker 运维规范故障运营运营平台 -COE 运营规范

18. 核心基础设施抓手——发布平台连接开发和运维关键环节发布平台组织闭环，需求响应快

19. 发布平台架构插件市场 TL发布卡控 Source Code 核心能力 lint build 插件机制 before before build -all -build after- build before- deploy after- after- deploy deploy rollbac k pipeline流水线 jenkins集群服务依赖 git S3服务 docker 灰度 … Target Code 项目管理研发度量状态流转引擎 CDN服务域名服务

20. 基于发布流水线建设规范卡控抓手标准发布流水线业务自定义发布流水线 TL发布代码拉取依赖安装工程规范检查 Lint规范检查工程依赖收集标准化工具接入检查监控规范检查构建产物备份构建产物 TL发布工程初始化依赖安装工程规范检查 Lint规范检查 Test单测规范检查构建域名安全检查 ES高级语法检查工程依赖收集标准化工具接入检查监控规范检查构建产物备份构建产物发布监控数据 diff 人工确认发布 Test单测规范检查构建人工确认

21. 运营大盘

22. 小结通过流程规范&基础设施统一建立起良好的标准化落地抓手具有了规模化建设工程能力的基础

23. 目录 • 业务背景简介 • 架构演进历程 • 阶段一 —— 规范化 • 阶段二 —— 工程化

24. 业务背景 node基础架构运维成本高配套设施不完善导致的质量问题多中后台场景多，秒开、SEO诉求弱

25. 基础架构统一基于S3纯静态架构

26. 基于S3纯静态架构——运行时架构运行时服务网关浏览器鉴权访问域名 Nginx html 主文档商家账号文件上传返回静态资源失败回源访问静态资源成功图片上传 http请求 S3服务 CDN 后端http服务后端 Pigeon / RPC 服务

27. 基于S3纯静态架构——开发架构开发业务代码开发资源构建资源备份构建资源部署灰度部署域名配置发布流水线部署异常回滚流水线运维 CDN基础运维公共域名运维流量监控 S3基础运维安全策略域名基础运维

28. 小结基础架构统一大大释放了我们的服务运维成本同时提升服务性能

29. 业务背景开发规范落地成本迭代成本高研发基建未统一集成开箱即用研发流程中基础设施服务需要手动对接缺少各类场景下的最佳实践

30. 统一研发框架框架约束开箱即用服务打通 Rome 研发框架最佳实践

31. 研发框架架构图应用类型工程方案 SPA MPA 微前端 … 质量效率体验领域最佳实践 CDN容灾按需编译约定式路由微前端白屏监控差量构建发布调试辅助工具 SSR 核心能力框架规范 SPA+ MPA 插件机制语言规范基建统一编码规范工程规范标准化研发工作流技术栈规范

32. 为什么要做框架约束？工程目录千人千面项目依赖碎片化严重基建使用参差不一

33. 框架约束如何实现工具收敛脚手架版本管理工具卡控规范落地监控本地cli卡控工具赖统一收敛基建统一收敛埋点升级运维请求 sass eslint webpack 发布流水线卡控依赖卡控规范统一目录规范卡控技术栈规范基础语言框架路由管理状态管理 css方案语言编译基础类库工程规范（目录结构/文件命名/readme/changeLog/分支规范）编码规范（代码风格/代码注释）语言规范（ES/TS） pr卡控分支命名卡控编码风格卡控

34. 目录规范统一

35. 依赖统一收敛

36. 基建统一引入规范制定编译时注入

37. 开箱即用的插件能力一键快速接入

38. 一行代码接入监控

39. 一行代码接入CDN容灾

40. 服务打通开发联调测试发布监控运维 git仓库发布平台脚手架 CDN容灾埋点服务 API管理平台灰度平台指标监控大盘水印服务 … 自定义域名服务

41. 10分钟启动并发布一个新项目工作台消息推送项目创建项目发布

42. 垂直场景的最佳实践组件一致性最佳实践

43. 业务场景1——沉淀资产发现难，复用效率低老大，这个需求写完了，手速是不是 666，能加� 不？咦？这个需求里面的组件咱们业务组件库有沉淀，你又重写了一遍？老大我看了下是组件库的文档不完善，当时没有注意到这个组件... 来不及重新做了，明天要上线�

44. 业务场景2——UI一致性难保障，沉淀效率低这次需求的视觉稿搞定，我下班啦，剩下交给你了� 这不是和上次一样的功能和交互场景吗，为啥视觉稿不一样啊？� ♂ 不好意思，没注意上次需求的视觉稿，按照新的视觉来实现吧～啊，组件又要重新写了�

45. 组件一致性最佳实践方案资产平台平台打通文档展示设计资产资产分析资产管理资产结构化印迹设计平台 C2D D2C PRO Code 生产工具链资产工具开发测试组件开发 demo 开发单元测试覆盖率检测工程规范设计视觉稿消费工具链构建发布多模块类型 Npm 包管理资产结构化目录规范注释规范生产运维 IDE插件自动化代码生成升级运维测试规范文档规范资产规范资产协议声明规范版本禁用调用规范

46. 生产环节多模块类型的Npm包产物源代码标准发布流水线可视化资产信息设计资产

47. 消费环节

48. 小结研发框架统一主要解决了研发过程中的效率和成本问题让业务只关注业务逻辑的开发

49. 总结规范化工程化标准化

50.

51. Thanks

52. Q&A