阿里妹導讀：盡管大部分前端的工作并不涉及server，但最近半年serverless這個詞匯以及其引發的熱烈的討論，深深觸動了阿里巴巴高級前端技術專家伐薪。作為接觸前端十余載的老開發，伐薪認為serverless可能會是接下來引起前端領域革命性變化的技術之一。

今天，伐薪將為大家梳理serverless的歷史發展進程以及對前端的影響，希望對前端工程師有所啟發。

上圖是serverless 這個詞最近5年在 google 的搜索趨勢，可以看到最近半年已經達到巔峰。

歷史上前端領域的重要技術革命

Ajax 的誕生

先來回顧一下前端技術領域的重要歷史節點，第一個節點是2005年，google的Jesse James Garrett 發表了一篇文章——《Ajax：Web應用程序的新方法》，首次發布了Ajax 這個新的詞匯（準確說并不是新的技術，只是新的詞匯），當時我還在讀大二，雖然ajax不是什么新的技術，只是對XmlHttpRequest等技術的包裝，但是這個技術被google宣傳之后成為全球web開發的標桿，間接促進了富客戶端應用（RIA）和單頁應用（SPA）的流行，這些應用大都具備絲滑般的體驗（局部刷新），并一直伴隨著web 2.0的發展，ajax的深入人心，使得前端js的工作更加復雜和重要，專業分工越來越細，間接促進了專職的前端開發人員這一角色誕生，在此之前，web開發并不區分服務端和瀏覽器端的工作，因此ajax是前端領域的第一次重要事件。

Nodejs 對前端規范化和工程化的促進

接下來對前端變化最大的一個里程碑事件是2009年誕生的 nodejs（包括common js及npm）的出現和流行，它對前端領域的重要意義并不僅僅是讓前端可以快速用js寫server那么簡單，個人認為它最大的貢獻反而是commonjs、npm以及其便捷開發體驗促進的前端工程化，它使得前端開始從刀耕火種的和傳統軟件工程格格不入的部署方式，發展為接近傳統企業應用的研發模式，在此之前，前端開發在資源引用、依賴管理以及模塊規范上缺乏有效的工具和標準，但是nodejs流行以后，基于commonjs的模塊及npm的包部署和依賴管理成為主流（類似java的maven體系），并誕生了多種基于nodejs開發的cli工具輔助前端開發（如grunt、gulp），npm目前是全球最大的包管理倉庫，并且成為前端項目的包依賴管理事實標準。而webpack的出現，又使得前端代碼的部署更加簡便，讓前端可以以類似java jar包的形式發布應用（bundle），而不管項目中是何種類型的資源。

React 的組件化及vdom理念

第三個革命性事件是2013年開始出現的react，盡管web components標準在此之前早已發布，但是真正讓組件化理念深入人心并且應用最廣的庫是react，它還至少有兩點特性足以讓它成為歷史上最具前瞻性的前端庫，第一個特性是vdom的出現，在此之前，所有的ui庫，都直接與dom關聯，但是react在UI創建與渲染引擎之間，增加了一個中間層——vdom（一個使用輕量級json描寫UI結構的協議），除了改善了其本身的dom diff性能之外，還有一個重大意義就是UI的編寫與渲染開始分離，一次編寫，多端渲染的UI得以實現，這個多端包括server端、移動端、pc端以及其他需要展示UI的設備，之后的react native以及weex都是這一分層思想的受益者。

除了vdom之外，react還有一個重要的理念非常超前，即UI是一個函數（類），函數輸入一個state，一定返回確定的視圖，在此之前，大部分框架和庫，都會把UI分離成一個html片段（通常支持模板寫法以渲染數據），一個為該html片段綁定事件的js，盡管這樣比較好理解，但是react對UI這種抽象卻反映了UI的實際本質，并且這種函數式理念，在后面可以看到，將與faas及serverless技術產生美妙的碰撞。

react 的誕生對此后，甚至此前的框架和庫都產生了深遠的影響，包括不限于angular和vue都陸續采納了它很多技術思想，并且成為前端開發領域目前已經趨于穩定的屈指可數的幾個技術選型之一。

再來總結一下，ajax使得前端的角色逐漸分離出來，nodejs促進了前端的開發模式向傳統編程語言靠近（工程化），react的出現，基本結束了后端常常對前端”技術變化快“的吐槽，至此，前端的技術體系逐步成熟和標準化。

serverless 理念與前端的關系

