從零開(kāi)始的可視化搭建系統(tǒng)

時(shí)間：2023-07-12 04:39:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-12 04:39:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

從零開(kāi)始的可視化搭建系統(tǒng)：可視化搭建系統(tǒng)是一個(gè)有趣又神秘的話(huà)題，但事實(shí)上上手并不困難，結(jié)合過(guò)去云鳳蝶在中臺(tái)應(yīng)用搭建的探索，我們嘗試用一個(gè)碼農(nóng)想方設(shè)法偷懶的故事來(lái)教大家從零開(kāi)始寫(xiě)一個(gè)可視化搭建系統(tǒng)

開(kāi)始偷懶

阿炮是一個(gè)二十五歲的前端碼農(nóng)，在一家互聯(lián)網(wǎng)企業(yè)上班，日常的工作就是為一個(gè)營(yíng)銷(xiāo)站點(diǎn)切圖，奉守平靜但能偷懶盡量偷懶的生活哲學(xué)

但營(yíng)銷(xiāo)站點(diǎn)飛速變化，一周換一次廣告，阿炮每次都要提交、測(cè)試、發(fā)布、驗(yàn)證，阿炮想打破痛苦的重復(fù)生活

模版與數(shù)據(jù)

阿炮花了三天把代碼里經(jīng)常變化的內(nèi)容比如廣告地址提煉出來(lái)，并搞了一個(gè)配置頁(yè)面，讓運(yùn)營(yíng)來(lái)自己錄數(shù)據(jù)，最后寫(xiě)了一個(gè)渲染引擎，能夠把數(shù)據(jù)和模版結(jié)合渲染出來(lái)

<a href={{ config.banner.url }}><img src={{ config.banner.cover }} /></a>config: { banner: { cover: 'https://alicdn.com/guanggao.jpg', url: 'https:taobao.com/sth', },}運(yùn)營(yíng)原來(lái)需要阿炮轉(zhuǎn)填的地址，現(xiàn)在可以自己直接提交，阿炮偷了懶，運(yùn)營(yíng)也少了溝通的時(shí)間，大家都很開(kāi)心，這條路走對(duì)了！再看看其他頁(yè)面能不能也用這個(gè)辦法偷偷懶，得想個(gè)辦法把我無(wú)敵的配置器放上去

模塊化

通過(guò)模塊化完成復(fù)雜度的分治與復(fù)用

阿炮開(kāi)始把更多網(wǎng)站上的可能變化的信息挖成了配置，并錄入到系統(tǒng)，眼看著這個(gè)運(yùn)營(yíng)網(wǎng)站已經(jīng)快被挖空只剩骨架了，但配置項(xiàng)變成汪洋大海，阿炮現(xiàn)在很頭痛怎么分辨這些配置項(xiàng)究竟是干嘛的

正巧阿炮突然接到一個(gè)需求，公司開(kāi)辟了國(guó)外的業(yè)務(wù)，但文化差異導(dǎo)致模塊展示不完全相同，阿炮靈光乍現(xiàn)，給每個(gè)模塊起個(gè)名字，導(dǎo)航、廣告、老黃歷等等，然后按照模塊名來(lái)做二級(jí)管理！再通過(guò)標(biāo)志位表達(dá)整個(gè)模塊的啟用/關(guān)閉，這樣以后加新的需求，就開(kāi)新的模塊，按模塊名把動(dòng)態(tài)的東西挖出來(lái)，再放進(jìn)模版里

甚至模版就已經(jīng)能支持簡(jiǎn)單的模塊級(jí)的編排了！

布局系統(tǒng)

又過(guò)了一段時(shí)間，運(yùn)營(yíng)說(shuō)，贊助商預(yù)算調(diào)整，頂部的廣告模塊要一整個(gè)放到頁(yè)面底部，尺寸也要小一號(hào)

阿炮仔細(xì)盤(pán)算，按照這個(gè)趨勢(shì)，模塊的尺寸和位置關(guān)系也逐漸有了動(dòng)態(tài)性，即使是同樣一個(gè)模塊，也是有的寬有的窄，于是他準(zhǔn)備將原來(lái)的配置項(xiàng)抽出來(lái)，新開(kāi)到一個(gè)單獨(dú)的命名空間來(lái)集中表達(dá)模塊的尺寸和位置關(guān)系，引入最初版的布局系統(tǒng)

