Feflow在云工程化的探索和实践

腾讯科技(深圳)有限公司

今天分享的是Feflow在云工程化的探索和实践,接下来将从以下四个方面展开。

图片

什么是前端工程化

首先我们看下为什么需要做前端工程化,第一个场景是团队有大量新项目开发,尤其是很多同类项目,比如运营活动。此时一定存在大量可复用的模块,如果没有工程化,每次都会有很多重复工作,整体的研发效率是极低的。随着团队的发展扩大,团队里的成员技术水平参差不齐,在开发中就会产生一些差异;此外就是项目交接的时候往往依赖于完善的文档,但这个是不可控的,曾经遇到一个项目,弄了半天才启动起来,这个开发体验就很差。因此,我们需要工程化来帮我们解决这些问题。

图片

对于工程化的定义,我们可以理解为提高效率、降低成本的事情,在开发中我们可以从质量、效率、性能三方面来着手。

图片

那么在IVWEB团队如何做工程化呢?首先在质量方面我们通过定义开发规范、实用工具进行代码检查以及发布检查;并且通过对项目做通用基础优化以及SSR、PWA默认支持等方式来提高性能;效率方面通过制定脚手架、封装业务组件以及常用工具的支持来提升研发效率。

图片

以上的这些都通过Feflow来支撑,Feflow贯穿整个研发流程,提供创建项目、开发项目能力,并且支持自定义插件来集成各种能力,同时打通各个基础平台更好的支持研发。

图片

云带来的契机

最近几年云的发展突飞猛进,说到云我们会想到k8s、docker、serverless等等。随着云的发展,我们的日常开发也逐步受到云的影响。

比如在本地开发时,以前我们需要为各种项目准备不同的开发环境,而且还会有包之间互相影响,现在我们就可以通过使用docker来准备各种环境;之前项目部署时基本都是需要手动操作,而且往往都依赖同一台发布机,环境杂乱,现在我们同样通过docker就可以做到环境隔离,同时配合git hooks可以自动触发部署;我们在以往应对突发流量时,都是申请机器扩容,而流量恢复正常我们又需要退还(成本问题),有了k8s和docker可以实现自动扩缩容,大大减少了人工运维成本。

图片

同时还有小程序云开发,帮助我们快速启动一个服务,并提供了免费的存储;还有云函数的出现,一个简单的服务就可以快速上线,同时还提供自动扩所容,十分便利。此外,近几年WebIDE也逐步火热起来,被称为下一代开发方式,目前主流的比如腾讯CODING、华为云IDE、Monaco等,那么工程化在云时代可以做什么呢?

图片

Feflow上云

首先我们来回忆以下年初疫情刚出现时的场景,大家被封锁在家里,最大的问题就是如何正常参加工作。如果有带自己电脑,那自然是随时开工,当然也有一些企业“福利”比较好,有人给大家邮寄电脑,还有一些同学没有带电脑或者临时被封闭了,找电脑、准备环境一大堆准备做完,发现电脑卡的不行,很痛苦。那么现在有云、WebIDE,是否可以做一套远程开发环境呢?我们利用云服务器以及CODING的CS集群搭建服务,开发同学只需要通过身份校验就可以在浏览器中进行开发,几乎不用做环境配置,也不受电脑性能影响。

图片

在这种开发方式如何使用工程化呢?首先WebIDE也是支持命令行操作的,因此我们会在创建开发空间时默认集成Feflow,并且将基本配置初始化,用户可以像在本地命令行一样使用Feflow提供的工程化能力。

图片

同时提供可视化的方式,输入输出更加便捷,并且在调用工具更加方便,大大提升了使用体验。

图片

在这其中我们也遇到了一系列问题,首先就是脚手架在做可视化时,需要把命令行的输入输出转成表单形式,并且还有数据校验等。当前业界较为通用的数据转为表单就是JSON Schema,它提供丰富的表单展示以及数据校验能力,通用性强,学习成本低。

图片

