美团-2020美团技术年货——前端篇-2021.1-247页_10mb

2020 美团技术年货 - 前端篇总结

核心内容

2020年美团技术年货中，前端篇主要围绕移动端 UI 一致性解决方案和美团外卖 Flutter 动态化实践两个核心主题展开。文档详细介绍了 UI 一致性项目的背景、整体方案、设计体系建设、工具链建设以及 Flutter 动态化实践的技术选型与实现细节。

主要观点

• UI 一致性是提升用户体验、降低开发成本、提高产品迭代效率的关键。
• 通过设计规范沉淀、组件库建设、工具链搭建以及云协作平台的配合，实现从设计到开发的闭环流程。
• Flutter 动态化是实现快速迭代和减少包体积的重要手段，但其面临性能与安全等挑战。
• Flap是美团外卖基于 Flutter 构建的动态化方案，其核心在于静态生产 DSL与运行时体系的结合。

关键信息

1. 移动端 UI 一致性解决方案

• 背景：随着外卖业务进入成熟期，UI 一致性问题凸显，设计、开发、测试、产品等多个层面均受到负面影响。
• 问题：
  • 设计层面：缺乏统一规范，风格不一致。
  • 开发层面：组件碎片化，维护成本高。
  • 测试层面：频繁回归，效率低下。
  • 产品层面：版本迭代慢，无法快速响应业务需求。
• UI一致性项目：
  • 由设计与研发团队共建，目标是统一设计语言、提升组件复用率。
  • 包括积木工具链、代码组件库、设计云协作平台、官网门户四个核心部分。
• 设计体系建设：
  • 外卖 DPL（Design Pattern Library）是设计规范与代码组件的桥梁。
  • 通过统一设计语言，提升开发效率，减少走查负担。
• 工具链建设：
  • 积木 Sketch 插件提供设计规范支持，包括图标、颜色、组件、数据填充、文字模板等。
  • 官网门户提供文档化支持，便于 RD 同学查阅组件使用方式。
  • DSL 转换器与运行时构建起动态化闭环，支持逻辑与页面的动态化生成。

2. 美团外卖 Flutter 动态化实践 - Flap

• 动态化需求：为满足快速上线、包体积优化和线上质量维护，美团外卖决定探索 Flutter 动态化方案。
• 技术选型：
  • 静态生产 DSL被选为最终方案，因其在性能、安全和开发体验上更具优势。
  • 通过 Analyzer API 分析 Dart 源码，生成 JSON DSL，并在运行时进行解析与执行。
• Flap 架构：
  • 分为三个主要部分：开发阶段、DSL 转换器、运行时环境。
  • 通过 DSL 描述页面与逻辑，运行时使用 Function.apply() 和 Proxy-Mirror 实现动态化。
• 运行时原理：
  • 包括Prepare与Running两个阶段。
  • 使用 Scope 系统管理变量与方法的作用域，支持复杂逻辑与嵌套结构。
• 挑战与应对：
  • 工作量大：需长期投入，构建完整的 DSL 支持。
  • 项目复杂：需设计合理的架构以支持扩展。
  • 疑难问题多：需持续优化与完善。
• 生态支撑：
  • Flap 构建了完整的生态体系，涵盖开发、发布、测试、运维。
  • 通过二级缓存和实时更新，实现快速发版与低延迟加载。
  • 支持降级容灾，保障用户体验与系统稳定性。

UI 一致性成果

• 资源一致性：完成近百个 Iconfont 替换，减小包体积。
• 组件库建设：完成三十多处组件替换，中等业务需求平均节约 3pd 人力。
• 工具链提效：使用积木插件，强依赖设计资源需求提效 30% 以上，弱依赖需求提效 50% 以上。
• 设计语言沉淀：通过官网与设计云协作平台，实现设计规范统一管理与共享。

参与与推广

• 项目推进：由 UI 同学按版本提出需求，由移动端排期并落地实施，由 UI 统一验收。
• 未来方向：持续优化设计语言与工具链，推动 UI 一致性项目成为提升产研效率的重要手段。
• 招聘与加入：美团外卖长期招聘 Android、iOS、FE 高级/资深工程师和技术专家，欢迎加入项目。

致谢与参考文献

• 感谢项目参与的 UI、RD、PM 等团队成员。
• 参考了阿里、爱奇艺、Google 等设计与技术方案，为项目提供思路与支持。

总结

美团外卖在 2020 年通过 UI 一致性项目与 Flutter 动态化实践，显著提升了产品体验的一致性与开发效率。UI 一致性通过设计规范、组件库与工具链建设，形成了一套完整的闭环流程；而 Flutter 动态化通过静态生产 DSL 与运行时体系，实现了快速迭代与性能优化。项目成果显著，未来将持续优化与推广，推动更多业务模块实现高效与一致的 UI 体验。