写点什么

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

  • 2019 年 11 月 07 日
  • 本文字数:3675 字

    阅读完需:约 12 分钟

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

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

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

关注

评论

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

LeetCode刷题35-简单-搜索插入位置

ベ布小禅

9月日更

微信朋友圈高性能复杂度分析

缘分呐

微信朋友圈 高性能架构

微信业务架构分析

黑鹰

微信业务架构

银行对公业务数字化迎来新机遇

CECBC

Vue进阶(九十一):自定义指令

No Silver Bullet

Vue 9月日更

模块二作业

potti

架构实战营

java疫情上报打卡小程序源码(毕设)

清风

毕业设计

ipfs挖矿市场即将爆发 ipfs挖矿原理是什么?ipfs挖矿值得投资吗?

IPFS挖矿值得投资吗 ipfs挖矿原理是什么

关于提升视野的一些想法

姬翔

9月日更

GitHub上霸榜多时的“大哥”!竟是Alibaba内部被疯狂转载的Spring全能指南?

Java 编程 架构 面试 springboot

Promise.allSettled() 原理解析及使用指南

devpoint

异步 Promise 9月日更

Linux之ssh-agent命令

入门小站

Linux

技术债的前世今生

码猿外

架构设计 技术债 敏捷精益 软件架构治理

为什么我们不容易坚持一件事?

法医

9月日更

【VueRouter 源码学习】第二篇 - 路由的配置和使用

Brave

源码 vue-router 9月日更

【Flutter 专题】57 图解页面小跳转 (三)

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 9月日更

为什么要招聘有经验的人?

石云升

职场经验 9月日更

微信朋友圈的高性能复杂度分析

晓波

架构实战营

架构实战营 - 模块二作业

en

「架构实战营」

Java + opencv 实现年龄识别

张音乐

Java OpenCV 9月日更 年龄识别

模块七作业

king

Java中的运算符

IT蜗壳-Tango

9月日更

10. 大数据--人工智能的基石

数据与智能

人工智能

在线JSON转Csharp工具

入门小站

工具

学生管理系统 - 毕设架构设计

黑鹰

微信朋友圈高性能架构分析-模块二作业

娜酱

#架构实战营

CPU 功能

Changing Lin

9月日更

网络安全学习:内网渗透案例,打破渗透瓶颈

网络安全学海

黑客 网络安全 信息安全 安全漏洞 内网渗透

css中background简写顺序,css权重应该怎么计算

前端史塔克

CSS 大前端

架构实战营 微信朋友圈高性能复杂度分析

💤 ZZzz💤

架构实战营

Python代码阅读(第24篇):根据筛选函数将列表元素分成两组

Felix

Python 编程 Code Programing 阅读代码

“云+端”一体化 让前端开发流程“纵享丝滑”_QCon_王文婧_InfoQ精选文章