首頁(yè)|必讀|視頻|專(zhuān)訪|運(yùn)營(yíng)|制造|監(jiān)管|大數(shù)據(jù)|物聯(lián)網(wǎng)|量子|元宇宙|博客|特約記者
手機(jī)|互聯(lián)網(wǎng)|IT|5G|光通信|人工智能|云計(jì)算|芯片報(bào)告|智慧城市|移動(dòng)互聯(lián)網(wǎng)|會(huì)展
首頁(yè) >> 技術(shù) >> 正文

五分鐘技術(shù)趣談 | 表單引擎@and/engine是如何讓前端開(kāi)發(fā)飛起來(lái)的?

2021年4月26日 16:32  移動(dòng)Labs  作 者:姚丹丹

伴隨著5G時(shí)代的來(lái)臨,在移動(dòng)互聯(lián)網(wǎng)領(lǐng)域以及物聯(lián)網(wǎng)領(lǐng)域都會(huì)有更多場(chǎng)景和交互需要呈現(xiàn),5G通信將使前沿技術(shù)逐漸整合到前端開(kāi)發(fā)中,未來(lái)更多的社會(huì)應(yīng)用場(chǎng)景將實(shí)現(xiàn)數(shù)據(jù)化、智能化,所以未來(lái)前端會(huì)觸及到更多的應(yīng)用場(chǎng)景同時(shí)展現(xiàn)給用戶(hù)更多能看到感受到的信息。

作者:姚丹丹

單位:中國(guó)移動(dòng)杭州研發(fā)中心

上一期

Labs帶大家認(rèn)識(shí)了

5G技術(shù)的更多可能性

那這期我們就搞搞別的技術(shù)?

......

俗話說(shuō)得好

程序員千萬(wàn)不要和產(chǎn)品經(jīng)理聊天

因?yàn)樘炝耐炅?/P>

產(chǎn)品的需求有了

你的代碼在哪里?

 

●  表單引擎@and/engine  ●

表單引擎@and/engine的出現(xiàn)終于改變了這種局面。程序員終于可以愉快地和產(chǎn)品聊天了。

產(chǎn)品:我要在線接入合作伙伴

開(kāi)發(fā):OK

產(chǎn)品:我要合作伙伴的公司名稱(chēng)、公司性質(zhì)、營(yíng)業(yè)執(zhí)照、銀行開(kāi)戶(hù)許可、業(yè)務(wù)相關(guān)資質(zhì)。。。。

開(kāi)發(fā):OK

產(chǎn)品:公司名稱(chēng)不能有特殊字符、公司性質(zhì)只能選擇、營(yíng)業(yè)執(zhí)照要png圖片、銀行開(kāi)戶(hù)許可可以是PNG或者JPG且不能超過(guò)2M。。。。。

開(kāi)發(fā):OK

產(chǎn)品:好的你給我評(píng)估一下開(kāi)發(fā)時(shí)間

開(kāi)發(fā):好了,你看一下是否符合你的需求

產(chǎn)品:What??

 

下面來(lái)看一下這如高鐵一般的開(kāi)發(fā)速度:

 

配置化開(kāi)發(fā)演示

 

用引擎開(kāi)發(fā)的和家親生態(tài)合作平臺(tái)

只要寫(xiě)一份描述性的json格式配置文件,頁(yè)面布局、業(yè)務(wù)邏輯、校驗(yàn)條件、聯(lián)動(dòng)效果、用戶(hù)交互提示都有了,開(kāi)發(fā)者完全不用關(guān)心底層實(shí)現(xiàn),原來(lái)至少需要開(kāi)發(fā)一天的頁(yè)面,幾分鐘就能配置出來(lái)。我們是怎么實(shí)現(xiàn)這樣極速的開(kāi)發(fā)體驗(yàn)的呢?因?yàn)槲覀冇凶匝斜韱我鍬and/engine,表單引擎是如何實(shí)現(xiàn)通過(guò)配置文件直接生成可交付的頁(yè)面的呢?引擎所需的配置文件主要分為3個(gè)部分,schema(描述頁(yè)面整體結(jié)構(gòu)),components(描述所需組件列表及屬性),conditions(描述聯(lián)動(dòng)條件)。引擎首先會(huì)解析schema結(jié)構(gòu),schema只包含id和children兩個(gè)關(guān)鍵字,組件之間可以通過(guò)children進(jìn)行無(wú)限的任意嵌套來(lái)表示復(fù)雜的頁(yè)面布局,引擎遍歷schema結(jié)構(gòu)遞歸渲染出整體布局,第二步利用components中的組件屬性、conditions中的聯(lián)動(dòng)條件以及初始化數(shù)據(jù)initModels計(jì)算首次渲染所需數(shù)據(jù),計(jì)算后的數(shù)據(jù)傳遞給所有組件進(jìn)行最終渲染,下面是表單引擎首次渲染的實(shí)現(xiàn)流程:

 