那么為什么說下一次對前端技術領域有較大影響的理念是serverless呢，事實上，盡管serverless這個詞匯由亞馬遜提出來還不到幾年，但是這個理念并不是什么爆炸性的新理念，在早期，cdn還不普及的時候，web工程師會把js資源和視圖文件（可能是靜態也可能是動態的）傳到服務器，那個時候前端是需要關心服務器的，但是cdn及回源策略的普及，工程及搭建系統的大規模使用，使得前端可以快速把一個js或者靜態文件扔到cdn節點，通過回源機制（cdn回源到一個動態服務），半動態的視圖層渲染也成為可能，在這整個過程，前端開發無需關心任何服務器的知識，也不知道cdn有多少節點，如何做負載均衡，做gslb的，也不需要知道qps多少，一個cdn可以放各種業務各種開發的資源，可以說cdn是serverless理念的的先行者。

回到應用部署，在前幾年nodejs剛流行的時期，已有開發者意識到應用與機器的部署與運維成本對業務方會是個問題，出現了一些容器化的思想，比如cbu在15年出的naga，在這個naga容器里，業務邏輯是一個個插件，容器負責請求的路由分發，負載及穩定性管理，業務方只需要編寫并上傳最直接的業務代碼即可，對業務方來說是實現了serverless的理念，因為naga的維護者幫你解決了部署及運維的問題。

再說對前端息息相關的頁面搭建系統以及bff層，無論是各種搭建系統（如斑馬、積木盒子、TMS），還是基于graphQl的平臺，還是通過web ide快速編寫api gateway的產品——如cbu的mbox，都讓業務開發只關心業務邏輯，無需關心部署運維知識，它們一定程度上體現了serverless的理念。

serverless 將對前端的影響

綜上所述，前端早已與serverless產生了聯系，但是很多人還沒感知，接下來，serverless顯示化地爆發將給前端帶來更為深遠的影響，主要體現在三個方面。

前端將會重新回歸到web應用工程師這一職能

在最前面說了，前端是社會分工的細化，大約起源于2007年左右，在此之前是沒有專門的前端開發角色的，通常稱作web工程師或網站工程師，早期的網頁大都是服務器渲染，使用asp、php、jsp等server page技術，js僅僅是web工程師需要掌握的小小技能之一，但是隨著web 2.0及互聯網、移動互聯網、電子商務的發展，需要專門的人專注于編寫具備很好兼容性和體驗的UI，因此逐漸產生了專注于瀏覽器及移動端的前端工程師。

但是前端技術領域逐漸趨于穩定，伴隨著十幾年的發展，各種開箱即用的庫、垂直方案以及工程手段唾手可得，甚至目前出現了一些輔助工具可以把設計師的視覺稿生成UI代碼，前端可以安心并且以非常低的成本編寫UI和業務邏輯，而不用耗費大量精力在選型、造輪、還原視覺、處理兼容性、性能優化、調試和部署上，這種情況，前后端工種分離造成的協同成本反而放大了，因為在前后端角色分離的情況下，后端往往還會充當bff層的角色，比如為前端表現層封裝各種api gateway，經常出現相互等待、聯調協議的情況，而且bff層通常只是一些數據的加工，其他的角色經過短期的培訓可以快速上手，因此前端一直在嘗試接入到server端的bff層。

在15年前端開始推廣使用nodejs來部署應用，阿里內外也出現了不少nodejs的框架，如業界的express，在生產環境，包括給買家、商家以及內部人員使用的系統，有不少使用了nodejs，但是到今年2019年，再來回顧一下，發現這個數字并沒有超出預期。

造成這一現象的原因，個人認為歸根到底還是因為分工太細導致的前端對服務器知識的缺乏，nodejs本身的定位是服務器技術，本質上在服務器要面對的問題與java無異，現有的前端jd招聘的人才，鮮有能在服務器上工作游刃有余的人，除非專門招的nodejs人才，server服務的長期運行會暴露很多問題，比如接口很慢，進程core，cpu飆升，內存泄漏等，另外負載均衡、擴縮容，高并低延等知識，大部分前端都是沒有這些經驗的。

云計算的本質就是要讓業務開發專注于業務邏輯，業務之下的硬件及軟件設施都是按需采買，開箱即用，而serverless理念及相關技術，將使得開發人員不再需要關心應用及機器的問題，甚至連流量能不能撐住也不用關心了，它能自動擴縮容，因此，未來web開發人員的運維成本會大幅降低，前端也可介入到bff層的開發，而后端可以聚焦于數據處理、業務邏輯與算法。

這一變革符合研發效能提升的背景，未來的云設施將會做得非常厚，非常專業、穩定，而前臺開發人員可以快速地，最低成本地在云設施上建立業務邏輯，前端和服務器的前端（對整個請求鏈路來說，前端是相對的，只要離客戶請求更近的角色都可以稱自己為前端），分工將沒那么明確，以前的瀏覽器端的前端，將逐步承擔一部分服務器端接入層以及bff層的工作，返璞歸真，回到歷史上曾經的web開發工程師角色，這是對前端最大的一個變革。

