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

原創不易，但願能關注下咱們，再順手點個贊~~

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

背景

隨公司業務不斷髮展，營銷活動、廣告、頁面改版等需求日益倍增，靠純人工擼代碼已經沒法跟上需求增加速度。加班？招人？顯得不夠明智，也不夠前端，提效也就成爲了關鍵。如何提效？從何入手？那不得不提的就是前端提效神器 —— 搭建系統，下文將從多個方面，向你們簡單介紹政採雲前端團隊 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 官方文檔：cn.vuejs.org/v2/api/#is

魯班的價值

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

未完待續

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

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

魯班系統已和 Web 性能優化分析系統（百策系統）打通，可以在上線時，查看頁面性能評分，不及格可不準發佈哦，若是你想了解百策系統，請點擊咱們的另外一篇原創文章自動化 Web 性能優化分析方案

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

招賢納士

招人，前端，隸屬政採雲前端大團隊（ZooTeam），50 餘個小夥伴正等你加入一塊兒浪～ 若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變「5年工做時間3年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

推薦閱讀

自動化 Web 性能優化分析方案

看完這篇，你也能把 React Hooks 玩出花

Vue 組件數據通訊方案總結