表單引擎渲染流程

當(dāng)用戶(hù)進(jìn)行輸入操作時(shí),引擎通過(guò)全局的重新計(jì)算和重渲染來(lái)實(shí)現(xiàn)組件內(nèi)容校驗(yàn)、錯(cuò)誤提示、組件之間聯(lián)動(dòng)等等,最初的數(shù)據(jù)處理流程如下:

 

數(shù)據(jù)處理流程

但是當(dāng)我們開(kāi)發(fā)一個(gè)比較復(fù)雜的頁(yè)面時(shí),很快出現(xiàn)了問(wèn)題,開(kāi)發(fā)速度是飛快,但是用戶(hù)的體驗(yàn)就沒(méi)有那么絲滑了,當(dāng)用戶(hù)每次在表單中輸入內(nèi)容時(shí),引擎為了實(shí)現(xiàn)動(dòng)態(tài)聯(lián)動(dòng)和實(shí)時(shí)校驗(yàn),會(huì)重新計(jì)算整體數(shù)據(jù)并傳遞給所有組件,所有組件在接收到新數(shù)據(jù)后會(huì)觸發(fā)重渲染,而大量渲染是非常損耗瀏覽器性能的,用戶(hù)操作起來(lái)可以說(shuō)是一步一卡。

由引擎智能生成的頁(yè)面和傳統(tǒng)方式開(kāi)發(fā)的頁(yè)面最大的區(qū)別在于,傳統(tǒng)開(kāi)發(fā)是針對(duì)某一個(gè)具體頁(yè)面進(jìn)行的,開(kāi)發(fā)者可根據(jù)業(yè)務(wù)關(guān)系知道哪些組件之間是有關(guān)聯(lián)的,組件的重渲染行為可以根據(jù)具體的業(yè)務(wù)關(guān)系來(lái)編寫(xiě),但引擎是無(wú)法預(yù)知組件之間的動(dòng)態(tài)關(guān)聯(lián)關(guān)系的,某些組件的屬性支持配置函數(shù),也就是只有在數(shù)據(jù)流的終點(diǎn)”組件層”才能確切地知道改變后的數(shù)據(jù)。為了保證全局的實(shí)時(shí)校驗(yàn)和動(dòng)態(tài)聯(lián)動(dòng),每個(gè)組件都需要監(jiān)聽(tīng)全局?jǐn)?shù)據(jù),一旦全局?jǐn)?shù)據(jù)中有一部分發(fā)生改變就會(huì)傳遞給所有組件,這樣就導(dǎo)致了冗余的重渲染,當(dāng)頁(yè)面組件較多或者組件內(nèi)容較復(fù)雜時(shí)用戶(hù)就會(huì)感覺(jué)到明顯的卡頓。

高效的智能化開(kāi)發(fā)是我們想要的,絲滑的用戶(hù)體驗(yàn)也是我們想要的。理想的狀態(tài)是每個(gè)組件既可以監(jiān)聽(tīng)到全局?jǐn)?shù)據(jù)的變化,但又只在自身數(shù)據(jù)受影響時(shí)進(jìn)行重渲染,也就是每個(gè)組件既要耳聽(tīng)八方,又要無(wú)視無(wú)關(guān)組件,聽(tīng)起來(lái)似乎是很矛盾的一件事,優(yōu)化一度陷入了僵局,但是我們最終做到了。

既然重渲染才是瀏覽器的性能殺手,那么我們就可以將渲染行為獨(dú)立出來(lái),把原來(lái)的組件轉(zhuǎn)化為純渲染組件,在每一個(gè)組件外包裹一層獨(dú)立數(shù)據(jù)校驗(yàn)層,所有的數(shù)據(jù)改變經(jīng)過(guò)統(tǒng)一計(jì)算層計(jì)算后會(huì)首先傳遞給數(shù)據(jù)校驗(yàn)層,該層只做數(shù)據(jù)的接收、計(jì)算、比較,計(jì)算后如果發(fā)現(xiàn)本組件前后數(shù)據(jù)不一致才傳遞給真正的組件渲染層進(jìn)行渲染,如果前后數(shù)據(jù)一致則忽略此次改變。這樣我們就實(shí)現(xiàn)了組件之間的任意聯(lián)動(dòng)效果并且只發(fā)生最小重渲染。新的數(shù)據(jù)流圖如下:

 

優(yōu)化后的數(shù)據(jù)處理流程

