物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)前端組件化設(shè)計及優(yōu)化

陳佳瀚，曾祥威，洪遠霖，李賢

（廣東工業(yè)大學(xué)信息工程學(xué)院，廣州510006）

0 引言

5G通信將大大加速物聯(lián)網(wǎng)的發(fā)展，物聯(lián)網(wǎng)領(lǐng)域人才需求迎來大幅度增長，物聯(lián)網(wǎng)領(lǐng)域?qū)I(yè)人才的培養(yǎng)變得更加重要。如何更好地培養(yǎng)學(xué)生的專業(yè)物聯(lián)網(wǎng)應(yīng)用技能、充分發(fā)揮學(xué)生的實際動手能力，這是目前需要解決的關(guān)鍵問題［1－3］。過去傳統(tǒng)物聯(lián)網(wǎng)實訓(xùn)方式主要是課堂講解配合實訓(xùn)箱實操，讓學(xué)生動手操作配置各種物聯(lián)網(wǎng)設(shè)備，完成末端設(shè)備的互聯(lián)互通，并且根據(jù)固定物聯(lián)網(wǎng)場景實現(xiàn)簡單的設(shè)備聯(lián)動等。

為實現(xiàn)更好的物聯(lián)網(wǎng)教學(xué)實訓(xùn)效果，近年來已有基于不同軟硬件平臺的實訓(xùn)系統(tǒng)開發(fā)方案［4－6］，通過傳統(tǒng)嵌入式開發(fā)的方式實現(xiàn)了物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)，但仍存在以下問題：

（1）應(yīng)用層開發(fā)復(fù)雜度高：采用傳統(tǒng)嵌入式模式開發(fā)的實訓(xùn)系統(tǒng)耦合度高，開發(fā)人員必須兼顧物聯(lián)網(wǎng)感知層和實訓(xùn)應(yīng)用層的開發(fā)。感知層物聯(lián)網(wǎng)設(shè)備千差萬別，底層協(xié)議也各不相同，同時應(yīng)用層開發(fā)涉及與硬件開發(fā)不同的開發(fā)語言和技術(shù)棧，增加了系統(tǒng)前期的開發(fā)成本和后期的維護成本。

基于Web服務(wù)的物聯(lián)網(wǎng)系統(tǒng)（Web of Things，WoT）［7－8］，可用于解決以上問題。與傳統(tǒng)IoT系統(tǒng)不同，WoT可以利用Web標(biāo)準(zhǔn)快速互聯(lián)生態(tài)系統(tǒng)中的嵌入式設(shè)備，此外，Web應(yīng)用具備跨平臺優(yōu)勢，可方便地運行在多平臺瀏覽器中，可以方便用戶使用多終端物聯(lián)網(wǎng)應(yīng)用。而對于開發(fā)者來說，前端框架Vue、React的出現(xiàn)，讓物聯(lián)網(wǎng)Web應(yīng)用具備更豐富的交互功能，并且易于開發(fā)維護，非常適合應(yīng)用于物聯(lián)網(wǎng)系統(tǒng)開發(fā)中。按照Web開發(fā)中的前后端定義，本文將物聯(lián)網(wǎng)應(yīng)用層相關(guān)模塊稱為“前端”，將網(wǎng)絡(luò)層相關(guān)模塊稱為“后端”。

如圖1所示，在分析物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)各部分功能與特點的基礎(chǔ)上，考慮到感知層實訓(xùn)設(shè)備的資源受限性和后期的擴展性等因素［9－12］，本文采用基于表述性狀態(tài)傳遞（Representational State Transfer，REST）風(fēng)格的Web物聯(lián)網(wǎng)軟件開發(fā)體系，將感知層實訓(xùn)設(shè)備和應(yīng)用層實訓(xùn)應(yīng)用互聯(lián)起來，構(gòu)建物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)。

圖1 物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)架構(gòu)對比

對比傳統(tǒng)物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)，主要特點有：

