《資訊簡史》中說“進化本身是生物體與環境之間持續不斷的資訊交換的具體表現”，前端技術的進化也是如此。浩瀚的前端宇宙中，又出現過哪些耀眼的星辰呢？指引前端未來的“北極星“又在何方？騰訊雲高階工程師與你暢談前端的變革史與新時代的希冀。
畢業後成為了一名傳統的 web 前端開發者，期間還折騰過富本文編輯器。後來有近一年的時間研究效率工程，也就是大眾口中的前端工程化。然後在加入騰訊之前的工作是地圖，技術核心是 WebGL。
可以說除了音視訊以外，5 年多的經歷基本涵蓋了前端領域絕大部分的技術方向。不論是大眾的 web 還是小眾的 SVG，不論是巨集觀到 web 整體的工程化還是微觀到畫素的圖形學。表面看上去似乎每一份新工作跟之前的工作都關聯甚微，比如在使用 WebGL 期間積累的矩陣、向量、三角剖分等數學和圖形學知識基本上在現階段工作中得不到體現。但其實從畢業到加入騰訊之前始終處於一種迷惘的狀態中，一直試圖在不同的工作型別中尋找真正能夠體現前端工程師核心價值的方向，以及輔助這個方向的關鍵技術。
我想現在我找到了，以全棧為進化方向的前端，以及輔助其落地的 Serverless。
如果要探討一項技術或者一種理念是否具有革命性，必然需要一些參照物，歷史是最佳的參考。所以在討論 Serverless 對前端的革新之前，有必要先“飛快“地回憶一下前端的變革史。
前端變革史
前端0.0：WWW
其實時至今日很多外企仍然沿襲著 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未解決的問題
目前業內對BFF普遍實踐模式是將BFF分發到負責各平臺技術開發的團隊，比如App團隊負責Mobile BFF、前端團隊負責PC web和H5 BFF等等。那麼對於前端工程師來說，這種模式是否意味著前端兼顧BFF層？理想的場景是這樣的，但現實工作中並非如此。
也就是說，BFF 並未解決前端成為全棧的關鍵性問題，而這些問題便是 Serverless 的針對點。
騰訊雲 雲開發對Serverless的落地實踐
目前業內對於 Serverless 的普遍認知是 FaaS（Function as a service，函式即服務）和BaaS（Backend as a service，後端即服務）的綜合體。以此為前提，騰訊雲的相關團隊將 Serverless 的具體實現為下圖所示的模型。
以雲開發體系提供的功能和服務為基礎支撐，前端開發者的關注點除了 UI 和互動邏輯以外，能夠以很小的成本介入以雲函式為承載的業務邏輯層和以雲資料庫、雲端儲存為支撐的資料儲存層。簡而言之，前端的關注點為：互動邏輯+業務邏輯（雲函式）+資料（雲資料庫/雲端儲存）。
雲端儲存提供檔案託管服務，本質上與 CDN 相同。其優勢體現在開發者無需申請域名、無需管理伺服器，檔案被自動託管，並且可以通過鑑權機制保證檔案的私密性和安全性。其實針對 CDN的話題可以延伸到 Serverless，大多數前端開發者在工作中都無需關係CDN伺服器的狀態，只需要部署檔案即可（甚至這一步也可以由CI系統完成），那麼CDN對於前端開發者來說就可以被認為是 Serverless 的。
完整的 Serverless 體系不僅僅包括 CDN，還可以把資料庫和服務端也實現 Serverless。在這套體系支撐下的工程模型中，一個完整的迭代週期僅僅需要兩種職能角色：前端和測試。前端負責所有與業務相關的工作，包括互動層、業務層和資料層；測試負責質量保證；而部署、釋出、伺服器管理、線上監控等等繁瑣的工作交由雲開發平臺去完成。
開發生態
- 端的表現形式是對應各平臺的 SDK，是與前端開發者關係最緊密的一個角色；
- 雲指的是支撐 Serverless 體系的後臺系統，這部分對於開發者來說是無感知的，與其對接的工作由端SDK承擔。細化到子角色可以分為接入層和基礎服務，接入層負責代理轉發和使用者鑑權等工作；基礎服務提供基本的能力支撐，包括雲函式、雲資料庫和雲端儲存；
- 控制檯的功能分為兩大類：一是管理功能，比如雲函式的部署、資料和檔案的管理等等；二是運營，控制檯提供產品線上監控以及資料的統計和視覺化，以輔助運營。
場景多樣化支撐
任何一種新技術或者架構落地到具體的業務場景中都難免會遇到由於業務特殊性造成的遷移困難問題，所以在基礎的開發生態之外，雲開發為支撐多樣化的業務場景建立了必要的策略以及對應的工具。
總結
Serverless 以雲端計算相關技術為支撐，搭配容器技術和微服務架構，將基礎實施的管理從開發者日常工作中解耦。雖然目前無論是理論解讀還是實踐模式都尚未形成絕對統一，但可以預見前端開發者將成為 Serverless 的最大受益群體之一，我們有充足的理由相信它將引發前端的第三次變革。
瞭解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公眾號～
關於雲開發
雲開發（CloudBase）是一款雲端一體化的產品方案 ，採用 serverless 架構，免環境搭建等運維事務 ，支援一雲多端，助力快速構建小程式、Web應用、移動應用。
- 技術文件：www.cloudbase.net/
- 微信搜尋：騰訊云云開發，獲取專案最新進展