前端工程實踐之可視化搭建系統（一）

本文首發於政採雲前端團隊博客：前端工程實踐之可視化搭建系統（一）

https://www.zoo.team/article/luban-one

背景

隨公司業務不斷髮展，營銷活動、廣告、頁面改版等需求日益倍增，靠純人工擼代碼已經無法跟上需求增長速度。加班？招人？顯得不夠明智，也不夠前端，提效也就成爲了關鍵。如何提效？從何入手？那不得不提的就是前端提效神器 —— 搭建系統，下文將從多個方面，向大家簡單介紹政採雲前端團隊 ZooTeam 的可視化搭建系統 —— 魯班。

魯班是什麼？

魯班是一個基於業務組件快速生成頁面的搭建系統。

業務痛點

大量模塊重複開發。
配置複雜且分散，開發工作零碎且維護成本高。
需求排期時間長，溝通成本高：運營提個小需求，甚至改個頁面數據都需要等待排期、開發設計、編碼、提測、上線部署等流程。
Jenkins 項目編譯部署時間長。

魯班的優勢

提升用戶體驗：頁面採用靜態化方案，渲染及訪問速度更快。
提高穩定性：採用 Nginx 直接轉發的方案，頁面路由可用性保障及響應性能更具優勢，同時支持更健壯的容災方案，支持快速發版、回滾。
快速響應業務需求：通過組件化複用，能夠快速響應業務需求、提高研發人效。
更好的業務賦能：使得產品、運營等同學也能參與頁面的搭建，提升業務迭代效率和數據可用性。
更好的系統化能力：基於搭建系統，便於橫向和性能檢測系統、穩定性保障系統、運維部署系統、線上監控系統進行打通，形成系統級合力、複利。

魯班產生的原因

這是一個不得不說的故事，那年冬天…… 言歸正傳，我剛來公司時，其實公司有一個叫做 “lunatone” 的項目，這個怎麼讀呢：露娜湯姆，差不多是這樣吧。這個項目中也有一個陳舊的搭建系統，該系統基於柵格佈局，可以配置一點數據，組件可以拖拽、嵌套，看着還是挺酷的，但是問題也不少：

技術比較陳舊，用的是某個受衆較少的模板語言（我菜，我不會），反正沒有幾個人能維護。
柵格佈局？組件嵌套？對於運營、產品來說，柵格佈局、嵌套操作太複雜！
業務組件升級，系統需要重新編譯、發佈，編譯一次 20 分鐘，生命在流逝！！
搭建頁面分環境：測試環境搭的頁面，我還要在預發、線上重新搭一次，一個頁面搭建 3 次？生命在流逝！！！
沒有發佈控制，線上直接修改頁面就可以發佈，已經產生 NNN 次線上 P1 故障！別領工資了！！！！

基於以上原因，並在我們 “堂主” 大人的 “慫恿” 下毅然決然的開始了魯班之旅，一去不復返。

魯班的小夥伴們

物料庫（基礎）
自研埋點
性能檢測
投放系統
應用管理

魯班的 “始作俑者們”

魯班從前端架構 -> 後端架構 -> 數據庫設計 -> 部署方案設計 -> 容災方案設計，都是由前端開發人員進行設計、編碼。

魯班系統總覽

魯班使用流程

下圖爲魯班搭建頁面的使用步驟圖

從前臺管理系統說起，從使用者角度看魯班如何搭建一個頁面。

管理系統

站點管理
頁面管理
組件管理
模板管理
Schema 校驗工具
數據看板（“魯班的價值” 中會提到）

站點管理

站點即域名，不同環境對應不同的域名，比方說，測試站點：test.zhengcaiyun.cn；預發站點：staging.zhengcaiyun.cn 等。站點也是頁面新增的必要條件。站點管理只包括兩個操作：新增、編輯。

頁面管理

頁面是作爲魯班系統產物，“待遇” 肯定比較高，操作自然也不會少。接下來一一給大家介紹一下：

新增：新增頁面。
編輯：跳轉到 “可視化搭建平臺”。
配置：頁面數據修改。
複製：頁面拷貝。
地址：打開不同環境所對應的頁面。
性能：性能檢測（百策系統）。
發佈：發佈頁面到不同環境。
日誌：線上發佈日誌。
回滾：線上回滾到上一個版本。
上線 / 下線：頁面是否可被訪問。

組件管理

組件，我們也稱之爲物料，它作爲魯班系統的基礎需要被合理的管理。組件來源於 Git 庫，從 Git 同步信息到數據庫，並拉取源碼到服務器進行管理。組件管理頁面只需三個操作：

