導(dǎo)語：《信息簡史》中說“進化本身是生物體與環(huán)境之間持續(xù)不斷的信息交換的具體表現(xiàn)”，前端技術(shù)的進化也是如此。浩瀚的前端宇宙中，又出現(xiàn)過哪些耀眼的星辰呢？指引前端未來的“北極星”又在何方？騰訊云高級工程師與你暢談前端的變革史與新時代的希冀。

周俊鵬

騰訊高級前端工程師

《前端工程化：體系設(shè)計與實踐》作者

---

在正文之前我想簡單介紹一下自己的從業(yè)背景。

初次接觸前端是讀書期間的第一份實習(xí)工作，在SAP上海研究院TIP BI部門開發(fā)基于SVG的Charts庫，99%的代碼邏輯是將數(shù)據(jù)用SVG轉(zhuǎn)化為可視化的UI。值得一提的是當(dāng)時用的構(gòu)建工具是YUI Compressor搭配Ant調(diào)度。

畢業(yè)后成為了一名傳統(tǒng)的web前端開發(fā)者，期間還折騰過富本文編輯器。后來有近一年的時間研究效率工程，也就是大眾口中的前端工程化。然后在加入騰訊之前的工作是地圖，技術(shù)核心是WebGL。

可以說除了音視頻以外，5年多的經(jīng)歷基本涵蓋了前端領(lǐng)域絕大部分的技術(shù)方向。不論是大眾的web還是小眾的SVG，不論是宏觀到web整體的工程化還是微觀到像素的圖形學(xué)。表面看上去似乎每一份新工作跟之前的工作都關(guān)聯(lián)甚微，比如在使用WebGL期間積累的矩陣、向量、三角剖分等數(shù)學(xué)和圖形學(xué)知識基本上在現(xiàn)階段工作中得不到體現(xiàn)。但其實從畢業(yè)到加入騰訊之前始終處于一種迷惘的狀態(tài)中，一直試圖在不同的工作類型中尋找真正能夠體現(xiàn)前端工程師核心價值的方向，以及輔助這個方向的關(guān)鍵技術(shù)。

我想現(xiàn)在我找到了，以全棧為進化方向的前端，以及輔助其落地的Serverless。

如果要探討一項技術(shù)或者一種理念是否具有革命性，必然需要一些參照物，歷史是最佳的參考。所以在討論Serverless對前端的革新之前，有必要先“飛快”地回憶一下前端的變革史。

前端變革史

前端0.0：WWW

如果以世界上第一個web瀏覽器WorldWideWeb的誕生作為起點，那么90年代初便是前端的0.0時代。彼時沒有前端工程師的稱謂，前端的工作也很簡單，主要是靜態(tài)UI和表單驗證，要么后端工程師兼顧為之，要么由獨立的UI Developer全權(quán)負責(zé)。

其實時至今日很多外企仍然沿襲著UI Developer崗位，與目前大眾認知的前端工程師不同的是，UI Developer的能力棧除了HTML/JS/CSS以外，還要具備一定的UI和交互設(shè)計能力。

前端1.0：AJAX

起源于Microsoft Outlook的AJAX是引起前端第一次革命的關(guān)鍵技術(shù)，這是一個重要的轉(zhuǎn)折點，以此為契機網(wǎng)站具備了動態(tài)性，前端工程師的能力模型逐漸從UI偏向邏輯和數(shù)據(jù)。

前端2.0：Node.js

然后是廣為人知的Node.js成就了前端2.0。

Node.js破除了前后端編程語言的壁壘，令前端開發(fā)者能夠以相對較小的成本跨界服務(wù)端，但是編程語言僅僅是服務(wù)端開發(fā)最表層也是最易突破的，背后更困難的部分是單純靠Node.js無法解決的，細節(jié)稍后再表。除了服務(wù)端以外，Node.js對前端最大的貢獻是提供了工程化的土壤。

在此各位不妨思考一個問題：一個構(gòu)建工具最基本最底層的能力是什么？答案是文件IO。

在Node.js之前，HTML/JS/CSS的構(gòu)建只有兩個途徑。第一是借助其他編程語言的工具，比如YUI Compressor；第二是用IE瀏覽器。這不是笑話，IE瀏覽器能夠在早期占據(jù)霸主地位可不完全是因為windows系統(tǒng)的背書，它自身的功能性也非常強大。眾所周知早期的IE瀏覽器是windows系統(tǒng)的一個組件，以它為入口可以調(diào)用一些系統(tǒng)級的底層功能，文件IO便在此列，實現(xiàn)的方式是借助ActiveX控件的FileSystemObject對象。細節(jié)就不講了，感興趣的同學(xué)可以自行參閱相關(guān)資料。

前端2.5：React

