[[259516]]

盡管大部分前端的工作并不涉及Server，但最近半年Serverless這個(gè)詞匯以及其引發(fā)的熱烈的討論，深深觸動(dòng)了阿里巴巴高級(jí)前端技術(shù)專家伐薪。作為接觸前端十余載的老開(kāi)發(fā)，伐薪認(rèn)為Serverless可能會(huì)是接下來(lái)引起前端領(lǐng)域革命性變化的技術(shù)之一。

今天，將為大家梳理Serverless的歷史發(fā)展進(jìn)程以及對(duì)前端的影響，希望對(duì)前端工程師有所啟發(fā)。

上圖是Serverless 這個(gè)詞最近5年在 Google 的搜索趨勢(shì)，可以看到最近半年已經(jīng)達(dá)到巔峰。

歷史上前端領(lǐng)域的重要技術(shù)革命

Ajax 的誕生

先來(lái)回顧一下前端技術(shù)領(lǐng)域的重要?dú)v史節(jié)點(diǎn)，第一個(gè)節(jié)點(diǎn)是2005年，Google的Jesse James Garrett 發(fā)表了一篇文章——《Ajax：Web應(yīng)用程序的新方法》，發(fā)布了Ajax 這個(gè)新的詞匯(準(zhǔn)確說(shuō)并不是新的技術(shù)，只是新的詞匯)，當(dāng)時(shí)我還在讀大二，雖然Ajax不是什么新的技術(shù)，只是對(duì)XmlHttpRequest等技術(shù)的包裝，但是這個(gè)技術(shù)被Google宣傳之后成為全球Web開(kāi)發(fā)的標(biāo)桿，間接促進(jìn)了富客戶端應(yīng)用(RIA)和單頁(yè)應(yīng)用(SPA)的流行，這些應(yīng)用大都具備絲滑般的體驗(yàn)(局部刷新)，并一直伴隨著web 2.0的發(fā)展，Ajax的深入人心，使得前端js的工作更加復(fù)雜和重要，專業(yè)分工越來(lái)越細(xì)，間接促進(jìn)了專職的前端開(kāi)發(fā)人員這一角色誕生，在此之前，web開(kāi)發(fā)并不區(qū)分服務(wù)端和瀏覽器端的工作，因此Ajax是前端領(lǐng)域的一次重要事件。

Nodejs 對(duì)前端規(guī)范化和工程化的促進(jìn)

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

React 的組件化及vdom理念

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

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

react 的誕生對(duì)此后，甚至此前的框架和庫(kù)都產(chǎn)生了深遠(yuǎn)的影響，包括不限于angular和vue都陸續(xù)采納了它很多技術(shù)思想，并且成為前端開(kāi)發(fā)領(lǐng)域目前已經(jīng)趨于穩(wěn)定的屈指可數(shù)的幾個(gè)技術(shù)選型之一。

再來(lái)總結(jié)一下，ajax使得前端的角色逐漸分離出來(lái)，nodejs促進(jìn)了前端的開(kāi)發(fā)模式向傳統(tǒng)編程語(yǔ)言靠近(工程化)，react的出現(xiàn)，基本結(jié)束了后端常常對(duì)前端”技術(shù)變化快“的吐槽，至此，前端的技術(shù)體系逐步成熟和標(biāo)準(zhǔn)化。

serverless 理念與前端的關(guān)系

那么為什么說(shuō)下一次對(duì)前端技術(shù)領(lǐng)域有較大影響的理念是serverless呢，事實(shí)上，盡管serverless這個(gè)詞匯由亞馬遜提出來(lái)還不到幾年，但是這個(gè)理念并不是什么爆炸性的新理念，在早期，cdn還不普及的時(shí)候，web工程師會(huì)把js資源和視圖文件(可能是靜態(tài)也可能是動(dòng)態(tài)的)傳到服務(wù)器，那個(gè)時(shí)候前端是需要關(guān)心服務(wù)器的，但是cdn及回源策略的普及，工程及搭建系統(tǒng)的大規(guī)模使用，使得前端可以快速把一個(gè)js或者靜態(tài)文件扔到cdn節(jié)點(diǎn)，通過(guò)回源機(jī)制(cdn回源到一個(gè)動(dòng)態(tài)服務(wù))，半動(dòng)態(tài)的視圖層渲染也成為可能，在這整個(gè)過(guò)程，前端開(kāi)發(fā)無(wú)需關(guān)心任何服務(wù)器的知識(shí)，也不知道cdn有多少節(jié)點(diǎn)，如何做負(fù)載均衡，做gslb的，也不需要知道qps多少，一個(gè)cdn可以放各種業(yè)務(wù)各種開(kāi)發(fā)的資源，可以說(shuō)cdn是serverless理念的的先行者。