當然，serverless技術讓前端回歸到傳統的web層，不代表前端不用掌握服務器知識了，掌握操作系統內核及網絡編程知識仍有助于你編寫高性能、高可用的業務應用。

實時SSR將成為展示端UI的主要開發模式

最早的web開發，其實處理UI都是以服務器渲染為主，比如perl、php等動態網頁技術，但是在前端逐漸成為一個工種開始負責了絕大部分UI開發，并且技術域逐漸縮小到客戶端范圍之后，網頁靜態化以及客戶端的渲染逐漸成為主流。

但是這種模式對用戶體驗肯定是有問題的，導致了較多的白屏時間，而由于新的前端庫如react和vue在vdom這層的抽象，服務器渲染的技術成本更低，因此SSR在最近幾年，又逐步開始流行。

但是SSR的難點恰恰是前面說的，服務器端人才的匱乏，雖然nodejs和vdom的普及提升了SSR的實施效率，但由于服務器知識的缺乏，通常只有少部分具備綜合知識的前端會深入的實踐這一領域。

serverless技術的普及將把這個問題消除掉，借助于serverless技術，前端可以快速搭建一個ssr的場景，在服務器取數，在服務器渲染，直出html給到客戶端，而不用關心這個渲染服務能否扛得住流量，會不會掛掉，這些事情云設施供應商會去解決。

在前面說過，react有一個核心理念就是把UI看成函數，如果說一個頁面是多個組件組成的，那一個組件是函數，我們可以把一個頁面看成是多個函數的組合，不同函數的組合，組合成不同的導購場景，如果把一個函數看成一個微服務，一個場景就是微服務的聚合，這恰恰是faas的理念。

通過serverless低成本地實時ssr，可以讓客戶體驗更好，借助算法和大數據，還可以快速實現UI的千人n面，構建真正的導購大腦。

基于場景的云開發（web ide）將成為主流開發模式

在提到serverless技術的時候，有一個關聯的領域不得不提，那就是web ide，很多互聯網大型企業把一個web ide當成了云的基礎設施并且大力投資，這是為何？個人認為有兩個原因。

第一個是因為serverless目前在業界使用以垂直場景為主，他們有一個共同點，就是代碼足夠標準、規范，場景較為垂直，代碼復雜度不是很大，而且借助web ide可以快速地與云平臺結合，做到一鍵發布，因此這種場景，是比較適合輕量的在線編碼到部署全鏈路打通的。

另一個原因是，目前所有的云設施解決的是業務運行問題，但是軟件開發有一個非常大但是大部分人可能會忽略的痛點，那就是環境問題，相信很多人都有那種clone別人的項目但是廢了九牛二虎之力都無法啟動的問題，因為要裝各種環境啊？另外就是和別人聯調的時候，是不是因為各種環境部署缺失的問題，聯調效率很低？

借助容器如docker等技術，軟件的運行及調試環境，可以快速地移植給別人復用，而目前基于js的代碼編輯器已經非常強大，vscode editor就是基于js編寫并且沉淀出一個庫 Monaco Editor，因此可以說，大部分認為web ide可能在語法提示、智能感知上比不上本地ide的想法是過時了。

同時web ide可以快速地與平臺集成，深入定制，打通業務平臺，一鍵部署，極大地提升研發效率。

web ide還能解決跨地辦公的問題，因為解決了環境準備這一老大難問題，你可以在家里，在公司，甚至在火車上，快速編寫并交付代碼。

因此未來的paas平臺，都將關聯一個深度定制的web ide，需要編寫業務邏輯時，一個連接跳轉到web ide即可編碼，完全無需關心本地環境問題，做到真正的envless。比如你要開發一個TMS模塊，那么點擊”新建“，跳到了web ide，代碼會幫你初始化好，點擊運行，會在云端啟動服務器運行該組件，編寫好之后，一鍵即可發布到TMS。

對于各種faas、api gateway系統以及其他云服務，都會一樣，web ide將成為企業云化的基礎設施。盡管阿里云目前還未發布媲美cloud9以及coding.net的web ide，但是很欣喜地看到集團內部已經涌現出一些優秀的產品，如aone的ide，以及數據平臺的app studio，其體驗已經接近業界頂級水準。

結語

在云計算領域，serverless將會掀起一場革命，即使看起來與這一領域關聯不大的前端，也會經受即ajax、nodejs以及react之后的又一重大變革，你做好應對了嗎？

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的Serverless 风暴来袭，前端工程师如何应对？的全部內容，希望文章能夠幫你解決所遇到的問題。

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