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

周俊鵬

騰訊高級前端工程師

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

---

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

初次接觸前端是讀書期間的第一份實習工作，在SAP上海研究院TIP BI部門開發基于SVG的Charts庫，99%的代碼邏輯是將數據用SVG轉化為可視化的UI。值得一提的是當時用的構建工具是YUI Compressor搭配Ant調度。

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

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

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

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

前端變革史

前端0.0：WWW

如果以世界上第一個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對前端最大的貢獻是提供了工程化的土壤。

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

在Node.js之前，HTML/JS/CSS的構建只有兩個途徑。第一是借助其他編程語言的工具，比如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無一不是對前后端都有顯著影響的技術。

Serverless-從前端到全棧

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

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

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

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

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

BFF-從平臺無關性到平臺差異化

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

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

BFF未解決的問題

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

BFF本質上仍然是服務層，除了編程語言之外，一名合格的服務端開發者還需要具備一些獨有的領域知識以及服務管理、數據管理理念。所以目前大多數BFF仍然由傳統前端之外的專人負責，即便是Node.js BFF。

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

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

以此為支撐，落地到具體應用場景中的云開發模式如下圖：

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

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

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

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

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

開發生態

在以上云開發模式基礎上，具體到現實上手開發，開發者們需要了解三種角色：端、云和控制臺。

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

場景多樣化支撐

任何一種新技術或者架構落地到具體的業務場景中都難免會遇到由于業務特殊性造成的遷移困難問題，所以在基礎的開發生態之外，云開發為支撐多樣化的業務場景建立了必要的策略以及對應的工具。

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

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。