探討可用於實踐的先後端分離方案

Background?

業務發展過程當中，技術團隊已再也不是原來的一人全包或是每一個人啥活都幹了，更看重每一個人術業有專攻。那麼，先後端開發如何減小耦合，各自獨立地開展工做，是咱們值得深層次的思考的問題。

Problems

1. 環境：進行本地開發，須要起後端環境，如 Tomcat、PHP，影響開發效率
2. 流程：前端開發先開發 html，再將 html 改寫成指定的模板語法（俗稱套模板），影響開發效率
3. 接口：
   • 接口定義通常使用 word 文檔，前端開發時很差理解接口字段，影響開發效率
   • 接口變動須要從新編寫文檔，並從新發送，影響開發效率
   • 文檔散落，影響接口維護
4. 聯調：
   • 聯調過程變得很複雜，尤爲是沒有作熱部署的Java工程，改視圖還須要重啓Tomcat，影響前端聯調效率
5. 效益：
   • 前端開發更關注用戶體驗，然後端只但願關注數據可靠，爲實現如響應式、ssr之類的一些交互，前端須要掌控必定的請求響應能力
   • 若是先後端對接的方式轉變成爲純粹的 JSON 交換，對於提高開發效率、更清晰的職責與接口複用都是有好處的

出現影響開發效率的事情，就說明現有的模式存在問題。

顯然問題的解題思路須要咱們從新思考「先後端」的定義。

此時，先後端分離的概念便應運而生，目的是將先後端開發人員的合做方式調節到你們都儘量溫馨的姿式。

Solutions

1、 依託於工具創建的開發階段先後端分離

Solution

1. 開發前：先後端約定 JSON 方式的數據，包括頁面的渲染數據和一些 api 的響應，後端負責將其整理後定義到接口文檔平臺；
2. 開發中：前端開發使用 Dev Server 進行本身的頁面開發，並將以前約定的數據在本地模擬；然後端開發更關注於提供給前端約定的數據；
3. 聯調：Dev Server 將本來來自本地的 JSON 數據改成從後端主機取數據）

Summary

• 這個方案更像是一個流程上的優化，沒有實質上解決先後端分工問題，可是開發效率確實大有提高

Problems

• 模板部分仍依賴於後端，渲染的仍然是一個黑盒，阻礙前端開發定位問題

2、前端 MV* 時代

Solution

瀏覽器提供可能性：

• 局部刷新： ajax
• 前端路由： hashchange/history

框架及工具支持：

• 框架：vue/react
• 前端路由 vue-router/react-router
• 前端數據存儲: vuex/redux

先後端分工調整爲：

後端	前端
提供數據	接收數據，返回數據
處理業務邏輯	處理渲染邏輯

Summary

• 移動端設備的設備的提高，性能已經不是瓶頸；
• 大部分的頁面跑在了 app 裏面，或是須要登陸，seo 要求逐漸下降；
• 局部刷新是頗有效的用戶體驗提高方式

Problems

• 須要等待資源到齊才能進行，會有短暫白屏與閃動

3、nodejs 中間層

大殺器 - node.js 中間層

由 Java / PHP 掌控的服務端，極大地限制了咱們的想象力，因而咱們決定造反了。前端開發做爲用戶體驗關注方，讓其負責與用戶交互的 gateway 可謂實至名歸 。

Solution 1 - Proxy Server

http-proxy 的方式轉發用戶請求，node.js 這一層是輕量級的 server，不關心具體的業務邏輯，全部請求都會轉發給後端 Tomcat 或是 php

注意：

1. 帶上須要轉換的字段，如 ip
2. 使用 node.js agent 模塊，開啓 http 的 connection: keep-alive，以創建鏈接池來維護長鏈接，減小頻繁創建鏈接的時間損失

Dependencies

• koa - proxy - middleware

Solution 2 - RPC

經過告知目標服務器方法名和方法傳遞參數的方式去調用一些 api

後端採用微服務的方式，node.js 做爲用戶端交互的 gateway，對於不一樣地需求場景，對後端的一些服務作組合調用，最終提供 wap/web/app 三方面的接口調用。

注意： 適用於微服務的後端架構。

Dependencies

• rpc 調用的 client，思路以下：
  1. 生成 調用方法名 和 調用參數 等數據
  2. encode
  3. 經過 socket 發送數據，並接收目標服務器響應
  4. decode
• node.js 端開發框架（ web 開發規範） - eggjs / nestjs / github.com/kappjs/kapp

Node.js server's common dependencies

• 日誌
  • 日誌記錄 - pm2 logs /log4js
• 多進程 與 請求的負載均衡 - pm2
  • 多進程 - 充分利用多核，負載均衡 - 合理分配請求到各個子進程
• Monitor 與 報警
  • 監控日誌記錄
  • 監控項採集 - 從日誌分析出一些監控數據
• 健康檢查
  • 檢查 proxy 服務是否可用，rpc 服務是否可用，以決定自己是否可用，若是不可用，則通知 nginx 中止向本臺服務器導流
• 分佈式的配置中心
  • 各個工程的配置統一
  • 修改配置當即更新線上

Summary

• 前端開發須要關注一些服務器端的知識，機遇與挑戰
• 後端服務可靠及穩定性直接決定 nodejs 服務調用時的開發的效率
• Mock 方式轉爲更抽象級別的接口 Mock
• 掌控用戶交互的 gateway，咱們的目的是提高用戶體驗，爲後續引入首屏直出的服務端渲染方案提供可能性

The End

漸進式的先後端分離方案（我的經驗）：

1. 使用 Mock Server 開發，不侵入現有模式；
2. 以爲有必要掌控服務端來打開咱們的想象力，引入 Node.js Proxy Server 中間層，只負責轉發請求。在此期間不斷完善 Node.js 的基礎設施；
3. 若是業務量巨大，有微服務的需求，推進後端接口服務化進程，Node.js 採用 RPC 方式調用後端接口；反之業務量不大，讓後端暴露出一些 web services 的接口，Node.js 使用 http 非阻塞的方式來調用來組裝便可。

更多精彩內容，請關注網易考拉前端團隊微信公衆號