有一些聲音認為React能夠配得上“革命性”一詞，因為它一定程度上改變了前端的編程模型，React之前的前端是圍繞DOM，React之后是面向數(shù)據(jù)。誠然如此，但跟AJAX和Node.js相比，React引起的變革仍顯輕微。而React對前端組件化生態(tài)的影響也是在原有基礎(chǔ)上的增強也并不能稱為革命性。所以稱React為前端3.0缺乏足夠的說服力，不過前端2.5還是充分的。說到底，React只是改變了前端領(lǐng)域自身，而AJAX和Node.js無一不是對前后端都有顯著影響的技術(shù)。

Serverless-從前端到全棧

在討論哪項技術(shù)或理念會成就前端3.0之前，必須要確認前端下一步的發(fā)展方向。

目前有兩種聲音：一是前后端包攬的“大前端”，也就是全棧，關(guān)鍵性技術(shù)是Node.js；二是以React-Native和Flutter為突破點的“泛前端”，即全端。

以目前的時間節(jié)點來看，React-Native也好，Flutter也罷，都還未能夠稱得上成熟，泛前端之路任重道遠。相對來說，前端下一步發(fā)展為全棧的可能性更高一些。基于這個前提，Serverless便是成就此道的革命性技術(shù)理念。

“全棧”這個詞其實一直存在歧義，狹義上的全棧來源于前端技術(shù)圈，指的是一個人包攬前端和web服務(wù)端；而廣義上的全棧應(yīng)該是在前后端以外還包括數(shù)據(jù)庫并且能夠精通圍繞三者展開的架構(gòu)和技術(shù)細節(jié)，這是幾乎不可能的任務(wù)，如果真的有人能夠達到這種境界，估計就是接近艾倫·圖靈一般的計算機之神了吧。在狹義與廣義之間，Serverless面向的是廣義的全棧。Serverless的理念是將服務(wù)器管理、數(shù)據(jù)庫優(yōu)化等“粗活”交給云平臺，從而前端開發(fā)者能夠?qū)⒔换ミ壿嫛I(yè)務(wù)邏輯、數(shù)據(jù)全部掌控在自己手中，這才是真正意義上的全棧。

為了能夠更清晰地理解Serverless，有一種架構(gòu)模式可以作為對比，即BFF（Backends for Frontend，為前端服務(wù)的后端）。

BFF-從平臺無關(guān)性到平臺差異化

BFF簡單來說就是在原有的一體化服務(wù)端基礎(chǔ)上，針對不同的業(yè)務(wù)平臺分別開發(fā)一層獨有的、很薄的服務(wù)，見下圖。

BFF承擔(dān)了一部分的業(yè)務(wù)邏輯，這部分邏輯通常是平臺獨有的。舉一個現(xiàn)實中的例子：在線視頻提供商有多種平臺，比如網(wǎng)站、app。由于版權(quán)限制有些影片只能在特定的平臺播放。具化到技術(shù)層面，實現(xiàn)此類邏輯包含分平臺鑒權(quán)、數(shù)據(jù)查詢策略等等，這些便是典型的平臺差異化業(yè)務(wù)邏輯。獨立于核心業(yè)務(wù)邏輯之外的BFF層能夠?qū)崿F(xiàn)差異化邏輯的松耦合，進而令迭代和維護更高效和安全。

BFF未解決的問題

目前業(yè)內(nèi)對BFF普遍實踐模式是將BFF分發(fā)到負責(zé)各平臺技術(shù)開發(fā)的團隊，比如App團隊負責(zé)Mobile BFF、前端團隊負責(zé)PC web和H5 BFF等等。那么對于前端工程師來說，這種模式是否意味著前端兼顧BFF層？理想的場景是這樣的，但現(xiàn)實工作中并非如此。

BFF本質(zhì)上仍然是服務(wù)層，除了編程語言之外，一名合格的服務(wù)端開發(fā)者還需要具備一些獨有的領(lǐng)域知識以及服務(wù)管理、數(shù)據(jù)管理理念。所以目前大多數(shù)BFF仍然由傳統(tǒng)前端之外的專人負責(zé)，即便是Node.js BFF。

也就是說，BFF并未解決前端成為全棧的關(guān)鍵性問題，而這些問題便是Serverless的針對點。

騰訊云 云開發(fā)對Serverless的落地實踐目前業(yè)內(nèi)對于Serverless的普遍認知是FaaS（Function as a service，函數(shù)即服務(wù)）和BaaS（Backend as a service，后端即服務(wù)）的綜合體。以此為前提，騰訊云的相關(guān)團隊將Serverless的具體實現(xiàn)為下圖所示的模型。

以此為支撐，落地到具體應(yīng)用場景中的云開發(fā)模式如下圖：

