“云 + 端”一体化 让前端开发流程“纵享丝滑”

有人说，移动互联网的下半场，效率就是生命。而对于金融服务领域更是如此，具体而言，该领域的强监管属性对前端开发人员提出了更高的要求，在政策响应上要足够快，配套工具要更加健壮、完善。那么，如何才能多快好省地复用集团的基础设施或者开源方案？如何才能进一步降低团队内外的沟通成本，提升研发效率？美团金服大前端团队在前端工程化方面进行了“云+端”的尝试。通常意义上，我们了解到的“云+端”模式主要应用在物联网领域。与之不同的是，美团金服对“端”的定义不是业界熟知的客户端与云服务的协作，而是定义在 IDE 上，借助云（Serverless）+ 端（Electron）两个方向来规范和标准化前端研发流程。

在前不久举办的QCon全球软件开发大会（上海站）上，美团点评前端技术专家田泱发表了《云+端一体化：前端工程化探索》的主题演讲，以下是 InfoQ 在会后对田泱进行的采访。

InfoQ：请您介绍一下，目前在美团点评负责的业务，以及团队情况。

田泱：我是来自美团点评金融服务平台的前端工程师田泱，目前负责美团金服内部的工程体系建设，主要是一些研发的工具链，包括前端的基础设施、链路监控、压测平台、攻防演练、质量保障等等。所有的工具都面向金服各大业务线，甚至集团。

InfoQ：您认为最近几年前端工程化经历了怎样的变化？美团点评在这方面进行到了什么程度？

田泱：据我这几年的观察，我觉得前端工程化经历了两个方向的发展：一是横向跨端，探讨的还是多路复用，一套代码跑多个地方，比如 Rn、Flutter、小程序等，一方面可以提高效率，另一方面也满足了少写代码的诉求。另一个是纵向跨工种，探索前端工程师的边界，更多的是在研发工具链上的深入，比如阿里的 egg、basement，我们内部也有相应的解决方案。因为我们的客户主要还是后端和 QA 的一些研发人员，我们的工程化方向主要是帮助大家扩展自己的工作边界，这是我们近几年的一个核心。

InfoQ：请您介绍一下，云+端一体化具体是什么？与传统的研发模式相比，它有哪些优势和不足？

田泱：端上技术的变化比较快，我们更多地还是关注在研发过程中不变的东西，所以一直在打磨整个工具链。我们的目标是开发与协作能都在云上完成，最终的落脚点可能在 CloudIDE 上。但目前基于一些基本能力的限制，CloudIDE 的成熟度和易用性还远不及本地 IDE。所以我们借助了 Electron 来辅助做一些 IDE 的扩展，比如可视化的工程构建工具，同时配合类似于 AWS 的标准云服务，来提升研发的体验与效率。我们也有很多尝试，但目前更关注的还是基本能力上的建设，比如云函数，当必要的武器都凑齐后会主攻这个方向。

与以往的研发方式的不同点在于，如果真的实现了云+端一体化，我们可以在任何地方进行开发。现在因为开发环境的限制，我们只能在公司或一些特定的场合进行开发，而我们希望整个开发与协作过程可以在任何地方发生，现阶段协作可以在云上做，但开发必须在本地做，我认为这个限制是不同点。

InfoQ：云+端的模式已经有很多人讨论，美团点评的云+端有哪些独特之处？

田泱：其实我们对端的定义不是业界讨论的客户端和云服务的一些协作，我们的端定义在 IDE 上，目前还停留在本地 IDE 配合可视化的 CLI 进行开发。近期我们都在配合这个方向做服务的标准化，在这个过程中涉及到大量的轮子如何复用的问题。现实是，轮子与轮子之间的差异特别大，导致研发工程师在不同的系统之间跳来跳去，体验不一致，因此开发者的使用意愿很低。我们希望固化一个认知统一的方式，围绕这个方式去对齐我们的云服务，让大家在流程和体验上都保持一致。

InfoQ：目前，美团点评的哪些业务应用了云+端的模式，效果怎样？

田泱：目前金融业务线的大部分前端研发都是基于这个模式管理的，除此之外，美团基础研发平台的部分云产品、餐饮生态的一些业务团队也是如此。对于公司内和我们场景比较相似的团队，他们会沿用我们的整体解决方案；对于有解决方案的团队，我们会向他们提供一些单向的能力，比如云函数的支持、PWA 的工具等等。从整体来看，北京的大部分业务团队都有在推进进行实践，上海团队预计明年上半年开始。

InfoQ：在实践过程中，遇到的技术难点是什么？

田泱：在和集团能力对齐的时候，我们要抹平服务提供方和使用方的差异，适配这个体系需要大量服务端开发工作，但是成本居高不下。这也是我们需要云函数的原因。

InfoQ：由于金融服务的前端存在多变性、隐蔽性的风险，在开发过程中，要注意哪些问题？

