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

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 前端組件庫設計及應用

2.1 前端組件需求分析

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

圖3 實訓系統(tǒng)前端功能模塊設計

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

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

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

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

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

圖4 基礎實訓Web應用功能模塊拆分

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

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

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

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

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

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

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

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

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

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

針對以上情況，本文從物聯(lián)網(wǎng)組件角度，提出一種針對物聯(lián)網(wǎng)實訓組件的性能優(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默認會對每個數(shù)組數(shù)據(jù)的每一層屬性，添加雙向數(shù)據(jù)綁定機制，實現(xiàn)動態(tài)響應效果。組件數(shù)組對象越大，雙向數(shù)據(jù)綁定耗時越多，而利用Object.freeze（）數(shù)據(jù)凍結(jié)的方法可以避免雙向綁定，減少頁面整體渲染耗時，提升性能表現(xiàn)。物聯(lián)網(wǎng)應用中經(jīng)常存在信息展示場景，如實訓應用中的網(wǎng)絡架構(gòu)組件等，因此，可利用以上方法進行渲染性能優(yōu)化，改善前端實訓應用使用體驗。

圖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)實訓組件性能，提升前端實訓應用使用體驗。

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

4 結(jié)語

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

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