（1）前后端分離開發(fā)：通過前后端分離的開發(fā)模式，使實訓(xùn)系統(tǒng)實現(xiàn)開發(fā)解耦。前端開發(fā)人員專注于各種物聯(lián)網(wǎng)實訓(xùn)場景的交互呈現(xiàn)，后端開發(fā)人員可專注于解決物聯(lián)網(wǎng)感知層的數(shù)據(jù)接入問題，互不干擾，可實現(xiàn)并行開發(fā)。

（2）組件庫設(shè)計：前端基于Vue構(gòu)建物聯(lián)網(wǎng)實訓(xùn)組件庫，通過組件復(fù)用的方式，實現(xiàn)基礎(chǔ)實訓(xùn)、智能家居、工業(yè)生產(chǎn)等多場景實訓(xùn)項目的快速開發(fā)，解決應(yīng)用層開發(fā)復(fù)雜度高的問題。

（3）渲染性能優(yōu)化：為減輕瀏覽器壓力，提升實訓(xùn)應(yīng)用使用體驗，提出一種針對高渲染負(fù)荷實訓(xùn)場景的前端性能優(yōu)化方法，通過數(shù)據(jù)凍結(jié)的方式，提升實訓(xùn)應(yīng)用在大規(guī)模結(jié)點場景下的前端性能表現(xiàn)，解決傳統(tǒng)實訓(xùn)應(yīng)用體驗不佳的問題。

1 前后端分離結(jié)構(gòu)設(shè)計

早期的Web開發(fā)以服務(wù)端渲染模式（Server-Side Rendering，SSR）為主，即客戶端HTML頁面是由后端服務(wù)器進行渲染。服務(wù)器直接生產(chǎn)渲染好對應(yīng)的HTML頁面，返回給客戶端進行展示。當(dāng)Web應(yīng)用需要請求不同的路徑內(nèi)容時，交給服務(wù)器來進行處理，服務(wù)器渲染好整個頁面，并且將頁面返回給客戶端。通過以上流程渲染完成的頁面，不需要單獨加載額外文件，可直接發(fā)送到客戶端（瀏覽器）進行展示。然而，在開發(fā)階段，整個頁面的模塊由后端人員負(fù)責(zé)開發(fā)、維護，在面對復(fù)雜的業(yè)務(wù)需求時，增加了系統(tǒng)的開發(fā)成本。同時，客戶端（前端）人員在進行頁面開發(fā)時，需要通過PHP和Java等不同開發(fā)技術(shù)來編寫頁面代碼，增加了系統(tǒng)開發(fā)的難度。此外，系統(tǒng)代碼數(shù)據(jù)與業(yè)務(wù)邏輯耦合度較高，不利于實訓(xùn)系統(tǒng)后期的擴展和維護。

袁傳璋之推算固亦準(zhǔn)《博物志》，但脫開《博物志》，其所推算亦能成立。人或以為袁氏“基點”說不能成立，其實這不過是找個支點，也無可無不可，我們覺得找一個“支點”或云“基點”，還是可以展開司馬遷生年的探討的。

為此，本文基于前后端分離模式構(gòu)建單頁面富應(yīng)用（Single Page Application，SPA）。如圖2所示，區(qū)別于服務(wù)端渲染，前后端分離結(jié)構(gòu)［13］最大的特點是實現(xiàn)了開發(fā)解耦。對于物聯(lián)網(wǎng)Web應(yīng)用開發(fā)來說，前端開發(fā)人員可以專注于各種物聯(lián)網(wǎng)場景的交互實現(xiàn)，后端開發(fā)人員可以專注于解決物聯(lián)網(wǎng)感知層的數(shù)據(jù)接入問題，實現(xiàn)并行開發(fā)。

圖2 物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)總體架構(gòu)

前端方面，即實訓(xùn)系統(tǒng)應(yīng)用層，利用前端框架Vue構(gòu)建物聯(lián)網(wǎng)組件庫，通過前端路由管理器（Vue Router）進行細粒度的導(dǎo)航控制，靈活地管理前端UI組件，實現(xiàn)更復(fù)雜的頁面交互效果。同時利用前端開發(fā)活躍的組件生態(tài)，可將數(shù)據(jù)可視化等技術(shù)引入實訓(xùn)系統(tǒng)中，提升物聯(lián)網(wǎng)實訓(xùn)課程的教學(xué)效果。