各平臺應(yīng)用的前端集成對應(yīng)的SDK，涵蓋云函數(shù)、云數(shù)據(jù)庫和云存儲的功能調(diào)用API。前端的請求直接送達云平臺的接入層，目前是以Node.js作為接入層技術(shù)棧；然后經(jīng)過必要的處理（比如用戶鑒權(quán)）轉(zhuǎn)至云函數(shù)、云數(shù)據(jù)庫以及云存儲平臺。

以云開發(fā)體系提供的功能和服務(wù)為基礎(chǔ)支撐，前端開發(fā)者的關(guān)注點除了UI和交互邏輯以外，能夠以很小的成本介入以云函數(shù)為承載的業(yè)務(wù)邏輯層和以云數(shù)據(jù)庫、云存儲為支撐的數(shù)據(jù)存儲層。簡而言之，前端的關(guān)注點為：交互邏輯+業(yè)務(wù)邏輯（云函數(shù)）+數(shù)據(jù)（云數(shù)據(jù)庫/云存儲）。

從上文的描述中可能有部分同學(xué)意識到一個問題：云存儲跟CDN有什么區(qū)別？

云存儲提供文件托管服務(wù)，本質(zhì)上與CDN相同。其優(yōu)勢體現(xiàn)在開發(fā)者無需申請域名、無需管理服務(wù)器，文件被自動托管，并且可以通過鑒權(quán)機制保證文件的私密性和安全性。其實針對CDN的話題可以延伸到Serverless，大多數(shù)前端開發(fā)者在工作中都無需關(guān)系CDN服務(wù)器的狀態(tài)，只需要部署文件即可（甚至這一步也可以由CI系統(tǒng)完成），那么CDN對于前端開發(fā)者來說就可以被認為是Serverless的。

完整的Serverless體系不僅僅包括CDN，還可以把數(shù)據(jù)庫和服務(wù)端也實現(xiàn)Serverless。在這套體系支撐下的工程模型中，一個完整的迭代周期僅僅需要兩種職能角色：前端和測試。前端負責(zé)所有與業(yè)務(wù)相關(guān)的工作，包括交互層、業(yè)務(wù)層和數(shù)據(jù)層；測試負責(zé)質(zhì)量保證；而部署、發(fā)布、服務(wù)器管理、線上監(jiān)控等等繁瑣的工作則交由云開發(fā)平臺去完成。

開發(fā)生態(tài)

在以上云開發(fā)模式基礎(chǔ)上，具體到現(xiàn)實上手開發(fā)，開發(fā)者們需要了解三種角色：端、云和控制臺。

• 端的表現(xiàn)形式是對應(yīng)各平臺的SDK，是與前端開發(fā)者關(guān)系最緊密的一個角色；
• 云指的是支撐Serverless體系的后臺系統(tǒng)，這部分對于開發(fā)者來說是無感知的，與其對接的工作由端SDK承擔(dān)。細化到子角色可以分為接入層和基礎(chǔ)服務(wù)，接入層負責(zé)代理轉(zhuǎn)發(fā)和用戶鑒權(quán)等工作；基礎(chǔ)服務(wù)提供基本的能力支撐，包括云函數(shù)、云數(shù)據(jù)庫和云存儲；
• 控制臺的功能分為兩大類：一是管理功能，比如云函數(shù)的部署、數(shù)據(jù)和文件的管理等等；二是運營，控制臺提供產(chǎn)品線上監(jiān)控以及數(shù)據(jù)的統(tǒng)計和可視化，以輔助運營。

場景多樣化支撐

任何一種新技術(shù)或者架構(gòu)落地到具體的業(yè)務(wù)場景中都難免會遇到由于業(yè)務(wù)特殊性造成的遷移困難問題，所以在基礎(chǔ)的開發(fā)生態(tài)之外，云開發(fā)為支撐多樣化的業(yè)務(wù)場景建立了必要的策略以及對應(yīng)的工具。

比如對于數(shù)據(jù)私密性存在高要求的產(chǎn)品，可以通過控制臺選擇嚴格的CURD權(quán)限管理策略；并且可以使用wx-service-sdk在云函數(shù)中進行私密數(shù)據(jù)的CURD以保障安全性；再比如對實時性要求較高的場景，比如在線客服、多人游戲等，云數(shù)據(jù)庫的實時推送功能可以保障此類功能的高效表現(xiàn)。

總結(jié)

Serverless以云計算相關(guān)技術(shù)為支撐，搭配容器技術(shù)和微服務(wù)架構(gòu)，將基礎(chǔ)實施的管理從開發(fā)者日常工作中解耦。雖然目前無論是理論解讀還是實踐模式都尚未形成絕對統(tǒng)一，但可以預(yù)見前端開發(fā)者將成為Serverless的最大受益群體之一，我們有充足的理由相信它將引發(fā)前端的第三次變革。

總結(jié)

以上是生活随笔為你收集整理的Serverless——前端的3.0时代的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。