田泱：金融是一个强监管的领域，在风险规避上有特殊要求，所以在技术动作的响应上需要足够多的工具来支撑。比如央行下发一个文件，如果有一些流程不符合要求，就要把它下掉，那就需要配套大量的工具去保证流程下掉又不影响其他环节。所以金融服务平台会有大量的工具建设的要求，甚至是领先于整个美团点评基础技术设施的。对于前端来说，端上能力的监控降级、CDN 的管理、资源防劫持等也都是需要注意的方面。

InfoQ：在实践过程中，美团金服是否有向其他团队借鉴经验？

田泱：我们参考了蚂蚁金服比较多，因为蚂蚁金服的一些技术方案在提升效率方面有很多先进理念，比如 Antdesign、egg 等设计理念。我们也在观察他们在 Serverless、SSR 上的一些投入，会和他们沟通，因为他们的整个体系比我们更成熟一些，在引入 Serverless 的环节比我们效率更高，蚂蚁金服已经是商业的云函数了，我们还处在自己探索的阶段。

InfoQ：云+端技术适合哪一类企业应用？

田泱：我觉得云函数的开发模式比较适合中小型创业团队去尝试，因为他们的人力并不是特别充分，可能招聘一个前端，会适当地往全栈方向培养。第一，能充分利用工程师的精力。第二，从我们的实践来看，中小型企业的大部分流量，前端工程师是有能力承载的。如果公司现在不具备提供云函数的能力，又没有足够的经费去使用商用 FaaS，比如阿里云、腾讯云的函数计算，前端工程师是有能力去承担这部分工作的。有了云函数的能力，前端工程师可以做的工作，远远不止前端工程化这件事。对一些中小型企业来说，不管是人力成本，还是运维成本，都会有很大的缩减。

InfoQ：经过多年的发展，前端工程化似乎以 Webpack 大获全胜告一段落，它的优势是什么？未来，前端工程化还会有怎样的突破？

田泱：Webpack 确实是最近几年大家非常推崇的一个构建工具。它的核心理念是 everything is plugin，所有的工作都可以用插件完成，这也是我们在工程化设计时的重要参考。plugin 意味着开放，意味着有更多的想象空间。未来工程化还是要按这个方式，抽取不变的东西，在这个方向上坚持，不断地完善插件。

InfoQ：有人认为 Serverless 还处在概念化阶段，很难落地，您认为原因是什么？

田泱：因为它需要更精细粒度地去做服务上的一些编排。当前来说，可能一些服务基础、容器能力都不足以让它做这样精细化的操作，这需要整个公司研发最底层能力的升级。所有上层应用的需求都是建立在底层应用的升级之上的，可能需要三到五年的规划才能完成。所以落地难，因为它是一个从底向上的升级。但是对于需求方来说，前端工程师是最迫切需要这种能力的。这也是我们鼓励前端工程师跨边界尝试的一个重要原因，你既然认可一个方向比较好，就大胆地去尝试。用自己的行动力去磨平能力升级期间的沉默成本，解决当前的问题同时兼顾整个公司服务能力升级的规划。

InfoQ：您所在的前端团队接下来的工作重点是什么？还会关注哪些前沿技术？

田泱：我们工作的关注点还是在 CloudIDE 上，但目前可能会先做一些代码物料的拼装，第一是我们要有足够的物料，组建这样的东西；第二是它们的标准和规范是要对齐的，现在美团内部也在做相应的对齐工作。当这些工作都具备了之后，我们希望具备一种拼装能力，把它输出成完整的页面，我们认为这个方向是前端工程化离 AI 最近的一个方向。如果拼装能力实现，我们完全可以通过 AI 去分析设计稿，然后对应输出相应的物料，通过物料再重新拼装成另外一个设计稿，或直接输出页面。我觉得，怎样增强对代码能力的控制，以及怎样更好地抽象组织代码，是我们后续的主要工作。

InfoQ：您还有什么想和 InfoQ 的前端读者分享吗？

田泱：其实，我们团队的一些理念和当前的技术观点是有些冲突的，我们的观点是在变化中找不变，但实际上热点都是变化的东西，这是有冲突的。结合我前面说到的一个问题，前端工程化，一个方向是跨端，另一个方向是跨工种，大家可以选择适合自己职业发展规划的路径。如果大家希望后续成为技术团队的负责人甚至 CTO，可能需要更多跨工种的专业领域能力的支持，就可以做一些纵向的输入，这是我想分享给大家的。前端的变化真的太快了，大家还是要抓住不变的东西。我们团队有一句话是，把时间拉长，我们能剩下的东西就不多了。我希望大家能找到把时间拉长后剩下的那个东西，然后抓住这些东西，再做深入的学习。

专家介绍：

田泱，美团点评前端技术专家，2015 年加入美团。从 0 到 1 参与了美团线下收单千万级订单的前端建设工作。现负责美团金融服务平台前端基础服务研发团队，致力于前端工程化建设，探索 Serverless 在业务中落地的场景。

更多国内外一线技术大咖分享请持续关注 QCon 全球软件开发大会，访问官网与技术大咖面对面交流实践心得。