Skip to content

结束语以端为始,向云而生:云原生加速前端向全栈演进

一晃两个多月的时间就过去了,相信通过这门课程的学习,你已经掌握了微信小程序一些必要的技术原理和常见的实践方案,并且能够感受到云开发对小程序研发效率的提升。

基于这个前提,最后的结束语我不再讲解一些技术知识,而是想跟你站在一样的角度(作为一名前端开发者),一起聊一聊前端研发在云原生和 Serverless 技术背景下的演进方向:全栈。

其实,我最初加入云开发团队的直接原因就是:我认为云开发是能够令前端开发者成为全栈开发的一项革命性技术模式。而之所以有这个想法跟我的从业经历有关。

我刚接触前端还是在上大学的时候,那时,我在 SAP 上海研究院实习,主要开发基于 SVG 的Charts 库,99%的代码逻辑是将数据用 SVG 转化为可视化的图形。毕业后,我做了一名传统的 Web 前端开发者,中间还折腾过富本文编辑器。再后来,我有近一年的时间在研究效率工程,也就是所谓的前端工程化,除此之外,在加入腾讯云开发团队之前的工作是地图,技术核心是WebGL。

可以说除了音视频以外,我以往的经历基本涵盖了前端领域绝大部分的技术方向。

不论是大众的 Web 页面还是小众的 SVG,不论是宏观到 Web 整体的工程化,还是微观到像素的图形编程。表面看上去,似乎每一份新工作跟之前的工作都关联甚微,比如在使用 WebGL 期间积累的矩阵、向量、三角剖分等数学和图形学知识,基本在现阶段的工作中得不到体现。

不知道你是否和我一样,曾经对职业前景有过迷惘,比如前端的边界是什么、发展方向在哪儿、前端工程师的核心价值如何体现......而我从毕业到加入腾讯之前一直尝试着在不同的工作内容中寻找答案。

我想现在我找到了:以全栈为进化方向的前端,以及辅助其落地的云开发。

当然,如果要探讨一项技术或者一种理念是否具有革命性,必然需要一些参照物,而历史是最佳的参考。所以在讨论云开发对前端的革新之前,我们有必要回忆一下前端的演进史,用一句话可以概括这个演进过程:不断扩宽前端开发者的能力边界。

逐渐扩宽边界的前端演进史

我们对照这张图来回顾前端的演进史:

前端演进史

如果以世界上第一个 Web 浏览器 WorldWideWeb 的诞生作为起点,那么 90 年代初便是前端的 0.0 时代。那时候没有前端工程师的称谓,前端的工作也很简单,主要是静态 UI 和表单验证,要么后端工程师兼顾为之,要么由独立的 UI Developer 全权负责。

其实时至今日,很多外企仍然沿袭着 UI Developer 岗位,与目前国内大众认知的前端工程师不同的是,UI Developer 的能力栈除了 HTML/JS/CSS 以外,还要具备一定的 UI 和交互设计能力。

前端 1.0:AJAX

起源于 Microsoft Outlook 的 AJAX 是引起前端第一次革命的关键技术,这是一个重要的转折点,以此为契机网站具备了动态性,前端工程师的能力模型逐渐从 UI 偏向逻辑和数据。

前端 2.0:Node.js

后来,广为人知的 Node.js 成就了 前端 2.0。Node.js 打破了前后端编程语言的壁垒,令前端开发者能够以相对较小的成本跨界服务端,但是编程语言仅仅是服务端开发最表层也是最易突破的,背后更困难的部分单纯靠 Node.js 是无法解决的(细节稍后再表)。除了服务端以外,Node.js 对前端最大的贡献是提供了工程化的土壤。

在此你不妨思考这样一个问题: 一个构建工具最基本最底层的能力是什么?答案是文件读写能力。

而在 Node.js 之前,HTML/JS/CSS 的构建只有两个途径:

  • 借助其他编程语言的工具,比如基于 Java 的 YUI Compressor;

  • 用IE浏览器,这不是笑话,IE 浏览器能够在早期占据霸主地位可不完全是因为 Windows 系统的背书,它自身的功能性也非常强大。早期的 IE 浏览器是 Windows 系统的一个组件,以它为入口可以调用一些系统级的底层功能,文件 IO 便在此列,实现的方式是借助ActiveX 控件的 FileSystemObject 对象(细节就不讲了,感兴趣的话,你可以自行搜索)。

前端 2.5:React

