開發十年，就只剩下這套架構體系了！ >>>   

阿里妹導讀：儘管大部分前端的工作並不涉及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之後的又一重大變革，你做好應對了嗎？

相關推薦