又過(guò)了一段時(shí)間，新來(lái)了一個(gè)天馬星空、超前設(shè)計(jì)的設(shè)計(jì)總監(jiān)，要做整站的設(shè)計(jì)改版：這幾個(gè)模塊我要擺一個(gè)三角形！阿炮原來(lái)的模塊編排的設(shè)計(jì)無(wú)法支撐了，于是他果斷把原來(lái)的排版引擎重寫(xiě)為自由布局模式，將基于數(shù)組順序的數(shù)據(jù)遷移到絕對(duì)位置

可視化拖拽

符合直覺(jué)的編輯體驗(yàn)

自由布局的描述力很強(qiáng)，但是手寫(xiě)坐標(biāo)太不直觀(guān)了，阿炮想起了平時(shí)使用的 Sketch、PS，要有一個(gè)畫(huà)布！拖到哪就是哪！自動(dòng)把位置信息記錄下來(lái)！于是阿炮花了幾個(gè)月搞了一個(gè)可視化拖拽的畫(huà)布出來(lái)

能自由拖拽以后，大家都很開(kāi)心，每天畫(huà)畫(huà)圖，需求就做好了，越來(lái)越多的人開(kāi)始使用阿炮的程序來(lái)搭建，但自由拖拽也漸漸暴露問(wèn)題，鼠標(biāo)操作自由度很高，但很難控制，模塊的位置總是不夠整齊，我們要設(shè)計(jì)上的自由性，但自由需要一些規(guī)則來(lái)約束，比如說(shuō)，像 Ant Design 一樣，保持八倍數(shù)的間距，阿炮深受啟發(fā)，又寫(xiě)了一個(gè)對(duì)齊和參考線(xiàn)系統(tǒng)來(lái)輔助拖拽

阿炮年終總結(jié)拿著可視化搭建系統(tǒng)說(shuō)，我只是想偷個(gè)懶而已，現(xiàn)在我只想過(guò)平靜的生活

提煉

什么是搭建系統(tǒng)

其實(shí)從第一次抽取變量，搭建系統(tǒng)就完成了，一個(gè)搭建系統(tǒng)就是基于一份模版語(yǔ)言的數(shù)據(jù)生產(chǎn)過(guò)程

• 模版引擎：數(shù)據(jù)的使用者，通過(guò)對(duì)應(yīng)用和業(yè)務(wù)解構(gòu)，抽象出合適和的數(shù)據(jù)定義和渲染引擎
• 編輯器：數(shù)據(jù)的生產(chǎn)者，通過(guò)高效的編輯模式來(lái)生產(chǎn)引擎所需的數(shù)據(jù)

演進(jìn)

在上述例子中，搭建系統(tǒng)從簡(jiǎn)單的變量到后續(xù)完善的可視化搭建不斷演進(jìn)，編輯器通過(guò)按模塊組織、可視化拖拽、對(duì)齊參考不斷提升數(shù)據(jù)生產(chǎn)效率，而模版引擎通過(guò)挖更多的洞、支持布局系統(tǒng)來(lái)支撐越來(lái)越復(fù)雜的需求，漸漸的從一個(gè)簡(jiǎn)單的運(yùn)營(yíng)系統(tǒng)搭建演化為一個(gè)豐滿(mǎn)的可視化搭建系統(tǒng)

每新增一種類(lèi)型的需求，就相應(yīng)的定義一份能夠描述它的數(shù)據(jù)，并通過(guò)編輯器生產(chǎn)出來(lái)，最后在運(yùn)行時(shí)加入能夠翻譯這部分功能的代碼，這樣搭建系統(tǒng)整體就可以不斷完善和進(jìn)化

模版引擎

模版引擎是搭建系統(tǒng)的核心，決定了搭建系統(tǒng)的最大復(fù)雜度和完備性，通?？梢酝ㄟ^(guò)將目標(biāo)應(yīng)用解構(gòu)為配置項(xiàng)來(lái)提取模版引擎，抽象程度越來(lái)越高，就能做越通用的需求，比如 CMS 系統(tǒng)通過(guò)可拓展的模版來(lái)使站點(diǎn)的搭建范圍是開(kāi)放式的，相比之下，點(diǎn)餐系統(tǒng)商家錄入商品信息也是一種模版引擎，但只能解決固定場(chǎng)景的問(wèn)題，云鳳蝶的模版引擎請(qǐng)參考隔壁文章《云鳳蝶可視化搭建的推導(dǎo)與實(shí)現(xiàn)》


我們可以把一個(gè)應(yīng)用解構(gòu)為模塊 - 屬性 - 值的架構(gòu)模式，通過(guò)聲明式的方式把模塊、模塊關(guān)系組裝起來(lái)，同時(shí)兼具足夠的拓展性

