当我们在谈论大前端时，我们在谈些什么

前端技术已经延伸至各种“端”，随着业务和技术的快速发展，大前端工程复杂度也越来越高，特别涉及大型团队或多团队协作的时候，大前端工程化就尤为重要。大规模项目如何更好地进行团队协作？随着大前端的概念逐渐深入人心，会带来什么？年轻的前端人该如何在大前端趋势下学习与提升？带着这些问题，InfoQ 记者采访到了美团基础技术部前端技术中心负责人王鹤，为我们分享了美团的大前端建设实践与经验。

大前端时代

“大前端”是一个由国内业界发明的技术名词，甚至没有对应的英文词汇（如果有，请悄悄告诉孤陋寡闻的笔者），而它却逐渐变成了前端领域的大趋势，在客户端开发上，Native 与 HTML5 争斗了十年，谁也没有取代谁，反倒是有融合的趋势，而融合之后的产物在一定意义上来说就是大前端。

什么是大前端

王鹤老师表示，他理解的大前端的范畴是：

1. 用户终端设备的软件模块，如电脑、手机、穿戴式设备、IoT 终端等。
2. 与用户表现层强相关的技术领域，如 Node 服务、静态资源管理服务等。

在我们日常沟通中，大前端 = Web 前端 + Native 端 + 跨端。在细分之下，小程序可以归纳到跨端这个类别中，前端在日常表达中通常指的是 Web 前端，所以可以把 Node 归纳到 Web 前端这一类别中，因为 Node 通常会用于与 Web 相关技术上，如模板渲染、提供 API 等，当然这个归类并不那么严谨，也不绝对，只是为大家提供一个思考的方向。

大前端和前端的区别

大前端和前端的区别是大前端是广义的前端概念，从技术广度和深度上做了延伸，这也是对当前前端领域发展为业务范围更广、终端形态更多、涉猎技术更复杂、职责跨度更大的一种演进状态描述。

前端技术演进史

技术发展是连续的，代表性技术出现会带来更多的实践，从而推动技术向前演进，所以每个阶段都会有一定重合，而 Web 技术和移动终端技术侧重点有所不同，以 2000 年后的 Web 技术为例，主要分 3 个阶段：

• **页面开发阶段（2000~2010）：**以单页面开发为主，要解决兼容性问题，靠工具库提高效率，代表技术如：jQuery、ExtJS、DWR（Direct Web Remoting）等。
• **模块化开发阶段（2005~2015）：**以模块化开发为主，要解决性能问题，靠构建工具和 UI 框架提高效率，特别是 Node.js 平台推出后，代表技术如：Angular、React、Bootstrap、Less、Gulp 等。
• **应用开发阶段（2010~2020）：**以应用开发为主，要解决工程化问题，靠自动化工具和跨平台提高效率，代表技术如：Docker、Webpack、React Native、Flutter 等。

移动终端简单归纳一下是：移动互联网（2007 年 iOS 1 系统发布，2008 年 Android 1.0 系统发布），跨平台开发（2015 年 React Native 发布），小程序开发（2017 年微信小程序发布）。

大规模项目的团队协作

前端技术已经延伸至各种“端”，随着业务和技术的快速发展，大前端工程复杂度也越来越高，很多项目会涉及到大型团队或多团队协作，但团队中每个人的技术水平各不相同，为了提升研发效率、保障大规模协同，如何让团队中的同学更好地协作是一个值得思考的问题。

王鹤老师表示，美团把事情分为业务开发和框架（工具）开发。业务开发主要是实现产品需求，要对业务有深入了解，掌握团队所用到的技术栈和工具。框架（工具）开发主要是为提升业务开发效率而开发的框架或工具，框架是把系统可复用层抽象出来，如网络层，存储层等，工具是研发过程中效率工具，如自动化测试工具，持续交付工具等。通常上系统是有多个模块组成，那么会有一个从复杂到简单的拆解过程，既然系统有分层架构，那我们会按照每个人技术水平来安排不同复杂度的工作。而他们常用的方式是：

• 把人放到正确的位置。 通过合理的架构分工，把事情分清楚，不同人才聚焦擅长的领域。
• 明确权责，价值优先。 通过明确权责，让团队人人以结果为导向，不为追求技术而技术。
• 用机制减少不必要的沟通。 通过规范、流程和工具提高协作效率，降低不必要的沟通和协作成本。
• 重视知识传承和人才培养。 通过建立导师制度、培训分享等手段，建设适合于业务的人才梯队。

王鹤老师说：“我们要不断提升两个标准，一是通过对人才的培养提高上限，二是通过工程工具建设提升团队下限。”

美团的大前端实践

美团在大前端工程化方面有较多的优秀实践，如美团 App 的持续交付平台，质量交付平台，低代码开发平台，物料管理平台等等。美团鼓励技术团队把优秀的工具或服务面向公司运营，通过美团公共服务平台来服务全公司技术团队，公共服务平台有各个技术团队维护的几百个公共服务，如：Serverless 计算平台，移动端云测平台，统一容器桥服务等等，这些公共服务为大前端工程化提供了低成本的实现。

提高工程效率

工程效率涉及到整个研发过程的各个环节，各业务因特点不同，无法在度量上进行完全横向对比，但可以通过一些参考指标帮助我们评估工程效率。如：需求交付效率（需求吞吐量，X 周完成产品需求交付的占比等），开发效率（代码上线时长 TP90，组件复用率，发布频率等），测试效率（自动化覆盖率等），运维效率（处理时长 TP90）等。在提升工程效率上，美团各个团队都有不同的尝试和实践，举几个提升工程效率方面的例子：

