Serverless For Frontend 前世此生

前言

做爲一個前端,你可能一直在迷茫,Node.js 的定位是什麼?爲何咱們須要它?前端

尤爲是到了 2019 這個時間點,將來一段時間內,有一個詞 -- Serverless 你會聽到想吐。數據庫

全部人都在說 Serverless 幾乎沒有人知道如何落地 Serverless 但你們都以爲其餘人在大力作 Serverless 因此你們都在宣傳本身在作 Serverless

阿里做爲 Node.js 國內的引航者,在該領域深度實踐多年。後端

在國內第一個引入 BFF 的概念,如今也是第一個提出 SFF(Serverless For Frontend)。前端工程化

筆者過去幾年有幸參與到該演化進程中,在此分享給你們一些心得,拋磚引玉。瀏覽器

演進史

鑑古知今,以史明鑑。咱們從哪裏來,通過哪裏,要去到哪裏。安全


1.遠古時代前端框架

天地初開,尚未出現先後端之分,僅有 設計 和 研發 兩種角色:服務器

  • 設計師根據需求產出高保真的原型圖。
  • 研發根據需求和原型圖來編寫對應的業務邏輯和頁面。

在 Web 1.0 的時代,大部分的 B/S 系統都採用的是 集中式架構,分爲標準的三層(MVC):架構

Serverless For Frontend 前世此生

  • 數據訪問層:封裝對數據庫的訪問。
  • 服務層:用於業務邏輯的處理。
  • Web 層:用戶處理頁面渲染,路由邏輯等等。

比較流行的是 Struts + Spring + Hibernate 框架,還有 Dreamweaver 等前端三劍客。框架

Serverless For Frontend 前世此生

此時的業務開發的套路,基本上是:

  1. 從數據庫查詢到一段動態數據。
  2. 套到模板上,渲染出頁面。
  3. 再加上幾個靜態資源(JS/CSS)去實現交互。

此時的主要矛盾在於:如何把那些有像素眼的 『美工』的天馬行空的點子,高還原度的實現出來。


2.石器時代

然而藝術和代碼之間的 Gap,對於不少缺少藝術細胞的直男程序猿來講,是一件很是頭疼的事。如何更好的提高用戶交互體驗,如何像素級的還原設計稿,都須要更高專業度的投入。

同時,因爲互聯網的迅猛增加,集中式架構已經逐漸沒法知足海量的訪問,從而演進出 分佈式架構 ,對研發的能力要求也進一步提高。

所以基於專業度的訴求,逐漸分化出 前端研發 和 後端研發 的角色

  • 前端此時更偏向設計,不少都是懂點研發的設計師承擔。
  • 後端則更深刻到業務建模,系統運維等方面。
Serverless For Frontend 前世此生

此時的業務開發的套路,變爲:

  1. 前端研發 根據原型圖,切圖,產出 HTML/CSS/JS ,交付給 後端研發。
  2. 後端研發 把 CSS/JS 上傳 CDN,而後把 HTML 手動改寫爲後端模板。
  3. 從數據庫查詢到一段動態數據。
  4. 套到模板上,渲染出頁面。

此時的主要矛盾在於先後端耦合

  • 前端同窗交付 HTML 頁面,被後端改寫爲 TPL 模板。
  • 若是需求變動,從而致使 HTML 修改後,後端再次套模板的時候,merge 起來會比較考眼力。
  • 若是模板渲染有問題,每每是前端跑到後端的電腦上直接修改模板來調試,而後還須要同步回去本身的 HTML。


3.青銅器時代

隨着 Web 2.0 的到來,以 Google 推出的 Gmail 爲號角,前端進入富應用時代,各類框架層出不窮,從 AJAX + jQuery,到逐漸造成 Angular、React、Vue 三國鼎立。

Serverless For Frontend 前世此生

此時的業務開發的套路,變爲 先後端分離

  • 後端提供 API 接口,把 領域模型 轉換爲 數據傳輸對象,並經過 HTTP 對外服務。
  • 前端經過 AJAX 調用對應的接口,接管模板層,直接在瀏覽器側渲染,也稱之爲前端渲染。

先後端分離 必定程度上解決先後端的耦合問題,約定好接口後,前端能夠直接 Mock 而後進行開發。

前端第一次翻身,如火如荼的投入到 前端框架 和 前端工程化 的建設中,矛盾在必定程度上弱化了。


4.蒸汽時代

隨着後端 微服務化 的演進,開始走向深水區,服務下沉,趨向穩定,業務被劃分爲不少獨立的微服務。

前端框架 和 前端工程化 趨向穩定,同時前端也進入了移動時代,出現了跨平臺、跨終端適配的場景,對用戶體驗提出的更高的要求,對首屏時間等性能指標愈來愈重視,且發佈頻度愈來愈快。

Serverless For Frontend 前世此生

此時的架構演化爲:

  • 後端分爲不少微服務。
  • 前端仍是經過 HTTP 訪問後端,但接口變多了,性能變低,且帶來安全問題。
  • 後端會提供一層 API 粘合層來緩解。
Serverless For Frontend 前世此生

隨之而來的新的矛盾:服務下沉與用戶體驗靈活性的矛盾。

  • 服務趨向穩定,傾向下沉。
  • 用戶體驗趨向不穩定,訴求服務的高度靈活與定製。
  • 不一樣設備對 API 有不一樣的訴求,須要裁剪。
  • 服務端接口,到底是面向 UI 仍是通用服務?