后端方面，得益于該模式的松耦合性和靈活性，后端可選擇統(tǒng)一Web技術(shù)棧構(gòu)建實訓(xùn)系統(tǒng)后端服務(wù)器［14］。后端基于Node.js的Web開發(fā)框架Express構(gòu)建物聯(lián)網(wǎng)中間件服務(wù)器，除數(shù)據(jù)存儲外，為前端實訓(xùn)應(yīng)用提供JSON格式的數(shù)據(jù)接口服務(wù)。通過異步請求框架Axios（HTTP庫），實訓(xùn)前端應(yīng)用開發(fā)者可以很方便地調(diào)用后端接口，從而專注于實訓(xùn)頁面業(yè)務(wù)實現(xiàn)，有效提高物聯(lián)網(wǎng)實訓(xùn)應(yīng)用的開發(fā)效率。

2 前端組件庫設(shè)計及應(yīng)用

2.1 前端組件需求分析

實訓(xùn)系統(tǒng)需要支持物聯(lián)網(wǎng)實踐教學(xué)，將實訓(xùn)設(shè)備的控制處理與實際實訓(xùn)項目進行一一對應(yīng)，提供從物聯(lián)網(wǎng)基礎(chǔ)、物聯(lián)網(wǎng)辦公應(yīng)用到物聯(lián)網(wǎng)生產(chǎn)典型應(yīng)用實訓(xùn)的課程內(nèi)容，設(shè)備功能配置具有開放性，同時便于學(xué)生動手實踐。整體功能樹如圖3所示，物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)Web應(yīng)用主要分為三大模塊：后臺管理模塊、實訓(xùn)模塊（學(xué)生端）、實訓(xùn)模塊（教師端）。

圖3 實訓(xùn)系統(tǒng)前端功能模塊設(shè)計

重點對平臺整體進行功能粗粒度分類，如表1所示，通過分析各個模塊功能重復(fù)情況，結(jié)合功能需求等級，整理出實訓(xùn)系統(tǒng)功能需求等級分布情況。其中實訓(xùn)模塊（學(xué)生端）為核心功能模塊，包含基礎(chǔ)實訓(xùn)應(yīng)用、智能家居、工業(yè)生產(chǎn)三大實訓(xùn)應(yīng)用場景，涉及設(shè)備數(shù)據(jù)可視化、實時交互、設(shè)備拓?fù)浣Y(jié)構(gòu)展示等實訓(xùn)功能。

表1 實訓(xùn)系統(tǒng)功能需求等級分布情況（＋代表需求等級低、＋＋代表中等、＋＋＋代表高）

2.2 物聯(lián)網(wǎng)實訓(xùn)組件庫應(yīng)用

由表1分析可知，實訓(xùn)模塊（學(xué)生端）涉及功能復(fù)雜，且不同場景下存在較多相似功能模塊。本文基于Vue構(gòu)建實訓(xùn)系統(tǒng)SPA應(yīng)用，在前端設(shè)計物聯(lián)網(wǎng)組件庫，根據(jù)不同實訓(xùn)場景，將頁面結(jié)構(gòu)、功能模塊拆分成多個子組件，組件與組件之間相互獨立，也可相互嵌入，分別進行針對性開發(fā)，以此實現(xiàn)模塊復(fù)用，解決應(yīng)用層開發(fā)效率低等問題。