優(yōu)化后的引擎已經(jīng)可以做到開(kāi)發(fā)速度和用戶(hù)體驗(yàn)齊飛,都如絲般順滑。當(dāng)表單引擎逐漸應(yīng)用到項(xiàng)目組的所有項(xiàng)目,并趨于穩(wěn)定后,我們又不滿(mǎn)足于現(xiàn)狀了,因?yàn)槌吮韱雾?yè)我們還有千萬(wàn)種頁(yè)面需求,既然表單可以配置化開(kāi)發(fā),那其他頁(yè)面是否也可以配置化開(kāi)發(fā)?因?yàn)楸韱螌?duì)于引擎來(lái)說(shuō)只是預(yù)置的組件而已,同樣的機(jī)制我們可以應(yīng)用到所有組件,另外,我們既然做到了配置化開(kāi)發(fā),是否可以進(jìn)一步做到0開(kāi)發(fā),直接可視化生成頁(yè)面?想想都有點(diǎn)激動(dòng)呢。

于是我們提取了引擎核心部分,也就是結(jié)構(gòu)渲染層、計(jì)算層、獨(dú)立數(shù)據(jù)校驗(yàn)層,將組件層徹底解耦,同時(shí)開(kāi)放接入組件的方法useComponent,獨(dú)立出一個(gè)可插拔組件的核心引擎,這樣底層的組件就可以根據(jù)業(yè)務(wù)需求隨意替換了,比如運(yùn)營(yíng)類(lèi)頁(yè)面需要比較多的圖片和視頻,就可以使用useComponent接入圖片模塊和視頻模塊生運(yùn)營(yíng)引擎;數(shù)據(jù)可視化頁(yè)面需要較多的圖表也可以使用useComponent接入圖表模塊生成可視化引擎。

不同的模塊需要不同的配置項(xiàng),如圖片模塊需要上傳圖片和跳轉(zhuǎn)鏈接,視頻模塊除了上傳視頻可能還需要自定義背景和封面等等,每個(gè)模塊只要增加一個(gè)string類(lèi)型的字段存儲(chǔ)轉(zhuǎn)換后的json配置文件即可基于表單引擎渲染出一個(gè)獨(dú)立的配置頁(yè)面。

表單引擎和運(yùn)營(yíng)引擎組合即可快速搭建一個(gè)可視化運(yùn)營(yíng)搭建系統(tǒng)。最終我們基于表單引擎孵化的可視化運(yùn)營(yíng)搭建系統(tǒng)LEGO是這樣的:

 

可視化編輯器

用編輯器生成的頁(yè)面是這樣的:

 

LEGO系統(tǒng)上線一個(gè)月內(nèi)已為智能組網(wǎng)平臺(tái)搭建了30多個(gè)運(yùn)營(yíng)頁(yè)面,服務(wù)裝維人員十萬(wàn)余人,而開(kāi)發(fā)和測(cè)試投入都是0,真正實(shí)現(xiàn)了0開(kāi)發(fā)。從普通開(kāi)發(fā)到配置化開(kāi)發(fā),到最后的0開(kāi)發(fā),表單引擎就是這樣讓前端開(kāi)發(fā)速度飛起來(lái)的。

編 輯:章芳
聲明:刊載本文目的在于傳播更多行業(yè)信息,本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。如網(wǎng)站內(nèi)容涉及作品版權(quán)和其它問(wèn)題,請(qǐng)?jiān)?0日內(nèi)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除內(nèi)容。本站聯(lián)系電話為86-010-87765777,郵件后綴為#cctime.com,冒充本站員工以任何其他聯(lián)系方式,進(jìn)行的“內(nèi)容核實(shí)”、“商務(wù)聯(lián)系”等行為,均不能代表本站。本站擁有對(duì)此聲明的最終解釋權(quán)。
相關(guān)新聞              
 
人物
工信部張?jiān)泼鳎捍蟛糠謬?guó)家新劃分了中頻段6G頻譜資源
精彩專(zhuān)題
專(zhuān)題丨“汛”速出動(dòng) 共筑信息保障堤壩
2023MWC上海世界移動(dòng)通信大會(huì)
中國(guó)5G商用四周年
2023年中國(guó)國(guó)際信息通信展覽會(huì)
CCTIME推薦
關(guān)于我們 | 廣告報(bào)價(jià) | 聯(lián)系我們 | 隱私聲明 | 本站地圖
CCTIME飛象網(wǎng) CopyRight © 2007-2024 By CCTIME.COM
京ICP備08004280號(hào)-1  電信與信息服務(wù)業(yè)務(wù)經(jīng)營(yíng)許可證080234號(hào) 京公網(wǎng)安備110105000771號(hào)
公司名稱(chēng): 北京飛象互動(dòng)文化傳媒有限公司
未經(jīng)書(shū)面許可,禁止轉(zhuǎn)載、摘編、復(fù)制、鏡像