随着使用者越来越多,终端、后台的一些同学也有诉求统一工具链,但是语言的多样性成为了最大的障碍,因此如何支持不同语言的工具成为当务之急,并且还要做到通用可扩展。

图片

首先是关于命令的调用,几乎任何工具都可以通过命令行去调用,因此通过配置该工具在不同操作系统中的调用语句,Feflow就可以通过命令行调用方式调用该工具。

图片

然后就是关于工具的语言依赖,每种语言的工具都需要语言环境的支持,因此仿照npm包的依赖模式,在安装工具的时候将其依赖的语言也通过Feflow插件的方式来安装,同时还可以安装其他依赖工具。同样借鉴npm包管理的方式,工具版本同步git tag。

图片

最终形成了一套全新的开发模式,从git打开项目到WebIDE,Feflow提供研发流程的工程化能力,再通过docker等云端工具发布到线网。开发者无需准备开发环境、也无需担心平台差异性和语言差异。

图片

小结

简单总结以下三点

1. 工程化不仅仅是工具化

工程化可以囊括整个研发流程,包括工具建设、规范制定、流程标准等。

2. 前端工程化不止于前端

工程化做的好,同样可以应用到其他端。

3. 工程化也可以与时俱进

面对云的到来,工程化可以通过种种方式上云,而未来有更多的新事物出现,工程化同样可以有效结合。

图片

最后是对未来开发的一个期冀,我们只要拥有电子设备,比如手机、平板、电脑,就可以随时随地开始coding,不用再为那些“身外之物”烦恼。

图片


IVWEB!!招!!人!!

本文作者所在团队腾讯看点IVWEB正在招聘前端工程师

IVWEB团队是腾讯专业的前端团队, 以“卓越Web, 全栈研发"为旨, 负责腾讯移动直播产品NOW直播, 腾讯直播, QQ课堂, 语音交友, 手Q附近等腾讯直播平台的研发工作.

团队组织举办了四届TLC大会. 团队成员多次参与包括Qcon, ArchSummit, JsConf, GMTC, 开源中国等行业技术分享大会. 此外, 团队也培养了多名StuQ讲师.

我们在做什么

Feflow

Feflow是一个用于提升开发效率的前端工作流和规范工具,最新版本是v0.22.3,目前在 alpha 阶段,托管在Github上:Tencent/feflow。目前已经在腾讯内部已有超过100个团队接入使用, 内部用户量达到1500+, 为前端的开发效率添砖加瓦.

Aegis

Aegis是一站式前端监控解决方案,涵盖了日志上报,错误监控,性能监控,资源测速等功能。 Aegis以每日千亿数据流承载量, 最高每分钟千万数据的吞吐量, 致力于全方面守护您的项目健康,保障您的项目性能。

TLC大会

至今已举办了四届的腾讯直播大会, 是由腾讯看点团队精心打造,由IVWEB团队主办的面向全球大前端领域的技术大会,致力于提升和促进全行业大前端、信息流、音视频、直播、图像处理等领域的交流和技术创新,旨在打造一个高品质、高标准的行业交流会议。

关于福利与团队生活

团队内的技术分享

时不时地聚餐团建

烤肉, 烧烤, 海鲜, 日料啥都有

996? 不存在的, 周末加班也必然是有调休的

关于你

我们希望你:

  • 本科以上学历, 2年以上工作经验;
  • 能够熟练运用 HTML、CSS、JavaScript 构建高性能的web应用;
  • 理解web标准和兼容性, 对可用性相关知识有实际的了解和实践经验;
  • 能够熟练运用至少一款主流的JS框架, 具有良好的代码风格、接口设计与程序架构能力;
  • 掌握一门服务器端编程语言, 对OOP有一定的认识;
  • 思路清晰, 积极主动, 具备良好的沟通能力和团队协作精神.

如果有小伙伴有意向加入我们, 欢迎准备好简历并投递到邮箱:

ivweb-team@tencent.com

标题请注明 应聘字样与姓名, 万分感谢你的配合~~~(简历记得用PDF格式~~)

文章分类
前端
文章标签