如圖4所示，以“基礎(chǔ)實訓(xùn)3-ZigBee的綜合應(yīng)用實訓(xùn)”為例，根據(jù)基礎(chǔ)實訓(xùn)功能需要，將實訓(xùn)頁面拆分以下主要功能模塊：①主題信息組件：展示當(dāng)前實訓(xùn)課程基本情況，包含操作臺編號、小組人數(shù)、實訓(xùn)時間、授課教師等基本信息；②操作臺組件：根據(jù)當(dāng)前實訓(xùn)課程網(wǎng)絡(luò)拓?fù)鋱D，提供可交互的可視化操作臺，直觀展示當(dāng)前操作臺設(shè)備連接情況；③設(shè)備參數(shù)組件：學(xué)生完成設(shè)備基本配置后，可點擊按鈕獲取感知層設(shè)備詳細信息；④網(wǎng)絡(luò)架構(gòu)組件：簡要展示實訓(xùn)設(shè)備網(wǎng)絡(luò)架構(gòu)圖。最后，通過主文件index.vue可以靈活地引入以上子組件。

圖4 基礎(chǔ)實訓(xùn)Web應(yīng)用功能模塊拆分

圖4中，（1）主題信息組件，（2）操作臺組件，（3）設(shè)備參數(shù)組件，（4）網(wǎng)絡(luò)架構(gòu)組件，以下類同。

利用已有統(tǒng)一實訓(xùn)組件，可以高效率地開發(fā)出其他實訓(xùn)課程應(yīng)用頁面。如圖5、圖6所示，智能家居實訓(xùn)與工業(yè)生產(chǎn)實訓(xùn)基本頁面功能相似，因此可基于上述可視化操作臺等組件進行二次開發(fā)，快速拓展出其他實訓(xùn)場景，避免重復(fù)開發(fā)，提升開發(fā)效率。

圖5 智能家居實訓(xùn)功能實現(xiàn)

圖6 工業(yè)生產(chǎn)實訓(xùn)功能實現(xiàn)

此外，前端可以通過引入第三方庫的方式，構(gòu)建公共功能組件庫。如圖7所示，通過物聯(lián)網(wǎng)組件庫和第三方組件庫組合，可以快速完成課堂管理和設(shè)備管理等功能模塊。隨著物聯(lián)網(wǎng)組件庫的不斷豐富，后期可以滿足更多類型、更加復(fù)雜的實訓(xùn)場景應(yīng)用需求。

圖7 實訓(xùn)系統(tǒng)部分功能實現(xiàn)（教師端）

3 前端渲染性能優(yōu)化

3.1 優(yōu)化背景及原理

SPA將服務(wù)器端的頁面渲染邏輯和業(yè)務(wù)控制邏輯提前到瀏覽器層級上，減輕了服務(wù)器的壓力，加強了前端的異步展示的能力，同時也將前端渲染壓力放在了本地瀏覽器上。隨著物聯(lián)網(wǎng)實訓(xùn)場景的豐富，前端實訓(xùn)應(yīng)用交互會變得更加復(fù)雜，在硬件性能不高的終端上，會造成頁面渲染緩慢，甚至瀏覽器崩潰的問題。

為了同時兼顧開發(fā)效率與Web前端性能問題，各個主流開發(fā)框架相繼推出了性能瓶頸優(yōu)化方案，其核心為Diff算法的應(yīng)用［15－16］。改進Diff算法可以提升前端性能，但隨著開發(fā)框架的更迭，Vue融合了snabbdom庫等其他優(yōu)秀改進算法，性能表現(xiàn)已十分出眾，因此改進Diff算法提升有限。此外，改進Diff算法需改動框架源碼，無法針對特定前端組件進行優(yōu)化，靈活度低，針對性較差。

針對以上情況，本文從物聯(lián)網(wǎng)組件角度，提出一種針對物聯(lián)網(wǎng)實訓(xùn)組件的性能優(yōu)化方法：組件庫開發(fā)前，在數(shù)據(jù)展示需求層面，首先對物聯(lián)網(wǎng)組件進行分類，將其分為常規(guī)組件和靜態(tài)組件。將需要大數(shù)據(jù)量展示的組件定義為靜態(tài)組件，然后通過Object.freeze（）方法，將靜態(tài)組件進行數(shù)據(jù)凍結(jié)。

