随着 Serverless 基礎服務帶來的技術紅利，前端工程師能夠以更低成本和更高可靠性掌控後端的服務。在應用開發過程中不僅僅要考量運維的成本，如何讓前端開發架構同後端應用架構結合，來實作應用研發提效，同樣是開發者關注的核心，本文将從前後端一體化研發模式的開發實踐上同大家一起讨論探索。
傳統應用研發模式
在傳統的前端研發的流程中，大抵會有如下兩種同後端的研發協作方式：
- 前後端分離模式
- BFF（Backend For Frontend）模式
前後端分離
前後端分離的開發模式，其特征非常明顯：
- 前端負責視圖展現，以 SPA（single-page application ）為代表的通用解決方案
- 後端負責業務和資料邏輯的處理
對于這種職責的劃分，也成為前端開發這一職業出現的一大因素，開發者期望不同的開發工程師在能夠各自專注在其領域和負責的事情上，不僅僅分工的分離，資源部署也可以進行分離。對于前後端連接配接的部分，如 API 相關的限制和規則，以約定方式提前溝通。
相比于傳統 Web 開發，比如 JavaWeb，前端端分離帶來的優勢是明顯的。但對于前端領域希望的優化的方向，可能受限後端架構，比較有代表性的場景：SSR（Server Side Render）。
BFF
除了可能出現的架構受限之外，在實際項目開發中，也經常出現前後端開發配置設定的問題，比如一個業務邏輯，後端同學希望通過兩個接口的組裝下，而前端期望減少 http 請求，應該再加一個接口。
從各自領域出發各有各的道理，而前端在面向快速疊代的業務上，也希望掌握更多的控制權，那在前後端之間加一層處理，用于使用者體驗的适配和 API 的聚合就變得水到渠成。
BFF 的出現可以降低一定的溝通成本，在後端服務化的現今，通過 BFF 組裝接口架構上會更合理。前端也掌控的更加服務能力，讓 SSR 等方案的應用也将變得更加順滑。
相信“全棧開發者們” 大多數還未來得及享受 BBF 帶來的幸福感，便要開始煩惱因為這一層引入導緻的問題，特别是鍊路複雜度上升，除了前端資源和後端資源釋出之外，還需要關心 Node 應用；維護成本的問題，讓本就缺乏運維經驗的前端開發更是無從下手。
前後端一體的架構設計
在 Serverless 技術紅利的現在，BFF 以往需要關心的負載、容災和報警等運維方面的内容，都可以借助 Serverless 的技術體系得到緩解，同時面向前越來越多的前後端協同開發模式，如何提供一套架構以提效應用研發顯得尤為重要。
什麼是一體化研發
傳統全棧開發，大多是前端資源和 Node 服務分别進行維護，獨立啟動調試服務，并各種擁有自己的開發部署流程。
傳統模式更多是将資源機械地組合在一起，沒有有充分發揮 Javascript 的語言優勢，無法解決前後端開發之間存在的割裂感。
一體化的研發模式，希望提供的開發體驗，除了同倉庫之外，還能夠以同一個指令開發建構，開發過程中共享源碼、類型，真正做到一起開發一起部署。
一體化研發架構設計
前後端一體的研發架構，包括前端 React 架構以及 Node 架構
以架構工程服務為基礎，提供工程建構和運作時開箱即用的能力：
- 借助工程上的插件能力，在調試時提供統一的 dev 服務，建構時統一的指令建構産物
- 通過前端及 Node 運作時能力的生成，為技術方案的一鍵開啟提供了可能
前端以函數調用的方式請求後端服務，通過函數式的程式設計範式，讓開發更貼近現代前端 Web 研發的方式。
前端顯式地引入後端代碼，為了在建構階段能夠正确進行前端資源和 Node 服務的打包，架構通過約定方式進行 API 的編譯及轉化
後端 API 按目錄約定生成指定的 API 路由，前端的函數調用，在編譯階段預設轉化成 request 請求，開發者多數情況下無需關心 API 的調用位址。
除此之外架構提供了基于函數式的服務調用，讓開發者以更加貼合函數式的方式使用 Node 服務。
通過前後端一體的研發模式設計，提供了更加符合直覺的應用開發方式，開發、調用、測試均像純函數一樣簡單，讓前後端開發方式更加一緻。
開箱即用的技術方案
前後端一體的開發模式下，不僅僅可以讓應用開發更加順滑，而且在應用一些技術方式時将變得更加簡單。
以 SSR 的使用流程為例，在傳統模式下，如果希望應用 SSR 能力：
而在一體化的研發模式下，開發者僅僅隻需要在工程配置檔案中開啟一個配置項：
ssr: true
便可以獲得上述流程中的所有能力，包括工程建構上需要進行的處理。
通過一體化架構的能力，大大降低了技術方案的應用成本和複雜度，幾乎以零上手成本的方式呈現給開發者。
除了 CSR、SSR 的一鍵切換之外，諸如 SSG（Server Static Generate）的技術方案也能變得開箱即用。
開發與部署
一體化的開發模式下，僅需要一個指令便能開始應用的開發調試：
借助架構 vite 模式和 Node 代碼的運作時編譯，給開發者帶來流程的開發體驗，開發調試速度得到極大提升。
對于應用部署同樣通過統一的建構指令完成整個應用的建構，結合基于 Serverless 的平台服務完成一鍵部署，享受 Serverless 的技術紅利帶來的低運維甚至零運維。
在不增加技術運維成本的基礎上不斷拓展前端開發的邊界，向着應用開發更新。
未來
借助 Serverless 帶來的運維成本降低，讓前端開發者專注開發的基礎上更加大膽自信地去掌控整個應用的邏輯。不斷拓展自己在業務上的能力邊界，逐漸從前端開發轉向應用開發。
一體化應用的開發模式，以其高效開發、便捷部署的特點将會占據應用開發的一席之地，而針對特定領域的解決方案，在配合平台服務能力的基礎上會有更大的想象空間。在未來的研發模式中，架構僅僅隻是提供了開發過程的研發提效，面向應用開發的全鍊路，必定是工具、架構、平台等多個次元互相結合，共同打造極緻研發體驗的過程。
如果對于一體化的研發模式感興趣歡迎關注相關的項目：
- 基于 React 的一體化研發解決方案 ICE： https://github.com/alibaba/ice
- 雲端一體 Node.js 架構 Midway： https://github.com/midwayjs/midway
- 多端應用研發方案 Rax： https://github.com/alibaba/rax
研發模式體驗
2021.10.19 - 10.22 雲栖大會期間，我們在雲栖小鎮 D3 館的雲起實驗室布置了雲端一體化研發的體驗區，大家可以搶先接觸和體驗面向未來的雲端一體研發模式，體驗項目包括專注中背景以及面向跨端開發的一體化研發，同時現場将有精美小禮品贈送，歡迎大家前來現場探讨和體驗。