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

你有沒有遇到過：

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

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

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

 

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

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

爲何接口會頻繁變更？

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

　　變更的成本較低。

　　德國有句諺語：「朝湯裏吐口水。」 只有這樣，才能讓人們放棄那碗湯，中止不合理的行爲。先後端同窗坐在一塊兒工做的時候效率會有提高，當後端同窗接口變化時，只須要口頭上通知一下便可，咱們沒有文檔，咱們很敏捷啊。沒錯，咱們須要認可這樣配合開發的效率會很高，可是頻繁的變更會致使不斷返工，形成了另外一種浪費，這種浪費是能夠被減小，甚至是被消除的。

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

　　接口文檔在定接口時起到必定做用，寫完接口就沒有用了。後面接口的頻繁變化，文檔一定會永遠落後於實際接口，維護文檔的帶來了必定的成本卻沒能帶來價值。除非對外提供的接口，不然文檔誰來看呢？沒人看，用處又在哪？

　　有些公司乾脆丟掉接口文檔，說咱們要擁抱敏捷。

　　因此接口文檔落後的緣由在於沒有給咱們帶來價值。

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

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

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

　　自動化？想都別想，空有一身好本領，在 「擁抱變化」 以後只能手工測試。偶爾還要拉上前臺美眉客串一下測試小妹。手工測試枯燥乏味，乏味的工做就容易出錯，並且還不能快速重複，沒法對測試過的功能快速回歸。

 

怎麼破？

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

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

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

　　契約敲定以後要幫助咱們生成 Mock Server（後面咱們會介紹一個工具），先後端同窗就要依照契約各自開發。Mock Server 可暫時替代後臺服務，幫組前端開發，同時，測試同窗也能夠依照契約文檔來編寫測試腳本，使用 Mock Server 進行腳本驗證。

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

　　看到圖中沒有 「聯調」 的環節，並非畫錯了，而是 「聯調「 再也不是一項工做，在部署後只須要更改代理的配置便可。甚至使用現代前端框架（如，vue 或者 react）只要在開發時配置一下，以後都不須要調整任何代碼。

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

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

　　描述工具生成文檔還不夠，還要生成 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"
    }
  ]
}

字由https://www.wode007.com/sites/73248.html 中國字體設計網https://www.wode007.com/sites/73245.html

經過 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 可以幫助咱們在工具上解決必定的問題，更重要的是持續改進的思想，只有團隊的思想是統一的纔有可能達到快速交付