• 工具链平台： 不断完善开发工具和运维工具，提升研发和运维效率，如研发需求及流程管理工具、前端持续交付平台（小程序，Native，Web）、端到端监控平台、日志平台等。
• 自动化平台：通过自动化降低人工参与，提升操作效率，如 UI 自动化测试、自动化接口生成等。
• LowCode 平台：通过组件、模板、配置化，AI2Code 等方式降低界面开发成本，提升界面交付效率。

保障工程质量

工程质量也涉及到整个研发过程的各个环节，研发工具和运维工具提供不同的技术指标，二者结合最终形成一份通用的指标体系，各个业务团队可以根据自己的情况来选取和运营指标。如：开发质量（静态代码 Bug 率等），测试质量（提测成功率、PR 成功率等），线上质量（Crash 率、ANR 率、秒开率、端到端成功率等）。

王鹤老师讲了一个保障工程质量的案例：

美团拥有几十个 App、上百个业务线，它们都使用统一的监控平台 ，这样保证大家质量度量口径是一致的，监控工具在长期的建设过程中不断完善和积累经验，为后来的新业务提供更可靠的质量保障。如：我们在 2020 年与到店终端团队合作做秒开率指标治理，我们从计算口径、统计算法、性能优化等方面展开合作，通过一段时间的运营，客户端秒开率达到了 76%+，沉淀了不少通用的性能经验为公司同学提供参考。

效率和质量相互驱动

大前端最终交付的产物都是直面用户的，所以在效率和质量两方面都需要有不错的表现。王鹤老师表示，效率和质量并不是此消彼长的关系，而是相互驱动的，如高质量会让我们更加关注交付，而不是一直在修复问题。在权衡上我们要考虑业务的属性，如：

1. 支付系统在质量和效率之间会优先选择质量，后台管理系统则在某个质量基准上偏向于效率。
2. 业务在起初阶段会更关注效率，在慢慢提升质量。这种权衡本质上是解决“效率”和“质量”在相互“抢占”对方的时间，所以我们应该更专注在基础工具链的建设，健全工具链会让我们可以在较高起点上思考“效率”和“质量”，例如：业务方统一使用 MRN（Meituan React Naitve）多端方案，避免了各 App 不同技术重复建设，MRN 完善的工具链，能够为开发者提供质量和效率的保障。

美团的大前端现状

随着技术栈和硬件的发展，前端技术已经延伸到各个“端”，除了我们传统的 Web 和移动客户端外，还有如美团的收银机，智能取餐柜，无人配送车等等。在大前端技术发展上，美团在应用层上做的多一些。在工具上，各大厂都在为支撑大规模团队高效率协作，大规模业务高效率交付而不断实践，比如在本次 QCon 大会上，大前端工程化专场将会为大家带来了几个精选的主题，都非常值得期待。

王鹤老师分享一下他和他的团队在工程化方面正在做和计划做的几件事情：

• 设计协作平台将改变传统界面交付流程。 现在方式是从产品原型到设计稿，从设计稿到界面，这些交付物都是独立的。而新的方式是通过设计协作平台把界面交付变更更简单，前端工程师不需要关注界面如何产生，只需要关注逻辑和复杂交互即可，简单场景可以做到设计即上线。如我们本次议题中 Imgcook 就给大家带来了在这方面的实践。
• 持续交付平台是工程化的重要载体。 通过将研发过程各个环节模块化，提升协作和交付效率，如通过模块创建项目，通过 Pipeline 组件做代码检查，性能测试等，通过监控模块来实现自动灰度和回滚。
• 端智能提高异常精准识别。 异常总是错不及防，上报到服务端的日志量会随着业务和用户规模发展越来越大，通过端智能来提升异常识别准确度是我们的一个探索方向。

前端人切忌自我设限

老王（王慧文）在演讲曾提到过：“不要为自己设限”。所以前端工程师在大前端工程化中，应该积极承担业务工程化建设或工程工具建设工作。在工作内容上，前端工程师从最初开发“页面”到开发“应用”，在工程复杂度上有明显的提升，《论语》中说道：“工欲善其事，必先利其器”，所以面对复杂工程，我们要学会用工具来提升效率，使复杂问题简单化。在此，王鹤老师向所有年轻的前端开发者们分享了三个他在美团学习到认知：

• 不要“自我设限”。 因为成长不会发生在你的经验范围之内，学习的第一步是修炼一个开放的心态，所以不要给自己设限在某一个领域或技术栈，在对某个领域有一定深度理解后，多接触新的领域会能给我们带来更多的输入。
• 重视“基本功”。 对我们开发者们而言，编码是基本功，Code Review 是基本功，排查问题也是基本功，基本功在于经年累月的实践，我们持续把基本功练好，就能赢了绝大部分事情。
• 寻找向身边牛人的学习机会。 这不仅能够让我们学习到前辈沉淀的经验，更重要的是能够帮助我们识别自己的盲区，但我们要知道，识别盲区简单，让自己接受盲区则难，更重要的是要针对识别的盲区制定行动计划。

作者简介

王鹤，美团基础技术部前端技术中心负责人，负责美团技术平台产品前端开发和前端基础设施建设工作，包括持续交付平台、前端监控平台、日志服务、网络服务、脚手架组件、UI 组件等，在美团还曾负责过的领域有企业 IM（大象）端和企业基础架构服务。

关于大前端发展趋势想与王鹤老师进行深入交流的，可以到 2021 年 1 月 8-9 日的 QCon 全球软件开发大会（北京站）现场，作为“大前端工程化”专题的出品人，王鹤老师将与美团、腾讯、阿里、抖音的技术专家共同为大家带来那些伴随业务快速发展、团队规模扩大和技术快速升级沉淀下来的经验和最佳实践。