基于HTML5的高性能移動(dòng)門戶的技術(shù)研究

雷小虎 張捷

摘 ?要：目前隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，純?cè)苿?dòng)應(yīng)用由于系統(tǒng)平臺(tái)技術(shù)的差異性在重用性、開發(fā)周期、運(yùn)行效率、用戶體驗(yàn)、容錯(cuò)能力、資源消耗性等方面存在較大的局限性。該研究課題旨在通過純H5+js構(gòu)建高適應(yīng)性的移動(dòng)終端界面，對(duì)于應(yīng)用界面所需的原生代碼則通過在移動(dòng)門戶內(nèi)集成的方式進(jìn)行統(tǒng)一提供。移動(dòng)門戶內(nèi)的業(yè)務(wù)界面以war包方式在云端web服務(wù)器進(jìn)行集群部署。

關(guān)鍵詞：原生代碼與H5展現(xiàn)界面分離 ?移動(dòng)門戶運(yùn)行組建庫(kù) ?云端Web調(diào)用 ?外掛適配程序庫(kù)

中圖分類號(hào)：TP311 ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2020）08（c）-0055-03

Abstract： At present， with the development of mobile Internet， due to the differences in system platform technology， pure native mobile applications have greater limitations in terms of reusability， development cycle， operating efficiency， user experience， fault tolerance， and resource consumption. This research topic aims to build a highly adaptable mobile terminal interface through pure H5+js. The native code required for the application interface is provided in a unified way through integration in the mobile portal. The business interface in the mobile portal is deployed in a cluster on the cloud web server in the form of a war package.

Key Words： Separation of native code and h5 presentation interface; Mobile portal running and building library; Cloud web calling; Plug-in adaptation library

根據(jù)國(guó)網(wǎng)公司信通部2018年10月全網(wǎng)調(diào)研數(shù)據(jù)顯示：內(nèi)網(wǎng)移動(dòng)應(yīng)用總計(jì)198個(gè)，外網(wǎng)移動(dòng)應(yīng)用148個(gè)?？傆?jì)346個(gè)移動(dòng)應(yīng)用涵蓋了國(guó)網(wǎng)公司移動(dòng)作業(yè)、移動(dòng)辦公。其中采用原生技術(shù)開發(fā)的占比超過60%，H5+原生混合應(yīng)用占比為30%，僅有不到10%的應(yīng)用采用了純H5+Js進(jìn)行開發(fā)。由于參與建設(shè)的廠商眾多，技術(shù)壁壘明顯，后期支持團(tuán)隊(duì)變動(dòng)頻繁，造成大批應(yīng)用在開發(fā)完成后基本得不到后續(xù)的技術(shù)支持，隨著相關(guān)業(yè)務(wù)的變化，一些應(yīng)用成為無(wú)人使用的僵尸應(yīng)用。

因此，國(guó)網(wǎng)公司目前迫切需要通過采用新的技術(shù)體系支撐未來(lái)即將進(jìn)行建設(shè)的移動(dòng)項(xiàng)目，消除由開發(fā)廠商帶來(lái)的技術(shù)特性和技術(shù)壁壘，保障應(yīng)用后期的運(yùn)維、升級(jí)換代，降低應(yīng)用對(duì)終端設(shè)備性能的依賴，提升應(yīng)用的響應(yīng)速度和服用性。

1 ?系統(tǒng)概述

移動(dòng)門戶為應(yīng)用的唯一入口訪問渠道，移動(dòng)門戶內(nèi)核提供原生插件，由接入移動(dòng)門戶的遠(yuǎn)程微服務(wù)在運(yùn)行時(shí)進(jìn)行調(diào)用，遠(yuǎn)程移動(dòng)微服務(wù)集中部署于云端集群web服務(wù)器（見圖1）。

1.1 集群部署移動(dòng)微應(yīng)用

通過將由純H5+js開發(fā)的界面程序包打包成web服務(wù)器可運(yùn)行的war包程序，并且部署于云服務(wù)中心的web服務(wù)器集群對(duì)移動(dòng)微應(yīng)用進(jìn)行快速的部署。

1.2 統(tǒng)一應(yīng)用商店