優(yōu)化原理：如圖8所示，在進行頁面開發(fā)時，Vue默認(rèn)會對每個數(shù)組數(shù)據(jù)的每一層屬性，添加雙向數(shù)據(jù)綁定機制，實現(xiàn)動態(tài)響應(yīng)效果。組件數(shù)組對象越大，雙向數(shù)據(jù)綁定耗時越多，而利用Object.freeze（）數(shù)據(jù)凍結(jié)的方法可以避免雙向綁定，減少頁面整體渲染耗時，提升性能表現(xiàn)。物聯(lián)網(wǎng)應(yīng)用中經(jīng)常存在信息展示場景，如實訓(xùn)應(yīng)用中的網(wǎng)絡(luò)架構(gòu)組件等，因此，可利用以上方法進行渲染性能優(yōu)化，改善前端實訓(xùn)應(yīng)用使用體驗。

圖8 組件優(yōu)化主要流程

3.2 實驗分析

實驗工具為Chrome瀏覽器87.0.4280版本，Vue版本為2.5.2。通過Chrome開發(fā)者工具搭建組件性能測試平臺，對常規(guī)組件，靜態(tài)組件進行性能測試。首先使用它們生成一定數(shù)據(jù)量的列表，以此模擬不同渲染壓力下的組件場景，最后記錄并分析每組實驗中兩者的初次渲染時間。測試分為橫向測試和縱向測試，橫向測試用作對比同一數(shù)據(jù)規(guī)模下兩者的性能優(yōu)劣，縱向測試用作對比不同數(shù)據(jù)規(guī)模下的性能差異。

如圖9所示，在初次渲染500行列表時，常規(guī)組件平均耗時41.1 ms，靜態(tài)組件平均耗時22.3 ms，靜態(tài)組件實驗表現(xiàn)更佳。

圖9 橫向?qū)Ρ冉Y(jié)果（渲染500行列表）

如圖10所示，在初次渲染1000行列表時，常規(guī)組件平均耗時52.7 ms，靜態(tài)組件平均耗時36.8 ms，提升幅度約為30.1%；初次渲染10000行列表時，常規(guī)組件平均耗時364.6 ms，靜態(tài)組件平均耗時232.6 ms，提升幅度約為36.2%。綜合多次實驗數(shù)據(jù)可得，處理數(shù)據(jù)越多，靜態(tài)組件性能表現(xiàn)越好，驗證了經(jīng)數(shù)據(jù)凍結(jié)的靜態(tài)組件可以減少瀏覽器渲染時長，有助于提升物聯(lián)網(wǎng)實訓(xùn)組件性能，提升前端實訓(xùn)應(yīng)用使用體驗。

圖10 縱向?qū)Ρ冉Y(jié)果（渲染1000至10000行列表）

4 結(jié)語

區(qū)別于傳統(tǒng)嵌入式物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)，本文針對實訓(xùn)系統(tǒng)應(yīng)用層的需求特點，提出一種基于Web的物聯(lián)網(wǎng)實訓(xùn)系統(tǒng)開發(fā)方案，其核心思想是：基于前后端分離的開發(fā)架構(gòu)，利用Vue構(gòu)建物聯(lián)網(wǎng)前端組件庫，通過組件復(fù)用的方式快速開發(fā)基礎(chǔ)實訓(xùn)、智能家居、工業(yè)生產(chǎn)等多場景前端應(yīng)用，提高實訓(xùn)項目開發(fā)效率的同時，為學(xué)生、教師提供多元化的實訓(xùn)交互界面。

同時，為進一步提升實訓(xùn)應(yīng)用使用體驗，從物聯(lián)網(wǎng)組件角度，提出一種針對大規(guī)模實訓(xùn)組件的優(yōu)化方法，實驗結(jié)果表明，所提方法在實訓(xùn)組件渲染速度上表現(xiàn)出較好的性能，且組件數(shù)據(jù)越多，靜態(tài)組件性能提升幅度越大，有效降低前端渲染性能壓力，能滿足未來不斷擴展的實訓(xùn)前端應(yīng)用需求。