拉取新組件 / 版本：對比數據庫與 Git 庫，把數據庫沒有記錄的組件保存到數據庫，並從 Git 庫拉取件源碼到服務器。
更新：更新組件信息（版本，名稱，類別等）到數據庫，並拉取最新 Tag 源碼到服務器。
預覽：打開對應的組件預覽頁面。

模板管理

模板的主要功能是初始化頁面，同一業務類型使用同一個模板，便於管理，後續將對模板功能進行深度挖掘。

schema 校驗工具

開放此功能主要爲了方便開發人員開發過程中進行 Schema 校驗。左側輸入符合規範的 Schema 數據，右側會根據左側輸入顯示配置項。

可視化搭建平臺

可視化搭建平臺是魯班的靈魂。從圖中可以看到，左側是可以被用來搭建的所有組件，目前我們對組件進行了功能分類，後續將對用戶開放更多維度的分類，方便用戶進行組件查找。

中間部分是搭建區域，用戶可以在這個區域內看見頁面的實時效果，可以點擊組件進行組件數據配置。

右側是所有已經被頁面使用到的組件，可以對組件版本進行升級，也可以刪除不想使用的組件，還可以上下拖動調整組件在頁面中的順序。

在這個平臺上，用戶不僅可以搭建頁面、配置數據，還可以在真實環境對頁面進行實時預覽。

針對頁面，平臺提供自動埋點、配置數據糾錯功能。

針對組件，平臺提供組件更新、異常組件報警功能。

最後，點擊保存將頁面數據提交到數據庫。至於數據怎麼轉成靜態 HTML 作爲 “課後作業”，謹記“堂主” 名言：方法總比困難多。╭(●｀∀´●)╯╰(●’◡’●)╮

組件數據配置

組件數據配置支持 String、Number、Boolean、Array、Object、Color、Select、Upload、Two-dimensional Array（二維數組）等數據類型。

簡單類型示例：

二維數組示例：

通過以上步驟，我們就可以搭建出一個頁面，點擊發布到不同環境上即可。

路由模塊

先說說我們最常見的路由，就拿 Vue-Router 舉例：通過不同的 URL 訪問不同的頁面。

魯班動態路由

先進入 Nginx 層，通過 Nginx 通配規則跳轉到魯班服務器，在魯班服務器上再通過站點、區劃、URL、頁面狀態從數據控查找頁面，如果頁面存在，根據頁面標識從本地返回，如果本地不存在，嘗試從 OSS 獲取；如果頁面不存在，則返回 404 頁面。

技術棧

前端：Vue，公司前臺頁面是基於 Vue 實現的，魯班作爲前臺頁面搭建工具也順理成章的採用 Vue。
後端：Node（Egg.js）
數據庫：MySQL，喜歡 MongoDB 的同學不要噴我ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘。

魯班系統的核心代碼

這裏，我就把這價值一個億的代碼偷偷的告訴大家（希望自己不要被勸退 /(ㄒ o ㄒ)/~~，大家是不是要點個贊，評個論，雙擊 666，鐵汁們！！）

沒錯！這就是魯班系統的核心代碼，基於 Vue 的 “is” 特性實現。爲大家附上 Vue 官方文檔：https://cn.vuejs.org/v2/api/#is

魯班的價值

搭建頁面是魯班的核心功能，提效是魯班系統的核心價值，從 6 月中旬上線至今已經 3 月有餘，魯班得到了公司的高度認可，並被應用到各個重點業務線，從數據上來看，前途一片光明吶。(ง •̀_•́)ง

未完待續

魯班系統是前端體系化建設過程中不可或缺的一部分，也是前端提效的必經之路。它不僅避免了組件的重複開發，收斂了簡單配置後臺，並且爲運營角色賦能：運營可以直接在平臺上進行頁面搭建，通過測試後可隨時發版。

魯班系統的流程設計，遵循公司的 PMO 項目管理流程，但又不拘泥於此，做了必要的突破並化繁爲簡，被業務方和使用方廣泛認可。

魯班系統已和 Web 性能優化分析系統（百策系統）打通，能夠在上線時，查看頁面性能評分，不及格可不許發佈哦，如果你想了解百策系統，請點擊我們公衆號另一篇文章自動化 Web 性能優化分析方案

後續，我將爲大家一一講解魯班的系統架構、技術要點、數據庫設計、部署方案、容災策略等。歡迎大家先關注微信公衆號 “政採雲前端團隊”，或者掘金上關注 “政採雲前端團隊”，以便第一時間獲取最新信息。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/cgGj1tYJ2fMDtKC-Yy2bIQ

背景