由統(tǒng)一應(yīng)用商店對(duì)已經(jīng)完成部署的移動(dòng)微應(yīng)用進(jìn)行注冊(cè)、上架發(fā)布。注冊(cè)包括移動(dòng)微應(yīng)用的首頁(yè)路徑、服務(wù)器地址、應(yīng)用名稱、應(yīng)用桌面小圖標(biāo)、應(yīng)用簡(jiǎn)介、關(guān)聯(lián)插件。注冊(cè)完畢后統(tǒng)一由應(yīng)用商店對(duì)注冊(cè)內(nèi)容進(jìn)行發(fā)布，發(fā)布內(nèi)容由移動(dòng)門戶統(tǒng)一應(yīng)用商店客戶端進(jìn)行感知。

1.3 移動(dòng)門戶運(yùn)行內(nèi)核支撐

（1）運(yùn)行時(shí)標(biāo)簽庫(kù)。移動(dòng)門戶運(yùn)行內(nèi)核包含一套完整的H5自定義標(biāo)簽庫(kù)，標(biāo)簽庫(kù)中的每一個(gè)H5標(biāo)簽對(duì)應(yīng)一個(gè)原生、H5、外掛適配插件程序。

（2）原生運(yùn)行組建庫(kù)。提供移動(dòng)微應(yīng)用運(yùn)行時(shí)所需的原生代碼支撐，組件庫(kù)內(nèi)按照代碼用途進(jìn)行插件化的打包，插件的調(diào)用以H5自定義標(biāo)簽形式在H5頁(yè)面進(jìn)行調(diào)用。

（3）H5運(yùn)行組件庫(kù)。采用H5+J5進(jìn)行插件編寫，插件編寫完畢后加入運(yùn)行內(nèi)核標(biāo)簽庫(kù)，供移動(dòng)微應(yīng)用運(yùn)行時(shí)調(diào)用。

（4）外掛適配程序庫(kù)。外掛適配程序進(jìn)行插件化封裝，封裝完畢后更新運(yùn)行內(nèi)核標(biāo)簽庫(kù)，供移動(dòng)微應(yīng)用運(yùn)行時(shí)調(diào)用。

2 ?系統(tǒng)建設(shè)步驟

2.1 界面包與原生代碼獨(dú)立開發(fā)

移動(dòng)微應(yīng)用開發(fā)階段，界面程序包建議采用國(guó)網(wǎng)公司統(tǒng)推移動(dòng)開發(fā)平臺(tái)進(jìn)行開發(fā)，界面所需的原生插件支持按照移動(dòng)開發(fā)平臺(tái)的插件編寫規(guī)范和標(biāo)簽定義規(guī)范進(jìn)行編寫。

通過移動(dòng)開發(fā)平臺(tái)集成的測(cè)試、開發(fā)環(huán)境測(cè)試界面的展現(xiàn)和原生插件調(diào)用功能。開發(fā)、測(cè)試完畢將界面程序包打包成能在Web容器中運(yùn)行的war包程序。并且將插件包從移動(dòng)開發(fā)平臺(tái)中獨(dú)立摘出。

2.2 移動(dòng)微應(yīng)用WAR包部署與插件上傳

移動(dòng)微應(yīng)用WAR包程序接入統(tǒng)一應(yīng)用商店進(jìn)行Web容器部署，關(guān)聯(lián)插件上傳至移動(dòng)門戶后臺(tái)管理端，由移動(dòng)門戶后臺(tái)對(duì)移動(dòng)門戶內(nèi)核進(jìn)行后臺(tái)更新。

2.3 移動(dòng)微應(yīng)用門戶接入

用戶登錄移動(dòng)門戶之后通過統(tǒng)一應(yīng)用商店應(yīng)用列表查找發(fā)布的移動(dòng)微應(yīng)用，點(diǎn)擊后在移動(dòng)門戶桌面生成該移動(dòng)微應(yīng)用的圖標(biāo)，此圖標(biāo)包含該移動(dòng)微應(yīng)用的Web路徑。點(diǎn)擊此圖標(biāo)即可訪問到移動(dòng)微應(yīng)用的首頁(yè)地址。

3 ?系統(tǒng)性能評(píng)測(cè)結(jié)果

3.1 對(duì)標(biāo)項(xiàng)目簡(jiǎn)介

（1）基于H5高性能移動(dòng)門戶——四川電力微窗（內(nèi)網(wǎng)）。四川省電力公司微窗項(xiàng)目于2018年11月建設(shè)完畢，該項(xiàng)目以H5作為核心技術(shù)，采用界面與插件代碼分離的方式進(jìn)行開發(fā)、運(yùn)行。

