中後臺系統提升質量和效率的一個思路
背景
中後臺項目中會存在一些配置頁面需求的開發，這些需求高度相似，迭代頻率低，基本結構爲「搜索區域」、「表格區域」、「包含表單的彈窗」三部分組成。
其中「搜索區域」和「表格區域」的操作區交互固化，比如查詢、添加、查看、刪除、上線、下線。
當前開發時大都採用複製類似需求頁面繼而修改的方式，如下圖所示。每個人都形成了自己的代碼組織結構，導致雖屬同一團隊，但代碼風格、交互實現邏輯變爲了多條平行線。
這種迭代方式存在兩點壞處：
a. 重複勞動較多，同時存在漏改的風險。易變的地方分佈在頁面中各個部分，修改起來不夠方便，改動後存在影響到正常邏輯的風險。
b. 團隊內各自抽離的不同交互方式，接手他人頁面的時候需要耗費一定的理解成本，同時 code review 時無法快速的理清邏輯。
解決方案
中後臺項目提效一個直接的想法就是低代碼的思路：
a. 初態：抽離各個組件，定義 json 的格式，通過 json 渲染出頁面。
b. 終態：開發搭建平臺，通過拖拽生成 json 並且實時預覽頁面，開發者也可以通過預定的協議接入自己的組件。
上述兩種方案除去搭建成本大之外，最大的問題就是業務開發靈活性將大大降低。
開發者將在新的規範下進行開發，不管是通過 json 配置還是配置平臺生成頁面，上手難度大大增加，不亞於去學習一個新的前端框架。如果新需求的交互框架沒有考慮到，將花費大量的時間進行適配， 甚至超過了從零開發需求的時間。極端情況下，如果無法滿足需求的交互，還存在推倒重來的風險。
基於以上考慮，我們採取一個更輕便的方案，以模版代碼爲基礎進行後續開發，並通過腳手架進行模版的配置、拉取。
如上圖，大家的開發流程從之前的平行線變爲了網狀，未來的頁面的目錄格式和交互方式都會統一。
由於是生成的模版代碼頁面而且不強依賴於模版，未來需求有大的變化也可以正常迭代。
方案設計
- 模板設計
考慮到今後有可能增加其他場景模版，設計模版要考慮到未來可以進行無縫擴展，有兩種方案：
a. 按分支來保存不同場景下的模版：
優點：不同場景下通過分支來拉取不同模版，模版之間完全隔離。
缺點：缺少了 master 分支，各模版都需要自己的 master 分支進行迭代。分支之間差異較大，完全違背了 git 的迭代初心。
b. 按文件夾來保存不同場景下的模版：
優點：所有模版都存在於 master 分支，和普通項目的方式一樣從 master 切出分支進行迭代。
缺點：腳手架需要一次性拉取所有模版，然後複製自己需要的模版。
考慮到拉取文件速度較快，最終選取了方案 b。
各個配置頁面之間雖然相似，但也會因實際情況存在細微差異，所以模版不能完全寫死，需要支持動態編譯，這裏採用 EJS 進行編譯。
EJS 是一套簡單的模板語言，它沒有再造一套迭代和控制流語法，只需正常的 JavaScript 語法即可實現一些條件編譯、變量替換等，因此可以快速上手。
關於模版內容，核心思想是將變化與不變的內容進行抽離。
我們可以將後端的接口、權限的配置、搜索框的配置、常量抽離出配置文件，將表格、搜索框、表單之間的聯動方式預先寫好，目錄格式如下。
開發者只需進行後端接口的配置、搜索框的配置、表單的開發即可快速完成整個需求。
- 架構設計
考慮到一方面腳手架整體架構和功能實現後迭代頻率會逐漸降低，另一方面更新腳手架需要走 npm 包的發佈流程，如果將模版內容耦合到腳手架中，每次更新都重新進行發包較爲繁瑣。
因此將模版單獨放一個倉庫，從腳手架中解耦出來，實現腳手架倉庫和模版倉庫分離，獨立迭代，降低更新成本。
使用者通過輸入命令和參數即可生成模版頁面代碼，腳手架內部實現拉取模版和編譯，生成最終頁面，架構如下：
- 腳手架實現
提供 ce-cli 命令，結合用戶的參數進行進行模版的編譯生成，同時提供交互式的形式選擇參數，降低使用者的上手難度，交互形式如下：
考慮到模版和腳手架存在強綁定關係，即如果模版更新了，但腳手架沒有更新會造成一些模版邏輯未被編譯的情況。因此執行命令時需要檢查腳手架是否爲最新版本，如果版本較低必須強制升級，中斷程序的執行。（對於團隊內部工具來說，始終保持最新版本纔可以及時用到最新功能，這也是強制升級的原因之一）
爲提高命令的執行速度，執行命令時將拉取的模版緩存到本地，並且將最新的 commit 名保存起來。第二次執行命令的時候將目前最新的 commit 和此前保存的 commit 進行比對，如果不相等則覆蓋原來的模版，否則使用原來的模版即可，減少一次網絡請求耗時。
總結
經過一段時間的迭代，後續有近 20 個頁面用到腳手架，每需求可降低 0.5pd 的時間，更重要的是團隊內相關需求的代碼結構、交互實現均已統一，提升了代碼質量 和 code review 的效率，團隊間交替開發需求時的代碼認知難度將大大降低。
在 code review 過程中，團隊內提供相關建議，沉澱最佳實踐，例如默認對象通過函數返回、公共方法的使用、項目框架一些特有操作都內置到模版中，不斷提升代碼質量，磨平大家之間的認知差異。
未來有新同學加入，可以在模版的基礎上更快的進入開發，極大的降低對系統框架一些特有操作的認知時間，同時保證代碼質量。
腳手架中的模版對主要對錶格和搜索區域固化了代碼邏輯，對於表單的使用我們還是通過原始的 element 表單進行開發，一些常用的規則校驗、表單的邏輯每次都需要重複進行開發，經過調研目前公司內已經有多種封裝好的表單，未來可以進行詳細瞭解，最終引進到模版代碼中，進一步提升開發效率。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/1bFwqpWleoPnOFzEZPrhZA