Serverless 如何帮助前端实现全栈?

从 Web 1.0 开始,我们对前端领域的探索从未停止。Nodejs 的出现更是彻底而深刻的改变了JavaScript 及前端开发工具的应用场景,那么身处大前端时代的我们,该如何真正由前端转向全栈呢?

2019年10月20日,JSConf大会上,腾讯云中间件总经理 Yunong Xiao 发表了关于《Serverless Is Your BFF》主题演讲,从前端发展演进、前端到全栈的路径和问题以及如何利用Severless 实现前端到全栈的发展等维度展开分享,并现场配合Live Code演示,深度剖析前端工程师向全栈演进面临的困境和解决思路。

 前端发展的变革

在 Web1.0 时代我们只有Web工程师,需要我们做界面,并关注于 Web 服务器,后端逻辑,数据库。

Web2.0 导致了前后端分工的细化,前端后端各自关注不同的东西。

分离后,前端迅猛发展,在组件化和脚手架工具链方面发展的很好,现在的前端效果很好,效率也很高,基本是现代化和工业化的开发方式。

但是分离也导致了很多问题,其中最主要的问题就是:

前端后端的沟通和配合效率很低。例如一个接口要前后端不同的角色反复确认。联调的效率及其低效。

为了提升业务研发效率,前端工程师希望能够回到之前Web全栈工程师的角色。

全栈工程师的一个定义:

前端+后端+数据库的统一集合开发

一些前端工程师认为:除了前端技能,再掌握一门后端语言(例如:php/python/nodejs),再会一种数据库,就是全栈工程师了。

这种认识是非常局限的,因为掌握了上面的这些,虽然可以完成全部界面和业务逻辑的研发,对于产品来说,除了这些还有很多看不见的东西。

除了技术栈,前端在实现一个产品时还需要什么?

首先,我们可以通过一个idea到产品的记录路径,来引出Time to Market 的三个步骤:

1、界面和功能研发

在前端有足够好的框架和工具,可以快速实现UI和功能。使用Nodejs后端无编码障碍,同一种语言提升复用。省去沟通成本,整体开发效率更高。

结论:前端独揽界面和功能研发没有问题,效率更高

2、产品化 —— 那些看不见却很重要的问题

产品化的思维不是一个个单点的技术,而是一个套系统性思考和解决方案,依赖合理高效的应用架构设计来支撑。包括可靠性、速度性能、安全性、架构可扩展性等一些系统层面考虑。

我们可以来看一张很普通的系统架构图,术业有专攻,小编相信不少前端开发者看到这步的时候已经心生退意:

结论:以前端工程师目前的能力,很难纵览全局

3、运维 —— 上线只是开始,对于产品来说,保证稳定运行工作很多在上线之后

业务增长带来的扩容。问题是永远不知道什么时候会增长,有的网红APP一两周就火爆了,如果扩容搞不定会错失大机会

流量的分布并不是均匀的,可能一天大部分的时候流量都很低,但是在访问高峰期(例如晚上的小说访问量,大部分人喜欢在睡前看小说)会带来突然的陡峰。还有一些是精心设计的流量高峰,比如秒杀抢购运营活动。

如何解决这些场景下的快速扩容问题呢?

  1. 预购资源 —— 成本太高,大量的投入被浪费,并不是明智的做法;
  2. auto scaling 技术 —— 相信很多朋友会提到这个,但是这个需要很多云计算的知识背景,对于前端来说并不具备这种技术储备。

认真负责的说,上云真不是一件简单的事情,现在各种企业上云,但真把现有的软件和应用搬到云上,无论是公有云还是私有云,都不是一件简单的事情。

可能你需要上云的代码只有100行,但是上云却需要你看完CVM/容器/K8S各种基础书籍。

结论:以前端工程师目前的能力,很难进行系统的运维工作 —— 当然我们也不会想做。

Serverless 在前端领域的变革

总结而言,前端转全栈不仅需要解决界面和功能的研发,还有产品化之下的安全可靠、架构扩展,以及上线后繁琐的运维等问题。那么Serverless是如何解决这些问题呢?我们在谈Serverless之前,首先来看看Serverless到底是什么,它是如何帮助我们从前端入手更好的跨度到全栈。

1、Serverless 是什么?

这个问题,我们从上图中就可以得到答案,从IaaS,PaaS到如今的 FaaS,我们负责的组件越来越少,人力成本也相对越来越低。而我们的 Serverless 更像是 FaaS 和 BaaS 的集合。我们无需关注上面提到的可靠性,安全性,容灾,扩容等系统层级的问题,只需要关注我们的代码实现。

2、Serverless的核心优势

总得来说,Serverless有三大特点:提高效率,降低成本,稳定性提升

Serverless 不需要运维,节省人力成本。提升效率,减少了开发的时间,就是降低成本。工程师可以有时间去做更有意义的事情。弹性付费,按需付费,按执行时间付费,只为真正的计算买单。

并且可以使后端架构简化,大大减少出错的概率,腾讯云将负责解决大部分运维问题,更加便捷高效。

Serverless 更像是前端领域的引擎,它可以帮助我们前端工程师快速,便捷,可靠的开发应用,并将大幅度降低人力成本。

案例实战

最后,百闻不如一试,大会现场,腾讯云技术专家王俊杰现场通过Code演示,展示了如何在5min内基于 Serverless 制作之前大热的一款微信换头像应用。感兴趣的同学可以亲自动手尝试Serverless 的魅力。

在这个 Demo 中,我们基于腾讯云Serverless ,结合腾讯云的AI能力,实现了一个自动为上传的头像戴上圣诞帽的应用。这个应用的实现只需要六个步骤:

1、将腾讯云的云 api 秘钥,填充至 server/wearChristmasHat/config.js  中

(源码下载请扫描下方的 Github 二维码链接);

2、进到 wearChristmasHat 这个文件夹,npm run deploy:install 安装依赖;

3、使用vscode插件,或者scf cli,部署 wearChristmasHat 到 scf,同时去腾讯云apigw控制台开启该函数的api网关触发器的 支持cors 的开关;

4、修改 web/index.js 的ajax请求的url 为你的 api 网关触发器的访问路径;

5、web 部分的静态资源,html、css和js等,可以根据你的习惯,部署到 cos或者在本地打开;

6、访问html页面后,就可以选择一张人像图片,点击Generating a Christmas hat的按钮,戴上圣诞帽了。

目前,该应用的Demo已经上传至Github上,感兴趣的读者也可以扫描下方二维码下载Demo源码亲身动手体验!

长按扫描上方二维码,即刻下载DEMO源码

本站文章资源均来源自网络,除非特别声明,否则均不代表站方观点,并仅供查阅,不作为任何参考依据!
如有侵权请及时跟我们联系,本站将及时删除!
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
Serverless 如何帮助前端实现全栈?
从 Web 1.0 开始,我们对前端领域的探索从未停止。Nodejs 的出现更是彻底而深刻的改变了JavaScript 及前端开发工具的应用场景,那么身处大前端...
<<上一篇
下一篇>>