![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQKNAJkwVpLm930RxFmIR7UTGh5anQFCUiam1T5Y8RRbnvaicGj8icGZzvw.jpg\")
从 Web 1.0 开始，我们对前端领域的探索从未停止。Nodejs 的出现更是彻底而深刻的改变了JavaScript 及前端开发工具的应用场景，那么身处大前端时代的我们，该如何真正由前端转向全栈呢？
\n
2019年10月20日，JSConf大会上，腾讯云中间件总经理 Yunong Xiao 发表了关于《Serverless Is Your BFF》主题演讲，从前端发展演进、前端到全栈的路径和问题以及如何利用Severless 实现前端到全栈的发展等维度展开分享，并现场配合Live Code演示，深度剖析前端工程师向全栈演进面临的困境和解决思路。
\n前端发展的变革
\n在 Web1.0 时代我们只有Web工程师，需要我们做界面，并关注于 Web 服务器，后端逻辑，数据库。
\n![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQ9fbmhNmjTicM2geibhMhGh7w4tkOQNp4SfEmsR4ia8iaq2Xqj3XLuMfvyw.jpg\")
Web2.0 导致了前后端分工的细化，前端后端各自关注不同的东西。
\n分离后，前端迅猛发展，在组件化和脚手架工具链方面发展的很好，现在的前端效果很好，效率也很高，基本是现代化和工业化的开发方式。
\n但是分离也导致了很多问题，其中最主要的问题就是：
\n前端后端的沟通和配合效率很低。例如一个接口要前后端不同的角色反复确认。联调的效率及其低效。
\n为了提升业务研发效率，前端工程师希望能够回到之前Web全栈工程师的角色。
\n全栈工程师的一个定义：
\n前端+后端+数据库的统一集合开发
\n一些前端工程师认为：除了前端技能，再掌握一门后端语言（例如：php/python/nodejs），再会一种数据库，就是全栈工程师了。
\n这种认识是非常局限的，因为掌握了上面的这些，虽然可以完成全部界面和业务逻辑的研发，对于产品来说，除了这些还有很多看不见的东西。
\n除了技术栈，前端在实现一个产品时还需要什么？
\n首先，我们可以通过一个idea到产品的记录路径，来引出Time to Market 的三个步骤：
\n1、界面和功能研发
\n在前端有足够好的框架和工具，可以快速实现UI和功能。使用Nodejs后端无编码障碍，同一种语言提升复用。省去沟通成本，整体开发效率更高。
\n结论：前端独揽界面和功能研发没有问题，效率更高
\n2、产品化 —— 那些看不见却很重要的问题
\n产品化的思维不是一个个单点的技术，而是一个套系统性思考和解决方案，依赖合理高效的应用架构设计来支撑。包括可靠性、速度性能、安全性、架构可扩展性等一些系统层面考虑。
\n我们可以来看一张很普通的系统架构图，术业有专攻，小编相信不少前端开发者看到这步的时候已经心生退意：
\n![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQptMOSdxicWgdHynwU8FYFtBBj5SXHZRLzPvnVibawiaH7ibLUxZyereHrA.jpg\")
结论：以前端工程师目前的能力，很难纵览全局
\n3、运维 —— 上线只是开始，对于产品来说，保证稳定运行工作很多在上线之后
\n业务增长带来的扩容。问题是永远不知道什么时候会增长，有的网红APP一两周就火爆了，如果扩容搞不定会错失大机会
\n流量的分布并不是均匀的，可能一天大部分的时候流量都很低，但是在访问高峰期（例如晚上的小说访问量，大部分人喜欢在睡前看小说）会带来突然的陡峰。还有一些是精心设计的流量高峰，比如秒杀抢购运营活动。
\n如何解决这些场景下的快速扩容问题呢？
\n认真负责的说，上云真不是一件简单的事情，现在各种企业上云，但真把现有的软件和应用搬到云上，无论是公有云还是私有云，都不是一件简单的事情。
\n可能你需要上云的代码只有100行，但是上云却需要你看完CVM/容器/K8S各种基础书籍。
\n结论：以前端工程师目前的能力，很难进行系统的运维工作 —— 当然我们也不会想做。
\nServerless 在前端领域的变革
\n总结而言，前端转全栈不仅需要解决界面和功能的研发，还有产品化之下的安全可靠、架构扩展，以及上线后繁琐的运维等问题。那么Serverless是如何解决这些问题呢？我们在谈Serverless之前，首先来看看Serverless到底是什么，它是如何帮助我们从前端入手更好的跨度到全栈。
\n![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQ9ftnqBCTvDMlPWvQrCtQy9xNpQKHTwZP8dojKruIQ7z7kJLEFnJ1Mg.jpg\")
1、Serverless 是什么？
\n这个问题，我们从上图中就可以得到答案，从IaaS，PaaS到如今的 FaaS，我们负责的组件越来越少，人力成本也相对越来越低。而我们的 Serverless 更像是 FaaS 和 BaaS 的集合。我们无需关注上面提到的可靠性，安全性，容灾，扩容等系统层级的问题，只需要关注我们的代码实现。
\n2、Serverless的核心优势
\n总得来说，Serverless有三大特点：提高效率，降低成本，稳定性提升。
\nServerless 不需要运维，节省人力成本。提升效率，减少了开发的时间，就是降低成本。工程师可以有时间去做更有意义的事情。弹性付费，按需付费，按执行时间付费，只为真正的计算买单。
\n并且可以使后端架构简化，大大减少出错的概率，腾讯云将负责解决大部分运维问题，更加便捷高效。
\nServerless 更像是前端领域的引擎，它可以帮助我们前端工程师快速，便捷，可靠的开发应用，并将大幅度降低人力成本。
\n案例实战
\n最后，百闻不如一试，大会现场，腾讯云技术专家王俊杰现场通过Code演示，展示了如何在5min内基于 Serverless 制作之前大热的一款微信换头像应用。感兴趣的同学可以亲自动手尝试Serverless 的魅力。
\n![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQyZ7bh4w34LaAJ7WAWn6kiahlDs0OjBlezz9A1BytpmB3azqtF8yPBIg.jpg\")
在这个 Demo 中，我们基于腾讯云Serverless ，结合腾讯云的AI能力，实现了一个自动为上传的头像戴上圣诞帽的应用。这个应用的实现只需要六个步骤：
\n![\"Serverless\"](\"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s63icwfPNdpmT5N3Mas5icFEDQbw36zxgibxLvibiayW4776DRibmRtuqHmPDaskwgQ7C68dr26Jwd0k420Q.jpg\")
1、将腾讯云的云 api 秘钥，填充至 server/wearChristmasHat/config.js 中
\n（源码下载请扫描下方的 Github 二维码链接）；
\n2、进到 wearChristmasHat 这个文件夹，npm run deploy:install 安装依赖；
\n3、使用vscode插件，或者scf cli，部署 wearChristmasHat 到 scf，同时去腾讯云apigw控制台开启该函数的api网关触发器的 支持cors 的开关；
\n4、修改 web/index.js 的ajax请求的url 为你的 api 网关触发器的访问路径；
\n5、web 部分的静态资源，html、css和js等，可以根据你的习惯，部署到 cos或者在本地打开；
\n6、访问html页面后，就可以选择一张人像图片，点击Generating a Christmas hat的按钮，戴上圣诞帽了。
","tableOfContents":""},"previousBlog":{"id":"4f16f8bc-1a35-5394-9029-f7abc2ad6137","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s629ucl0iaVcic8rL06uEBM5go4LSXiaHnibDJSBjLGAhGlWz3QZ1RZzd3NeCibjJxOyUApDO7TaPYcwxsw.jpg","authors":["Serverless 中文网"],"categories":["news"],"date":"2019-10-26T00:00:00.000Z","title":"Hello Serverless 实战沙龙回顾","description":"2019 年 10 月 26 日，Hello Serverless 沙龙活动在广州市海珠区腾讯众创空间成功举办，一起看看我们都为大家准备了哪些精彩的演讲吧！","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["Meetup"],"keywords":"Serverless, Serverless技术沙龙,Hello Serverless","outdated":null},"wordCount":{"words":64,"sentences":13,"paragraphs":13},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-10-26-hello-serverless-meetup.md","fields":{"slug":"/blog/2019-10-26-hello-serverless-meetup/","keywords":["go","serverless","云函数","云原生","Serverless","存储","腾讯","serverlesscloud"]}},"nextBlog":{"id":"1cd76f95-14a9-5fd5-926b-456af189b7ed","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020326/1585217744291-%E6%91%84%E5%9B%BE%E7%BD%91_400730082_wx.jpg","authors":["朱峰 Ben"],"categories":["news"],"date":"2019-10-14T00:00:00.000Z","title":"由浅入深说 Serverless 之云函数的生命周期","description":"希望通过文章分享帮助大家更深入的了解 Serverless 背后的机制并掌握相关的最佳实践。","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["云函数"],"keywords":"Serverless, Serverless前端开发, Serverless云函数","outdated":null},"wordCount":{"words":74,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-10-14-serverless-cloud-function.md","fields":{"slug":"/blog/2019-10-14-serverless-cloud-function/","keywords":["faas","java","云函数","函数","触发","实例","事件","数据库","启动","连接","sql","代码"]}},"recommendBlogs":{"edges":[{"node":{"id":"73576d26-e0ce-5f26-9330-64b4f3889157","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/3cb7b20955d78ced738e0279bb3f6f41.jpg","authors":["AndreaPasswater"],"categories":["news","engineering-culture"],"date":"2018-03-09T00:00:00.000Z","title":"Serverless 数据解读：2018 报告","description":"Serverless Framework 使用统计数据：事件源、服务结构、运行时长等等。","authorslink":["https://serverless.com/author/andreapasswater/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["事件源","服务结构"],"keywords":"Serverless 统计数据,Serverless 事件源,Serverless 服务结构","outdated":null},"wordCount":{"words":212,"sentences":45,"paragraphs":45},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-03-09-serverless-by-the-numbers-2018-data-report.md","fields":{"slug":"/blog/2018-03-09-serverless-by-the-numbers-2018-data-report/","keywords":["go","serverless","无服务器","云函数","服务","使用率","Go","部署"]}}},{"node":{"id":"84876745-cbfb-5c1d-9f6c-7c74338d5d28","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.site.serverless.com/images/champions/champions_banner.jpg","authors":["RupakGanguly"],"categories":["news","engineering-culture"],"date":"2018-04-10T00:00:00.000Z","title":"2018 年首批无服务器社区冠军介绍","description":"无服务器社区冠军是无服务器社区的领导者。快来认识一下我们 2018 年度的社区英雄吧！","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":194,"sentences":32,"paragraphs":32},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-04-10-announcing-new-2018-serverless-champions.md","fields":{"slug":"/blog/2018-04-10-announcing-new-2018-serverless-champions/","keywords":["serverless","webpack","无服务器","无服务器架构","服务器","serverless","champions","架构","blog","github","框架"]}}},{"node":{"id":"1e1a90fc-3b65-540c-b726-755999e7912a","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/8a0db1c9fd8b51c15d0b006291d52bf5.jpg","authors":["AndreaPasswater"],"categories":["news","engineering-culture"],"date":"2018-07-19T00:00:00.000Z","title":"2018 年社区调查：Serverless 使用率大幅增长","description":"我们曾在开发社区进行问卷调查，询问 Serverless 的使用情况。它的使用率增长连我们自己都惊讶不已，下面来看看数据。","authorslink":["https://serverless.com/author/andreapasswater/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["Component","Serverless"],"keywords":"Serverless 社区调查,Serverless 使用情况,Serverless 数据","outdated":null},"wordCount":{"words":267,"sentences":50,"paragraphs":49},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-07-19-2018-serverless-community-survey-huge-growth-usage.md","fields":{"slug":"/blog/2018-07-19-2018-serverless-community-survey-huge-growth-usage/","keywords":["go","serverless","无服务器","Serverless","serverless"]}}},{"node":{"id":"8311b008-2b15-5225-8adc-9b75e484177b","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586880819419-%E5%B0%81%E9%9D%A2%E5%9B%BE%20%286%29.png","authors":["serverless 社区"],"categories":["news"],"date":"2019-04-08T00:00:00.000Z","title":"邀您参加 | K8S&云原生技术开放日-北京站","description":"K8S&云原生技术开放日，将围绕K8S、Serverless等云原生相关技术，从最佳落地实践、不同场景技术改造、应用优化，到开源领域深度技术研究，和技术爱好者们一起探讨。","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["云原生","Serverless"],"keywords":"serverless 入门,serverless 框架,腾讯云 serverless","outdated":null},"wordCount":{"words":36,"sentences":9,"paragraphs":9},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-08-k8s.md","fields":{"slug":"/blog/2019-04-08-k8s/","keywords":["serverless","云原生","serverless","Serverless","技术","原生","serverlesscloud","github"]}}},{"node":{"id":"25f709db-cde0-59d7-81f4-944c46a6dd8a","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586880571672-%E5%B0%81%E9%9D%A2%E5%9B%BE%20%285%29.png","authors":["serverless 社区"],"categories":["news"],"date":"2019-04-04T00:00:00.000Z","title":"Serverless 技术风暴来袭，开发者该如何应对？","description":"Hello Serverless技术沙龙北京站，将围绕Serverless的应用场景，客户案例，FaaS+BaaS架构的实现方案等，针对未来的无服务形态进行交流和讨论，释放技术想象！","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["应用场景","Serverless"],"keywords":"serverless 入门,serverless 框架,腾讯云 serverless","outdated":null},"wordCount":{"words":37,"sentences":8,"paragraphs":8},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-04-technology-storm.md","fields":{"slug":"/blog/2019-04-04-technology-storm/","keywords":["serverless","Serverless","serverless","serverlesscloud","github","技术","架构","围绕"]}}},{"node":{"id":"4bc4d946-6187-5c3d-91c6-d98c4c4c1314","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586880172144-%E5%B0%81%E9%9D%A2%E5%9B%BE%20%284%29.png","authors":["serverless 社区"],"categories":["news"],"date":"2019-06-11T00:00:00.000Z","title":"一图读懂无服务器云函数","description":"本图将重要信息进行梳理和提炼，帮助读者更好的理解无服务器云函数的理念和作用","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["云函数","Serverless"],"keywords":"serverless 入门,serverless 框架,腾讯云 serverless","outdated":null},"wordCount":{"words":31,"sentences":6,"paragraphs":6},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-06-11-one-picture-serverless-cloud-function.md","fields":{"slug":"/blog/2019-06-11-one-picture-serverless-cloud-function/","keywords":["serverless","无服务器","无服务器云函数","云函数","serverless","serverlesscloud","Serverless","github","开发者","函数"]}}},{"node":{"id":"1cd76f95-14a9-5fd5-926b-456af189b7ed","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020326/1585217744291-%E6%91%84%E5%9B%BE%E7%BD%91_400730082_wx.jpg","authors":["朱峰 Ben"],"categories":["news"],"date":"2019-10-14T00:00:00.000Z","title":"由浅入深说 Serverless 之云函数的生命周期","description":"希望通过文章分享帮助大家更深入的了解 Serverless 背后的机制并掌握相关的最佳实践。","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["云函数"],"keywords":"Serverless, Serverless前端开发, Serverless云函数","outdated":null},"wordCount":{"words":74,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-10-14-serverless-cloud-function.md","fields":{"slug":"/blog/2019-10-14-serverless-cloud-function/","keywords":["faas","java","云函数","函数","触发","实例","事件","数据库","启动","连接","sql","代码"]}}},{"node":{"id":"4f16f8bc-1a35-5394-9029-f7abc2ad6137","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/qianyi/images/YHl6UWa9s629ucl0iaVcic8rL06uEBM5go4LSXiaHnibDJSBjLGAhGlWz3QZ1RZzd3NeCibjJxOyUApDO7TaPYcwxsw.jpg","authors":["Serverless 中文网"],"categories":["news"],"date":"2019-10-26T00:00:00.000Z","title":"Hello Serverless 实战沙龙回顾","description":"2019 年 10 月 26 日，Hello Serverless 沙龙活动在广州市海珠区腾讯众创空间成功举办，一起看看我们都为大家准备了哪些精彩的演讲吧！","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["Meetup"],"keywords":"Serverless, Serverless技术沙龙,Hello Serverless","outdated":null},"wordCount":{"words":64,"sentences":13,"paragraphs":13},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-10-26-hello-serverless-meetup.md","fields":{"slug":"/blog/2019-10-26-hello-serverless-meetup/","keywords":["go","serverless","云函数","云原生","Serverless","存储","腾讯","serverlesscloud"]}}}],"totalCount":46}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"ce451f68-6ccb-5849-ba41-17faf410c11e","previousBlogId":"4f16f8bc-1a35-5394-9029-f7abc2ad6137","nextBlogId":"1cd76f95-14a9-5fd5-926b-456af189b7ed","categories":["news"]}}}