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

現在的產品開發一般是按照互動稿、視覺稿、開發、測試、釋出這樣的流程進行。本次我們重點探討開發領域，涉及到客戶端以及服務端。

在沒有互動稿的時候，開發也可以做一些前期準備，比如前後端的技術選型、環境搭建，另外後端還有建模的過程。

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

整個過程中前端使用Mock Server後端進行介面測試，中間約定API契約，然後進行前後端並行開發，最後進行聯調。理論上聯調成本會很小，因為Mock Server是依照API契約進行開發的，而後端也同樣是按照約定定義介面。

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

徹底實現前後端分離的過程中有著一個阻礙，即如何處理模板。模板是在後端環境中執行的，有ftl、php、ejs等各種型別。前端開發中如果還要涉及到後端環境，那麼這就不是徹底的前後端分離。為此我們實現了能夠解析模板的Mock Server，它可以獲取模板中的真實資料，比如登入的使用者資料，而只使用Mock模擬資料有些業務邏輯是無法實現的。

前後端分離中需要有模板化，所以除了介面規範外還要有頁面規範。另外手動實現Mock Server是有一定成本的，我們為此提供了配套的構建工具，用來解析模板、Mock介面。

從互動階段開始就可以根據互動稿設計介面，接著通過構建工具生成初始化程式碼，前後端開發完成後進行自測。自測的過程中，由於前端的Mock資料都是生成在本地或者是平臺提供的介面，所以可以通過修改資料進行更充分的自測。後端則主要是對介面是否符合定義的測試，我們也提供了這方面的工具。最終這樣就能有效降低聯調的成本。

介面的設計人員首先要對系統功能非常瞭解，其次對前後端開發都有所涉獵，瞭解前端的功能實現以及後端的介面實現。因此我個人是傾向於前端架構師這一角色，但是很多公司其實是沒有這一職位定義的。

介面的設計必須遵循業界規範，比如Restful介面規範。然後要描述清晰，不能遺漏重要資訊。

實際開發過程，後端在建立介面的時候會事先建立資料模型，並進行一些增刪改查。前端也有一套對應的資料模型抽象，這樣做的優點在於能夠實現複用、規範以及自動化。

通過介面定義NEI平臺上的資料規範，再使用NEI Toolkit匯出規範，最後使用Express啟動服務。

NEI中的介面規範定義請求與資料的關係；頁面規範定義頁面與模板、介面的關係；模板規範定義模板與資料的關係。

圖中是NEI的模擬容器，介面、頁面都被直觀的展現出來。它的主要功能有頁面Mock、介面Mock、監聽靜態檔案以及其他前端頻繁用到的功能。

上圖是構建工具生成的Mock資料檔案，其中data.json就是Mock值，data.js主要是做一些攔截。前端的自測可以修改data.json資料以及data.js過濾器。

NEI整合了介面測試功能，比如驗證欄位型別是否匹配、欄位值是否符合定義、欄位是否缺失或多餘以及自動生成測試報告和批量執行用例等功能。

前後端聯調理論上只是伺服器環境的地址不一樣，本地開發使用Localhost伺服器，要使用其他環境只需將Localhost替換成相應地址。一般定義時不用設定Localhost這塊的地址，只關注後面的地址。

地址變更只需要修改配置檔案Server.Config.js。

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