• 模塊：可重用最小封裝單元
• 屬性：組件的行為的具體體現(xiàn)，包括千人千面的基礎(chǔ)屬性與通用能力，比如布局、條件渲染
• 值：聯(lián)系數(shù)據(jù)流、綁定的載體，比如單向綁定、雙向綁定

模塊

引擎的一大部分拓展性是由模塊自身的可拓展性來(lái)承擔(dān)的，模版不支持的很多邏輯都可以封裝在模塊內(nèi)部，再通過(guò)將模塊接入模版引擎完成拓展，因此，很多搭建系統(tǒng)都支持導(dǎo)入各種類(lèi)型的組件，比如 React、Vue、Angular 組件

屬性

每個(gè)模塊通常會(huì)有自身的一些屬性，比如 React 體系下的 props，就是組件向外暴露的屬性，除此之外，引擎還可以賦予組件一些平臺(tái)級(jí)的通用屬性，比如自由布局能力就是組件本身不具備，是外層封裝賦予的屬性，通過(guò)賦予屬性，可以以聲明式的方式極大的拓展組件的橫向能力，比如

• 邏輯控制，if、repeat、switch，組件可以根據(jù)條件做不同的渲染
• 交互行為，跳轉(zhuǎn)、Loading 等

值

除了幾種基本類(lèi)型的值外，還可以通過(guò)拓展一些實(shí)體類(lèi)型的值，完成一些復(fù)雜邏輯的封裝，比如

• 維系模塊之間的數(shù)據(jù)流轉(zhuǎn)的關(guān)系提取為訂閱類(lèi)型
• 遠(yuǎn)端數(shù)據(jù)加載封裝為 Connector 類(lèi)型的值

對(duì)于組件來(lái)說(shuō)，通過(guò)將 dataSource 像設(shè)為一個(gè)靜態(tài)的數(shù)據(jù)一樣設(shè)置為一個(gè) Connector 類(lèi)型的值，就具備了掛載時(shí)發(fā)起請(qǐng)求，并把請(qǐng)求結(jié)果設(shè)置到 dataSource 屬性上的能力

編輯器

編輯器很容易起步，萬(wàn)事都可以用一個(gè) Monaco 編輯器來(lái)編輯，但用戶(hù)即使對(duì)照文檔也很難寫(xiě)出符合要求的數(shù)據(jù)，在此之上，我們可以做更細(xì)粒度的拆分來(lái)逐步編輯器的可用性

屬性面板

按照上述模塊 - 屬性 - 值的架構(gòu)模式，每個(gè)應(yīng)用由模塊組成，每個(gè)模塊的行為由模塊本身的屬性取值決定，因此可以把對(duì)站點(diǎn)的編輯分解到每個(gè)模塊的編輯

結(jié)合 Chrome 和常見(jiàn)編輯器的設(shè)計(jì)，我們可以為每個(gè)模塊配備一個(gè)屬性面板，根據(jù)模版自身的屬性定義與框架通用屬性的定義，推斷出最合適的渲染器，比如對(duì)于字符串類(lèi)型，我們可以使用輸入框來(lái)編輯，對(duì)于布爾類(lèi)型，我們可以使用多選框來(lái)編輯，詳細(xì)可以參考隔壁文章《開(kāi)放的組件定義與屬性面板》

可視化拖拽

模塊的位置與布局信息使用數(shù)據(jù)來(lái)直接表達(dá)可能并不直觀(guān)，我們可以像阿炮一樣，使用畫(huà)布中可視化的拖拽來(lái)查看和編輯，再花上一段時(shí)間來(lái)進(jìn)一步提升效率與準(zhǔn)確率，參考隔壁文章《云鳳蝶如何打造媲美 sketch 的自由畫(huà)布》

所以寫(xiě)一個(gè)可視化搭建系統(tǒng)需要幾步？

三步：

• 分析業(yè)務(wù)特征，抽象渲染引擎與數(shù)據(jù)
• 寫(xiě)一個(gè)配套的信息錄入系統(tǒng)
• 不斷的完善它們

回過(guò)頭再看這句話(huà)：搭建系統(tǒng)其實(shí)就是一個(gè)基于模版語(yǔ)言的數(shù)據(jù)生產(chǎn)過(guò)程

好了，道理你都懂了，再加上其他細(xì)節(jié)，自己動(dòng)手寫(xiě)一個(gè)搭建系統(tǒng)吧

---

未來(lái)已來(lái)，時(shí)不我待！

云鳳蝶招聘前端、Java、PD、設(shè)計(jì)崗位，未來(lái)等你共創(chuàng)！

如果你感興趣，歡迎聯(lián)系 chenyu@antfin.com 或 shuai.shao@antfin.com