扎心一問！爲何先後端分離後，你比從前更痛苦？

做者：謝小呆

來源：

https://my.oschina.net/xbl/blog/2246297

本文版權歸做者全部

寫在前面

你有沒有遇到過：

• 前端代碼剛寫完，後端的接口又變了

• 接口文檔永遠都是不對的

• 測試工做永遠只能臨近上線才能開始

爲何先後端分離了，你比從前更痛苦？

先後端分離早已經不是新聞，當真正分離以後確遇到了更多問題。要想解決如今的痛，就要知道痛的緣由：爲何接口會頻繁變更？

一、設計之初沒有想好，這須要提升需求的理解能力和接口設計能力。

二、變更的成本較低，德國有句諺語：「朝湯裏吐口水。」 只有這樣，才能讓人們放棄那碗湯，中止不合理的行爲。

先後端同窗坐在一塊兒工做的時候效率會有提高，當後端同窗接口變化時，只須要口頭上通知一下便可，咱們沒有文檔，咱們很敏捷啊。

沒錯，咱們須要認可這樣配合開發的效率會很高，可是頻繁的變更會致使不斷返工，形成了另外一種浪費，這種浪費是能夠被減小，甚至是被消除的。

爲何接口文檔永遠都是不對的？

接口文檔在定接口時起到必定做用，寫完接口就沒有用了。後面接口的頻繁變化，文檔一定會永遠落後於實際接口，維護文檔的帶來了必定的成本卻沒能帶來價值。

除非對外提供的接口，不然文檔誰來看呢？沒人看，用處又在哪？

有些公司乾脆丟掉接口文檔，說咱們要擁抱敏捷。因此接口文檔落後的緣由在於沒有給咱們帶來價值。

爲何測試工做永遠只能臨近上線才能開始？

一個需求，後端開發 4 天，前端開發 4 天，聯調 4 天，留給測試同窗只有2天時間甚至更少，測不完只能帶 bug 上線。

現有開發流程

在開發階段測試同窗沒法介入，接口在變，前端也在變， 「提測」 以前只能喝茶，「提測」 以後又忙的要命。

自動化？想都別想，空有一身好本領，在 「擁抱變化」 以後只能手工測試。偶爾還要拉上前臺美眉客串一下測試小妹。

手工測試枯燥乏味，乏味的工做就容易出錯，並且還不能快速重複，沒法對測試過的功能快速回歸。

怎麼破？

解決以上問題要讓接口文檔發揮價值，提升變更接口的成本，測試儘早介入。

接口文檔發揮出價值，就要賦予契約的意義，就如同簽字畫押誰也不準變，來約束咱們只認契約不認人。

契約應該由前端同窗來驅動，先後端共同協商。因爲前端同窗與 UX 接觸比較緊密，更瞭解頁面所需的數據以及總體的 User Journey，前端同窗驅動會更加合理。

契約敲定以後要幫助咱們生成 Mock Server（後面咱們會介紹一個工具），先後端同窗就要依照契約各自開發。

Mock Server 可暫時替代後臺服務，幫組前端開發，同時，測試同窗也能夠依照契約文檔來編寫測試腳本，使用 Mock Server 進行腳本驗證。以下圖：

改進後的開發流程

當後端接口發生變化除了口頭通知之外必須修改契約，前端同窗和測試同窗才能各自修改。如此一來修改契約的成本變高，人們在定契約時則會更加慎重，也會促使咱們提升接口的設計能力。

看到圖中沒有 「聯調」 的環節，並非畫錯了，而是 「聯調「 再也不是一項工做，在部署後只須要更改代理的配置便可。

甚至使用現代前端框架（如，Vue 或者 React）只要在開發時配置一下，以後都不須要調整任何代碼。

「提測」 呢？測試一直都在進行，也就再也不有一個 」提測「 的環節，不管先後端任意一方完成開發，測試同窗均可以進行測試。

理論終於扯完了，提及來容易作起來難啊，須要工具來幫助咱們。接口描述的工具備不少，比較知名的 Swagger 和 Raml，我我的更傾向於 Raml 。以下圖所示：

API 文檔

描述工具生成文檔還不夠，還要生成 Mock Server，若是描述工具和 Mock Server 是分離又帶來了額外的工做，好在有她——raml-mocker。