回到應(yīng)用部署，在前幾年nodejs剛流行的時(shí)期，已有開(kāi)發(fā)者意識(shí)到應(yīng)用與機(jī)器的部署與運(yùn)維成本對(duì)業(yè)務(wù)方會(huì)是個(gè)問(wèn)題，出現(xiàn)了一些容器化的思想，比如cbu在15年出的naga，在這個(gè)naga容器里，業(yè)務(wù)邏輯是一個(gè)個(gè)插件，容器負(fù)責(zé)請(qǐng)求的路由分發(fā)，負(fù)載及穩(wěn)定性管理，業(yè)務(wù)方只需要編寫(xiě)并上傳最直接的業(yè)務(wù)代碼即可，對(duì)業(yè)務(wù)方來(lái)說(shuō)是實(shí)現(xiàn)了serverless的理念，因?yàn)閚aga的維護(hù)者幫你解決了部署及運(yùn)維的問(wèn)題。

再說(shuō)對(duì)前端息息相關(guān)的頁(yè)面搭建系統(tǒng)以及bff層，無(wú)論是各種搭建系統(tǒng)(如斑馬、積木盒子、TMS)，還是基于graphQl的平臺(tái)，還是通過(guò)web ide快速編寫(xiě)api gateway的產(chǎn)品——如cbu的mbox，都讓業(yè)務(wù)開(kāi)發(fā)只關(guān)心業(yè)務(wù)邏輯，無(wú)需關(guān)心部署運(yùn)維知識(shí)，它們一定程度上體現(xiàn)了serverless的理念。

serverless 將對(duì)前端的影響

綜上所述，前端早已與serverless產(chǎn)生了聯(lián)系，但是很多人還沒(méi)感知，接下來(lái)，serverless顯示化地爆發(fā)將給前端帶來(lái)更為深遠(yuǎn)的影響，主要體現(xiàn)在三個(gè)方面。

前端將會(huì)重新回歸到web應(yīng)用工程師這一職能

在最前面說(shuō)了，前端是社會(huì)分工的細(xì)化，大約起源于2007年左右，在此之前是沒(méi)有專門(mén)的前端開(kāi)發(fā)角色的，通常稱作web工程師或網(wǎng)站工程師，早期的網(wǎng)頁(yè)大都是服務(wù)器渲染，使用asp、php、jsp等server page技術(shù)，js僅僅是web工程師需要掌握的小小技能之一，但是隨著web 2.0及互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)、電子商務(wù)的發(fā)展，需要專門(mén)的人專注于編寫(xiě)具備很好兼容性和體驗(yàn)的UI，因此逐漸產(chǎn)生了專注于瀏覽器及移動(dòng)端的前端工程師。

但是前端技術(shù)領(lǐng)域逐漸趨于穩(wěn)定，伴隨著十幾年的發(fā)展，各種開(kāi)箱即用的庫(kù)、垂直方案以及工程手段唾手可得，甚至目前出現(xiàn)了一些輔助工具可以把設(shè)計(jì)師的視覺(jué)稿生成UI代碼，前端可以安心并且以非常低的成本編寫(xiě)UI和業(yè)務(wù)邏輯，而不用耗費(fèi)大量精力在選型、造輪、還原視覺(jué)、處理兼容性、性能優(yōu)化、調(diào)試和部署上，這種情況，前后端工種分離造成的協(xié)同成本反而放大了，因?yàn)樵谇昂蠖私巧蛛x的情況下，后端往往還會(huì)充當(dāng)bff層的角色，比如為前端表現(xiàn)層封裝各種api gateway，經(jīng)常出現(xiàn)相互等待、聯(lián)調(diào)協(xié)議的情況，而且bff層通常只是一些數(shù)據(jù)的加工，其他的角色經(jīng)過(guò)短期的培訓(xùn)可以快速上手，因此前端一直在嘗試接入到server端的bff層。