此時 Sam Newman 提出了 Backends For Frontends

Serverless For Frontend 前世此生

  • 簡稱之爲 BFF,最重要的是:服務自治 ,誰使用誰開發,帶來了靈活與高效。
  • BFF 根據團隊的技術棧來選型,在咱們的業務場景中,相對較優,生態最活躍,最能被前端接受的 Node.js。
  • BFF 層一直都存在,由於 領域模型 - UI 模型 的轉換是必然會存在的,區別只是在於維護者是誰。
  • GraphQL 之類的網關能夠視爲通用型的 BFF。
Serverless For Frontend 前世此生

此時,研發角色又轉變爲:

  • 後端研發,專一於業務建模,維護中間件服務和業務微服務。
  • 全棧研發,專一於處理 Web 層,比模板層更進一步,接管 BFF 層。

其中全棧研發又有兩種來源

  • 從前端進化過來的,通常會選擇 Node.js 做爲技術棧,使用諸如 Egg 等框架來下降前端同窗的上手成本。
  • 前端資源嚴重不足,因而賦能後端,助其轉變爲全棧,使用 Ant Design、Umi 等下降後端同窗的上手成本。


5.電氣時代

BFF 的實踐,在社區的分化嚴重,在大公司和創業公司比較受歡迎,但在話語權不強的中型公司,則舉步維艱。

  • 小創業公司 - 追求快狠準,先活下來再說,效率優先,幹就是了。
  • 大公司 - 具有良好的基建和研發流程支撐,對效能有更高的追求,如荼如火。
  • 中型公司 - 前端話語權不強,百廢待興,現有基建對前端不友好,推行舉步維艱。

做爲國內前端的引航者,過去幾年,咱們螞蟻體驗技術部工程產品的同窗,產出了不少效能產品,包括:

  • Basement 前端工做臺 - 打造更適合前端場景的工做流,管控研發流程和質量。
  • 雲鳳蝶 - 可視化建站,提高非前端專業同窗在站點搭建方面的效能。
  • DockerLab - 輕運維,支持快速創新,讓 idea 閃現到服務更加便捷。
  • Egg - 企業級的 Node.js 框架,掃清後端框架、中間件生態接入方面的障礙。
  • Ant Design - 企業級的中後臺前端框架,讓中後臺產品 default to good.

但這些大部分還侷限在 Pro Code 領域,離咱們願景中的終局還有很長的路要走。

此時的主要矛盾在於

  • 專業人才儲備
  • 遠遠低估了前端的缺人程度,一將難求,無人可招。
  • 全棧人才的培養成本不低,包括前端須要學習後端 DevOps,後端須要學習前端的用戶交互。
  • 基建牆,各類流程過重
  • 不一樣的基建服務須要去不一樣的後臺走申請流程,N 多個工單需等待審批。
  • 像 DRM 的配置、Mobilegw 的配置,須要在每種環境中單獨配置一遍。
  • 資源浪費
  • 在 BFF 場景下,服務器水位較低(10% ~ 30%),基於微服務的高可用訴求致使了服務器資源的浪費。
  • 譬如在螞蟻容災要求下,至少須要 11 臺 4C8G 的容器。據此估算,支撐內部上千箇中臺應用,則就至少須要約 2000 臺 32 核物理機!!!

幸而阿里開始吹響了 雲通將來 的號角,各集團軍協同做戰,讓咱們能借助兄弟團隊的協做,向將來邁進一大步,參與到『雲通將來』的子戰場。。

Serverless For Frontend 前世此生

就如前言提到的,每一個人對 Serverless 的定義和落地的理解都不同。

咱們依舊聚焦於一直以來的目標提高前端的研發效能,以一當百

其中 BFF 這個細分領域,咱們將依託 Serverless 繼續探索,簡稱爲 SFF。

咱們的思路以下:專業的人作專業的事,讓業務開發者專一於業務自己的研發

  • 場景化:根據不一樣業務場景作垂直領域定製,減小沒必要要的干擾,專一於業務邏輯的開發。
  • 輕流程化:打破基建牆,一站式的接入三方服務,減小各類沒必要要的流程和工單,以代碼爲中心,聲明即接入。
  • Serverless 化:讓應用能利用雲平臺實現資源的按需分配和彈性伸縮,從而減小資源浪費。
  • 自動化運維:DevOps → noops,減小研發對基礎措施和運維的關注,交給咱們這些專業的框架維護者。

一句話闡述:讓純前端開發者,只需寫幾個 Function 便可使用到後端相關的能力。

此時的研發角色劃分,彷佛又兜兜轉轉回到最初,但其實歷史是螺旋上升的,表象同樣,內在已然不一樣。

Serverless For Frontend 前世此生

目前該演進正在進行中,更多分享敬請期待。

小結

鑑古知今,咱們一直在前行,與君共勉。

將來已來,與其耳聽八方,不如眼見爲實,一塊兒參與進來把生米煮成熟飯。

螞蟻金服 Serverless 應用服務(https://tech.antfin.com/products/SAS)於近期開始正式內測,進入產品主頁,及時瞭解最新動態。

相關文章
相關標籤/搜索