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

2019 年 11 月 07 日

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

有人说,移动互联网的下半场,效率就是生命。而对于金融服务领域更是如此,具体而言,该领域的强监管属性对前端开发人员提出了更高的要求,在政策响应上要足够快,配套工具要更加健壮、完善。那么,如何才能多快好省地复用集团的基础设施或者开源方案?如何才能进一步降低团队内外的沟通成本,提升研发效率?美团金服大前端团队在前端工程化方面进行了“云+端”的尝试。通常意义上,我们了解到的“云+端”模式主要应用在物联网领域。与之不同的是,美团金服对“端”的定义不是业界熟知的客户端与云服务的协作,而是定义在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 全球软件开发大会,访问官网与技术大咖面对面交流实践心得。


2019 年 11 月 07 日 14:37 1421
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 59.0 次阅读, 收获喜欢 250 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营第五周总结

架构师 极客大学架构师训练营

架构0期Week5Work1

Nan Jiang

致那些高考结束的同学们

小天同学

读书 读书感悟 高考

week5 学习总结

任小龙

Istio 升级新方式:金丝雀升级

郭旭东

Kubernetes 云原生 istio

架构师训练营第五周学习总结

whiter

极客大学架构师训练营

Lesson 5 分布式系统架构- 分布式缓存和队列 心得笔记

edd

十代酷睿凌云!开启游戏本新篇章的机械师“战空”F117-V

飞天鱼2017

架构师训练营第5周总结:缓存,消息队列,负载均衡,分布式数据库

hifly

负载均衡 缓存 分布式数据库 极客大学架构师训练营 消息队列

作业一:一致性hash实现

ruettiger

分布式事务精华总结篇

古月木易

分布式 分布式事务

一致性Hash

行下一首歌

极客大学架构师训练营

分布式事务精华总结篇

奈学教育

分布式 分布式事务

大型网站技术架构--架构篇

wei

第五周学习总结

李白

架构师第五周作业

suke

极客大学架构师训练营

架构师训练营第五周作业

James-Pang

极客大学架构师训练营

Week 05 总结

鱼_XueTr

缓存 分布式数据库 消息队列

架构师训练营」第 5 周作业

edd

极客大学架构师训练营

架构师第五周总结

suke

极客大学架构师训练营

第五周作业总结

Thrine

缓存技术和直播平台缓存总结

周冬辉

单体架构知识点及单体架构的缺陷

古月木易

单体架构

第5周作业

andy

消息队列与异步架构

Lane

极客大学架构师训练营

RxJS学习总结

shinji

RXJS

第五周作业 - 一致性 hash 实现

netbanner

极客大学架构师训练营

【获奖名单公示】仅需发布3篇+文章,极客时间每日一课 VIP 等多重礼品,免费拿~

InfoQ写作平台

写作平台 有奖活动 征稿 活动专区

技术选型:如何构建技术选型方法论

NORTH

极客大学架构师训练营 技术选型

啃碎并发(六):Java线程同步与实现

猿灯塔

单体架构知识点及单体架构的缺陷

奈学教育

单体架构

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