在15年前端開(kāi)始推廣使用nodejs來(lái)部署應(yīng)用，阿里內(nèi)外也出現(xiàn)了不少nodejs的框架，如業(yè)界的express，在生產(chǎn)環(huán)境，包括給買(mǎi)家、商家以及內(nèi)部人員使用的系統(tǒng)，有不少使用了nodejs，但是到今年2019年，再來(lái)回顧一下，發(fā)現(xiàn)這個(gè)數(shù)字并沒(méi)有超出預(yù)期。

造成這一現(xiàn)象的原因，個(gè)人認(rèn)為歸根到底還是因?yàn)榉止ぬ?xì)導(dǎo)致的前端對(duì)服務(wù)器知識(shí)的缺乏，nodejs本身的定位是服務(wù)器技術(shù)，本質(zhì)上在服務(wù)器要面對(duì)的問(wèn)題與java無(wú)異，現(xiàn)有的前端jd招聘的人才，鮮有能在服務(wù)器上工作游刃有余的人，除非專門(mén)招的nodejs人才，server服務(wù)的長(zhǎng)期運(yùn)行會(huì)暴露很多問(wèn)題，比如接口很慢，進(jìn)程core，cpu飆升，內(nèi)存泄漏等，另外負(fù)載均衡、擴(kuò)縮容，高并低延等知識(shí)，大部分前端都是沒(méi)有這些經(jīng)驗(yàn)的。

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

這一變革符合研發(fā)效能提升的背景，未來(lái)的云設(shè)施將會(huì)做得非常厚，非常專業(yè)、穩(wěn)定，而前臺(tái)開(kāi)發(fā)人員可以快速地，低成本地在云設(shè)施上建立業(yè)務(wù)邏輯，前端和服務(wù)器的前端(對(duì)整個(gè)請(qǐng)求鏈路來(lái)說(shuō)，前端是相對(duì)的，只要離客戶請(qǐng)求更近的角色都可以稱自己為前端)，分工將沒(méi)那么明確，以前的瀏覽器端的前端，將逐步承擔(dān)一部分服務(wù)器端接入層以及bff層的工作，返璞歸真，回到歷史上曾經(jīng)的web開(kāi)發(fā)工程師角色，這是對(duì)前端的一個(gè)大變革。

當(dāng)然，serverless技術(shù)讓前端回歸到傳統(tǒng)的web層，不代表前端不用掌握服務(wù)器知識(shí)了，掌握操作系統(tǒng)內(nèi)核及網(wǎng)絡(luò)編程知識(shí)仍有助于你編寫(xiě)高性能、高可用的業(yè)務(wù)應(yīng)用。

實(shí)時(shí)SSR將成為展示端UI的主要開(kāi)發(fā)模式

最早的web開(kāi)發(fā)，其實(shí)處理UI都是以服務(wù)器渲染為主，比如perl、php等動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，但是在前端逐漸成為一個(gè)工種開(kāi)始負(fù)責(zé)了絕大部分UI開(kāi)發(fā)，并且技術(shù)域逐漸縮小到客戶端范圍之后，網(wǎng)頁(yè)靜態(tài)化以及客戶端的渲染逐漸成為主流。

但是這種模式對(duì)用戶體驗(yàn)肯定是有問(wèn)題的，導(dǎo)致了較多的白屏?xí)r間，而由于新的前端庫(kù)如react和vue在vdom這層的抽象，服務(wù)器渲染的技術(shù)成本更低。

但是難點(diǎn)恰恰是前面說(shuō)的，服務(wù)器端人才的匱乏，雖然nodejs和vdom的普及提升了SSR的實(shí)施效率，但由于服務(wù)器知識(shí)的缺乏，通常只有少部分具備綜合知識(shí)的前端會(huì)深入的實(shí)踐這一領(lǐng)域。

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

在前面說(shuō)過(guò)，react有一個(gè)核心理念就是把UI看成函數(shù)，如果說(shuō)一個(gè)頁(yè)面是多個(gè)組件組成的，那一個(gè)組件是函數(shù)，我們可以把一個(gè)頁(yè)面看成是多個(gè)函數(shù)的組合，不同函數(shù)的組合，組合成不同的導(dǎo)購(gòu)場(chǎng)景，如果把一個(gè)函數(shù)看成一個(gè)微服務(wù)，一個(gè)場(chǎng)景就是微服務(wù)的聚合，這恰恰是faas的理念。

通過(guò)serverless低成本地實(shí)時(shí)ssr，可以讓客戶體驗(yàn)更好，借助算法和大數(shù)據(jù)，還可以快速實(shí)現(xiàn)UI的千人n面，構(gòu)建真正的導(dǎo)購(gòu)大腦。

