[轉載] 歷史上前端領域的重要技術革命

轉載: Serverless 風暴來襲，前端工程師如何應對？

地址:  https://yq.aliyun.com/articles/693426

 

Serverless 風暴來襲，前端工程師如何應對？-雲棲社區-阿里雲

技術小能手

23-29 分鐘

---

2019-03-13 09:45:26 瀏覽876

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

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

原文發佈時間爲：2019-03-13
本文做者：伐薪
本文來自雲棲社區合做夥伴「 阿里技術」，瞭解相關信息能夠關注「 阿里技術」。