raml-mocker

raml-mocker (https://github.com/xbl/raml-mocker) 是一個基於 Raml 使用 Nodejs 開發的 Mock Server 工具，使用 Raml 描述接口中設置 response 的 example 指令便可

raml-mocker 會解析 Raml 文件，並啓動一個 Mock Server，將 example 的內容返回給瀏覽器。

開始

初始化項目

git clone https://github.com/xbl/raml-mocker-starter.git raml-api
cd raml-api
git remote rm origin複製代碼

安裝

yarn
# or
npm install複製代碼

啓動 mock server

yarn start
# or
npm start複製代碼

測試curl -i http://localhost:3000/api/v1/users/1/books/
# or
curl -i http://localhost:3000/api/v1/users/1/books/1生成 API 可視化文檔yarn run build
# or
npm run build
此功能使用了raml2html。複製代碼

配置 .raml-config.json

{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": []
}複製代碼

• controller: controller 目錄路徑，在高級篇中會有更詳細說明

• raml: raml 文件目錄

• main: raml 目錄下的入口文件

• port: mock server 服務端口號

• plugins: 插件

入門篇：Mock Server

raml-mocker 只須要在response 添加 example:

/books:
  /:id:
 post:
 body:
        application/json:
 type: abc
 responses:
        200:
 body:
            application/json:
 type: song
              # 返回的 Mock 數據
 example: !include ./books_200.json複製代碼

books_200.json{
 "code": 200,
 "data": [
    {
 "id": 1,
 "title": "books title",
 "description": "books desccription1"
    },
    {
 "id": 2,
 "title": "books title",
 "description": "books desccription2"
    }
  ]
}
經過 curl 請求：curl -i http://localhost:3000/api/v1/users/1/books就會獲得 example 的數據，惟一不足是沒法根據參數動態返回不一樣數據。別急，請往下看。複製代碼

高級篇：動態 Server

若是靜態的 Mock 數據不能知足你的需求，Raml-mocker 還提供了動態的功能。

在 raml 文檔中添加 (controller) 指令，便可添加動態的 Server，如：

/books:
 type:
 resourceList:
 get:
 description: 獲取用戶的書籍
    (controller): user#getBook
 responses:
      200:
 body:
 type: song[]
 example: !include ./books_200.json複製代碼

在文檔中 (controller) 表示 controller 目錄下 user.js 中 getBook 函數。

controller/user.js

exports.getBook = (req, res, webApi) => {
  console.log(webApi);
  res.send('Hello World!');
}複製代碼

Raml-mocker 是在 expressjs 基礎上進行開發，req、res 能夠參考 express 文檔。

webApi 會返回文檔中的配置：

{
  "absoluteUri": "/api/:version/users/:user_id/books",
  "method": "get",
  "controller": "user#getBook",
  "responses": [
    {
      "code": "200",
      "body": "... example ...",
      "mimeType": "application/json"
    }
  ]
}
複製代碼

如此，raml-mocker 提供了更多可擴展空間，咱們甚至能夠在 controller 中實現必定的邏輯。

插件

Raml-mocker 提供了插件機制，容許咱們在不使用 controller 指令的時候對 response 的內容進行處理，例如使用 Mockjs。

.raml-config.json

{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": ["./plugins/mock.js"]
}
複製代碼

./plugins/mock.js

var { mock } = require('mockjs');

module.exports = (body) => {
  try {
    return mock(JSON.parse(body));
  } catch(e) {}
  return body;
}
複製代碼

Enjoy it！
複製代碼

總結

先後端分離可讓咱們的職責更清晰，打破前端發揮的侷限，工做解耦以後能更好的提升開發效率。

然而由於沒有規劃好開發流程，致使了咱們沒有發揮出其應有的價值，形成了更多的浪費。

raml-mocker 可以幫助咱們在工具上解決必定的問題，更重要的是持續改進的思想，只有團隊的思想是統一的纔有可能達到快速交付。

END

長按下圖二維碼，即刻關注【狸貓技術窩】

阿里、京東、美團、字節跳動 頂尖技術專家坐鎮

爲IT人打造一個 「有溫度」 的技術窩！