網易NEI在面臨先後端分離問題，所提供的完整解決方案

內容來源：2018 年 1 月5 日，網易NEI產品負責人包勇明在「2018移動技術創新大會」進行《網易高效多端應用協做開發實踐》演講分享。IT 大咖說（微信id：itdakashuo）做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數：1958 | 5分鐘閱讀

嘉賓演講視頻及PPT回顧：suo.im/5bH62T

摘要

在實際項目開發過程當中，先後端分離開發是比較受關注的問題，本次分享會講述開發所面臨的問題背景以及 NEI 如何提供的完整解決方案。

產品開發步驟

如今的產品開發通常是按照交互稿、視覺稿、開發、測試、發佈這樣的流程進行。本次咱們重點探討開發領域，涉及到客戶端以及服務端。

在沒有交互稿的時候，開發也能夠作一些前期準備，好比先後端的技術選型、環境搭建，另外後端還有建模的過程。

先後端並行開發

開發過程當中的理想狀態應該是先後端並行開發，這在業界也是比較熱門的概念，可是對一些沒有技術積累的傳統企業來講實現起來仍是有必定難度。

整個過程當中前端使用Mock Server後端進行接口測試，中間約定API契約，而後進行先後端並行開發，最後進行聯調。理論上聯調成本會很小，由於Mock Server是依照API契約進行開發的，然後端也一樣是按照約定定義接口。

接口管理平臺

交互稿設計完成後就輪到接口的設計，傳統的接口文檔有IM、txt、word、wiki、Swagger這幾類。它們廣泛存在表述不清晰或者格式混亂的問題，使用接口管理平臺能有效解決這類問題。

完全實現先後端分離的過程當中有着一個阻礙，即如何處理模板。模板是在後端環境中運行的，有ftl、php、ejs等各類類型。前端開發中若是還要涉及到後端環境，那麼這就不是完全的先後端分離。爲此咱們實現了可以解析模板的Mock Server，它能夠獲取模板中的真實數據，好比登陸的用戶數據，而只使用Mock模擬數據有些業務邏輯是沒法實現的。

先後端分離中須要有模板化，因此除了接口規範外還要有頁面規範。另外手動實現Mock Server是有必定成本的，咱們爲此提供了配套的構建工具，用來解析模板、Mock接口。

實踐方案

NEI協做體系

從交互階段開始就能夠根據交互稿設計接口，接着經過構建工具生成初始化代碼，先後端開發完成後進行自測。自測的過程當中，因爲前端的Mock數據都是生成在本地或者是平臺提供的接口，因此能夠經過修改數據進行更充分的自測。後端則主要是對接口是否符合定義的測試，咱們也提供了這方面的工具。最終這樣就能有效下降聯調的成本。

接口

接口的設計人員首先要對系統功能很是瞭解，其次對先後端開發都有所涉獵，瞭解前端的功能實現以及後端的接口實現。所以我我的是傾向於前端架構師這一角色，可是不少公司實際上是沒有這一職位定義的。

接口的設計必須遵循業界規範，好比Restful接口規範。而後要描述清晰，不能遺漏重要信息。

數據模型

實際開發過程，後端在建立接口的時候會事先創建數據模型，並進行一些增刪改查。前端也有一套對應的數據模型抽象，這樣作的優勢在於可以實現複用、規範以及自動化。

NEI支持的數據模型

NEI構建工具原理

經過接口定義NEI平臺上的數據規範，再使用NEI Toolkit導出規範，最後使用Express啓動服務。

NEI中的接口規範定義請求與數據的關係；頁面規範定義頁面與模板、接口的關係；模板規範定義模板與數據的關係。

NEI的模擬容器

圖中是NEI的模擬容器，接口、頁面都被直觀的展示出來。它的主要功能有頁面Mock、接口Mock、監聽靜態文件以及其餘前端頻繁用到的功能。

前端自測

上圖是構建工具生成的Mock數據文件，其中data.json就是Mock值，data.js主要是作一些攔截。前端的自測能夠修改data.json數據以及data.js過濾器。

後端自測

NEI集成了接口測試功能，好比驗證字段類型是否匹配、字段值是否符合定義、字段是否缺失或多餘以及自動生成測試報告和批量運行用例等功能。

先後端聯調

先後端聯調理論上只是服務器環境的地址不同，本地開發使用Localhost服務器，要使用其餘環境只需將Localhost替換成相應地址。通常定義時不用設置Localhost這塊的地址，只關注後面的地址。

地址變動只須要修改配置文件Server.Config.js。

其餘方面的探索和實踐

咱們還作了其餘方面的探索和實踐，包括遷移老項目、團隊協做、支持業界標準、對測試工程師的支持、支持典型產品。