（2）基于原生開發(fā)的內(nèi)網(wǎng)移動(dòng)門戶——國(guó)網(wǎng)公司內(nèi)網(wǎng)移動(dòng)門戶（一期）。國(guó)網(wǎng)公司內(nèi)網(wǎng)移動(dòng)門戶是一款基于原生代碼開發(fā)的傳統(tǒng)移動(dòng)門戶，門戶通過應(yīng)用商店下載安裝原生應(yīng)用進(jìn)行運(yùn)行。

3.2 運(yùn)行環(huán)境配置

微應(yīng)用運(yùn)行環(huán)境為云服務(wù)中心所提供的標(biāo)準(zhǔn)Web容器，因此區(qū)別于傳統(tǒng)移動(dòng)應(yīng)用的運(yùn)行環(huán)境。具體見表1。

3.3 運(yùn)行對(duì)比數(shù)據(jù)

經(jīng)過對(duì)比運(yùn)行分析可知，微應(yīng)用對(duì)于終端設(shè)備的資源消耗和性能依賴明顯小于傳統(tǒng)的移動(dòng)應(yīng)用，并且無(wú)論是應(yīng)用啟動(dòng)時(shí)間還是內(nèi)存占用率都具有較大的優(yōu)勢(shì)。具體見表2。

3.4 開發(fā)效率與成本分析

傳統(tǒng)原生應(yīng)用開發(fā)過程繁瑣，需要特定技術(shù)的開發(fā)人員入場(chǎng)進(jìn)行開發(fā)工作，但是H5開發(fā)人員來(lái)源廣泛，不需要專職人員進(jìn)行開發(fā)，JAVA、C#、python人員皆可接手基于H5應(yīng)用的開發(fā)工作。因此H5應(yīng)用不存在技術(shù)壁壘的問題。

以四川省公司物資部貨架管理app為例，該應(yīng)用第一版采用android原生技術(shù)進(jìn)行開發(fā)，耗時(shí)4個(gè)月，投入成本70余萬(wàn)。2018年該項(xiàng)目轉(zhuǎn)向H5技術(shù)升級(jí)，開發(fā)時(shí)間僅僅1個(gè)月不到便完成，投入成本不超過10萬(wàn)。

4 ?結(jié)語(yǔ)

基于H5為技術(shù)核心的移動(dòng)門戶以及移動(dòng)微應(yīng)用技術(shù)在國(guó)網(wǎng)公司的應(yīng)用中，相比傳統(tǒng)的原生應(yīng)用建設(shè)模式極大地縮短了應(yīng)用開發(fā)周期，降低了開發(fā)成本、運(yùn)維成本、技術(shù)門檻。提升了國(guó)網(wǎng)公司移動(dòng)應(yīng)用的運(yùn)行效率和穩(wěn)定性，為國(guó)網(wǎng)未來(lái)的移動(dòng)應(yīng)用建設(shè)指明了技術(shù)方向。

參考文獻(xiàn)

[1] 王平.基于移動(dòng)終端的智慧城市信息服務(wù)平臺(tái)的實(shí)現(xiàn)[D].上海交通大學(xué)，2016.

[2] 寧士勇.移動(dòng)分組網(wǎng)絡(luò)終端數(shù)據(jù)自適應(yīng)整合方法仿真[J].計(jì)算機(jī)仿真，2018，35（2）：346-349.

[3] 詹雄，郭昊，等，陳紅松.國(guó)家電網(wǎng)邊緣計(jì)算信息系統(tǒng)安全風(fēng)險(xiǎn)評(píng)估方法研究[J].計(jì)算機(jī)科學(xué)，2019，46（S2）：428-432.

[4] 駱宇豪.基于SPA模式的高性能移動(dòng)端可交互圖表系統(tǒng)的研究與實(shí)現(xiàn)[D].湖南大學(xué)，2016.

[5] 李桂林.HTML5在Web前端開發(fā)中的應(yīng)用研究[J].計(jì)算機(jī)產(chǎn)品與流通，2020（8）：17.

[6] 李正君.HTML5新技術(shù)的應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)技巧探究[J].科技傳播，2020，12（6）：128-129.