另外,有一些声音认为 React 能够配得上"革命性"一词,因为它一定程度上改变了前端的编程模型,React 之前的前端是围绕 DOM,React 之后是面向数据。诚然如此,但跟 AJAX 和Node.js 相比,React 引起的变革程度达不到同等的量级,而 React 对前端组件化生态的影响也是在原有基础上的增强而不是新创。

所以,称 React 为前端 3.0 缺乏足够的说服力,不过前端 2.5 还是充分的。说到底,React 只是改变了前端领域自身,而 AJAX 和 Node.js 无一不是对前后端都有显著影响的技术。

前端 3.0:云开发

对于前端下一步的发展方向目前有两种主流的声音:

  • 前后端包揽的"大前端",也就是"全栈",关键性技术是Node.js;

  • 以 React Native、Flutter 等跨端技术为突破点的"泛前端",即全端。

其实,这两个方向并不冲突,比如微信小程序本质上也是一种跨端开发技术,你编写的代码不需要关注是 iOS 还是 Android 平台,而云开发实现了小程序的前后端全栈开发,所以使用云开发的小程序即可以叫作"大前端",也可以被叫作"泛前端"。

不过,"全栈"这个词一直存在歧义:

  • 狭义上的全栈来源于前端技术圈,指的是一个人包揽前端和 Web 服务端;

  • 广义上的全栈应该是在前后端以外,还包括数据库并且能够精通围绕三者展开的架构和技术细节,这是几乎不可能的任务,如果真的有人能够达到广义的"全栈",估计就是接近艾伦·图灵一般的计算机之神。

而在狭义与广义之间,云开发面向的是广义的全栈,将服务器管理、数据库优化等"脏活"交给云平台,从而前端开发者能够将交互逻辑、业务逻辑、数据全部掌控在自己手中,这才是真正意义上的全栈开发。

横向上,跨端技术抹平了端侧的差异,纵向上,云开发比 Node.js 更进一步降低了后端的开发门槛,进而实现了全栈开发。 为什么呢?我想你通过对比云开发与 BFF(Backends for Frontend,为前端服务的后端),能够得到答案。

云开发与 Node.js- 从 1 到 99

BFF 简单来说就是在原有的一体化服务端基础上,针对不同的业务平台分别开发一层独有的、很薄的服务端。

一体化服务架构

BFF架构

其中,BFF 主要承担了后端接口聚合功能,以及一部分平台差异化的业务逻辑,而与平台无关的核心业务逻辑由后端的微服务承载。这种架构模式的优势在于实现了差异化逻辑的松耦合,进而令前后端的迭代和维护更高效和安全。

目前业内对 BFF 普遍实践模式是将 BFF 分发到负责各平台技术开发的团队,比如 App 团队负责 Mobile BFF、前端团队负责 PC web 和 H5 BFF ......那么对于前端工程师来说,这种模式是否意味着前端兼顾 BFF层?理想的场景是这样的,但现实工作中并非如此。

因为 BFF 本质上仍然是服务端,对于前端开发而言,Node.js 虽然解决编程语言的问题,但是编程语言只是服务端编程最表面也是最容易突破的一层。除了编程语言之外,一名合格的服务端开发者还需要具备一些服务端独有的领域知识以及服务治理、数据管理等,这些才是真正阻碍前端成为全栈的关键因素,而这些问题便是云开发主要解决的问题。

云开发解决的问题

总结一句话就是: 在前端向全栈进化的角度上,Node.js 实现了从 0 到 1,而云开发更进一步实现了从 1 到 99。为什么不是 100 呢?因为我们团队并没有停滞不前,仍然在不停地探索更完善的方案,未来你会看到云开发更好的一面。

讲到这儿,我们这门课才算是真正地结束了,今天我和你一起探讨了云开发可能带给前端的变革。我希望你能在学完所有课程之后,除了掌握其中讲解的技术能力之外,还能得到一些启发,比如从历史全局的角度上理解云开发这项技术带来的变革。如果这些启发能够会在你未来的职业生涯中产生一些积极的影响,我便心满意足了。

十分非常荣幸也非常高兴能够跟你分享一些技术和思想,如果你有任何关于微信小程序或云开发的问题,可以在课程留言区处留言,或者可以尝试在云开发的官网中寻找答案。如果没有找到的话,可以在我们的 问答社区找到我,必有答复。 除此之外,我为你准备了一份结课问卷,希望你对本课程的内容进行评价,以便我及时优化课程内容。

点击链接,即可参与课程评价

最后,愿你的职业生涯一片荣光,我们江湖再见。