基于場(chǎng)景的云開(kāi)發(fā)(web ide)將成為主流開(kāi)發(fā)模式

在提到serverless技術(shù)的時(shí)候，有一個(gè)關(guān)聯(lián)的領(lǐng)域不得不提，那就是web ide，很多互聯(lián)網(wǎng)大型企業(yè)把一個(gè)web ide當(dāng)成了云的基礎(chǔ)設(shè)施并且大力投資，這是為何?個(gè)人認(rèn)為有兩個(gè)原因。

一個(gè)是因?yàn)閟erverless目前在業(yè)界使用以垂直場(chǎng)景為主，他們有一個(gè)共同點(diǎn)，就是代碼足夠標(biāo)準(zhǔn)、規(guī)范，場(chǎng)景較為垂直，代碼復(fù)雜度不是很大，而且借助web ide可以快速地與云平臺(tái)結(jié)合，做到一鍵發(fā)布，因此這種場(chǎng)景，是比較適合輕量的在線編碼到部署全鏈路打通的。

另一個(gè)原因是，目前所有的云設(shè)施解決的是業(yè)務(wù)運(yùn)行問(wèn)題，但是軟件開(kāi)發(fā)有一個(gè)非常大但是大部分人可能會(huì)忽略的痛點(diǎn)，那就是環(huán)境問(wèn)題，相信很多人都有那種clone別人的項(xiàng)目但是廢了九牛二虎之力都無(wú)法啟動(dòng)的問(wèn)題，因?yàn)橐b各種環(huán)境啊?另外就是和別人聯(lián)調(diào)的時(shí)候，是不是因?yàn)楦鞣N環(huán)境部署缺失的問(wèn)題，聯(lián)調(diào)效率很低?

借助容器如docker等技術(shù)，軟件的運(yùn)行及調(diào)試環(huán)境，可以快速地移植給別人復(fù)用，而目前基于js的代碼編輯器已經(jīng)非常強(qiáng)大，vscode editor就是基于js編寫(xiě)并且沉淀出一個(gè)庫(kù) Monaco Editor，因此可以說(shuō)，大部分認(rèn)為web ide可能在語(yǔ)法提示、智能感知上比不上本地ide的想法是過(guò)時(shí)了。

同時(shí)web ide可以快速地與平臺(tái)集成，深入定制，打通業(yè)務(wù)平臺(tái)，一鍵部署，極大地提升研發(fā)效率。

web ide還能解決跨地辦公的問(wèn)題，因?yàn)榻鉀Q了環(huán)境準(zhǔn)備這一老大難問(wèn)題，你可以在家里，在公司，甚至在火車上，快速編寫(xiě)并交付代碼。

因此未來(lái)的paas平臺(tái)，都將關(guān)聯(lián)一個(gè)深度定制的web ide，需要編寫(xiě)業(yè)務(wù)邏輯時(shí)，一個(gè)連接跳轉(zhuǎn)到web ide即可編碼，完全無(wú)需關(guān)心本地環(huán)境問(wèn)題，做到真正的envless。比如你要開(kāi)發(fā)一個(gè)TMS模塊，那么點(diǎn)擊”新建“，跳到了web ide，代碼會(huì)幫你初始化好，點(diǎn)擊運(yùn)行，會(huì)在云端啟動(dòng)服務(wù)器運(yùn)行該組件，編寫(xiě)好之后，一鍵即可發(fā)布到TMS。

對(duì)于各種faas、api gateway系統(tǒng)以及其他云服務(wù)，都會(huì)一樣，web ide將成為企業(yè)云化的基礎(chǔ)設(shè)施。盡管阿里云目前還未發(fā)布媲美cloud9以及coding.net的web ide，但是很欣喜地看到集團(tuán)內(nèi)部已經(jīng)涌現(xiàn)出一些優(yōu)秀的產(chǎn)品，如aone的ide，以及數(shù)據(jù)平臺(tái)的app studio，其體驗(yàn)已經(jīng)接近業(yè)界水準(zhǔn)。

結(jié)語(yǔ)

在云計(jì)算領(lǐng)域，serverless將會(huì)掀起一場(chǎng)革命，即使看起來(lái)與這一領(lǐng)域關(guān)聯(lián)不大的前端，也會(huì)經(jīng)受即ajax、nodejs以及react之后的又一重大變革，你做好應(yīng)對(duì)了嗎?

【本文為51CTO專欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】

戳這里，看該作者更多好文