移動開發(fā)組件在新華社移動辦公系統(tǒng)的應(yīng)用

張煜東

摘 要：移動信息化發(fā)展日新月異，越來越多的移動開發(fā)組件被應(yīng)用在移動應(yīng)用的構(gòu)建中。本文以新華社移動信息化建設(shè)為基礎(chǔ)，比較三種移動開發(fā)框架，介紹其中React框架和Bootstrap框架在新華社移動辦公中的具體應(yīng)用場景，最后對新華社移動信息化的發(fā)展進行了總結(jié)。

關(guān)鍵詞：移動信息化 開發(fā)框架 移動應(yīng)用

中圖分類號：TP317.1 文獻標(biāo)識碼：A

文章編號：1671-0134（2018）09-067-03 DOI：10.19483/j.cnki.11-4653/n.2018.09.026

在移動互聯(lián)網(wǎng)時代，移動化、碎片化、扁平化、社交化和平臺化的發(fā)展趨勢是變革的方向，在業(yè)務(wù)功能上線方面提出了比傳統(tǒng)Web應(yīng)用更輕量化和更高時效的要求，在用戶體驗方面提出了比傳統(tǒng)App更高適配性需求。目前，新華社移動辦公系統(tǒng)已經(jīng)上線使用，實現(xiàn)了新華社專屬的移動端即時通信平臺，為全社提供安全可控、具有內(nèi)部通訊錄功能的即時通信工具；實現(xiàn)了統(tǒng)一的信息發(fā)布門戶，實現(xiàn)采編發(fā)、供稿在線、辦公管理等社內(nèi)信息的移動發(fā)布；實現(xiàn)了移動輕應(yīng)用的統(tǒng)一集成，利用輕量級開發(fā)框架完成了財務(wù)、通告信息、郵件類輕應(yīng)用的開發(fā)和上線。按照移動互聯(lián)網(wǎng)發(fā)展規(guī)律，在系統(tǒng)建設(shè)時技術(shù)團隊針對移動應(yīng)用開發(fā)，提出了輕量級開發(fā)和高適應(yīng)性兩個基本原則，盡量使用傳統(tǒng)辦公系統(tǒng)提供的基礎(chǔ)性模塊，以輕量級組件的方式為應(yīng)用提供服務(wù)，實現(xiàn)快速集成；采用混合應(yīng)用開發(fā)框架，以適應(yīng)移動業(yè)務(wù)快速發(fā)展的需求。

1.移動辦公App概況

新華社移動辦公App移動端支持Android和IOS兩種主流移動操作系統(tǒng)，移動端將所有功能按模塊進行實現(xiàn)，基本可劃分為網(wǎng)絡(luò)通信、加密存儲和基礎(chǔ)工具等模塊。網(wǎng)絡(luò)模塊基于Netty實現(xiàn)TCP網(wǎng)絡(luò)通訊，移動端與服務(wù)端之間在網(wǎng)絡(luò)模塊使用私有協(xié)議交互。加密存儲模塊將移動端文件進行加密，移動端數(shù)據(jù)庫存儲采用SQLCipher框架進行開發(fā)，數(shù)據(jù)庫支持國密算法加密。基礎(chǔ)工具模塊JavaScriptCore原生與JS的交互模塊、EventBus組件間通訊模塊和Json序列化與反序列化模塊等。

App移動端支持WebView技術(shù)，通過JS-Bridge解決方案實現(xiàn)H5應(yīng)用和原生App交互，實現(xiàn)移動端的本地文件讀寫、使用GPS等功能?；贘S-Bridge解決方案，移動辦公APP在JS層封裝了各種JS業(yè)務(wù)接口，既方便調(diào)用原生APP功能同時，又實現(xiàn)了異步交互過程，降低調(diào)用JS線程擁塞概率。目前，已封裝的JS接口有圖像接口、視頻接口、文件接口、地圖接口、選人接口、創(chuàng)建通知等。

2.移動端開發(fā)框架

目前，常規(guī)的移動開發(fā)技術(shù)如基于標(biāo)準(zhǔn)的前端HTML5 框架，不能夠?qū)崿F(xiàn)動態(tài)加載，在終端適配方面，由于移動端尺寸多，不同終端需要單獨匹配，而不同分辨率需要適配等帶來了各種問題。不僅導(dǎo)致了頁面的錯綜復(fù)雜，還消耗了終端設(shè)備過多的流量和電量，不利于用戶體驗。在分析比較多種開發(fā)框架優(yōu)劣后，技術(shù)團隊平衡傳統(tǒng)辦公系統(tǒng)與移動互聯(lián)網(wǎng)雙向互動的技術(shù)要求，系統(tǒng)建設(shè)“上線+迭代”并行式推進的管理要求。

按照輕量級開發(fā)和高適應(yīng)性兩個基本原則，技術(shù)團隊選取了當(dāng)前比較流行的Bootstrap、jQueryMobile和React移動前端開發(fā)框架進行對比，目標(biāo)是聚焦業(yè)務(wù)功能，降低開發(fā)調(diào)試難度。

2.1Bootstrap移動前端開發(fā)框架

Bootstrap 移動前端開發(fā)框架是由 Twitter 公司設(shè)計的開源開發(fā)架構(gòu)，它組合了 HTML、CSS 和 JavaScript 語言，并在 jQuery 基礎(chǔ)上做出了較多改進，形成一套風(fēng)格獨特的快速構(gòu)建 Web 應(yīng)用的前端開源框架。Twitter公司從開發(fā)設(shè)計bootstrap框架到全網(wǎng)使用 bootstrap 框架進行開發(fā)已經(jīng)歷多年，bootstrap框架也已日趨成熟，一些優(yōu)秀的網(wǎng)站也都開始嘗試使用 bootstrap 框架進行開發(fā)與搭建，以滿足互聯(lián)網(wǎng)技術(shù)不斷迭代更新的要求，如Ghost、星巴克和 Laravel 等。PC 端、移動端的界面展示的快速適配，兼容性高、響應(yīng)式布局和柵格式設(shè)計等特點使該框架贏得了業(yè)內(nèi)的廣泛認(rèn)可。由于其開源時間短，完善的公用組件庫尚需時間建立，不過對于移動互聯(lián)網(wǎng)蓬勃發(fā)展的今天來講，應(yīng)該很快不再是問題。

2.2JQueryMobile移動前端開發(fā)框架

2.3React移動前端開發(fā)框架

自2013年Facebook發(fā)布以來，React吸引了越來越多的開發(fā)者，基于它的衍生技術(shù)，如React Native、React Canvas等也層出不窮。JSX是React的核心組成部分，它使用XML標(biāo)記的方式直接聲明界面，UI界面組件之間可以互相嵌套，通過數(shù)據(jù)模型驅(qū)動UI界面編程，UI界面之間通過虛擬DOM（Virtual DOM）方式實現(xiàn)層疊式刷新。在瀏覽器端用Javascript實現(xiàn)了一套DOM API。基于React進行開發(fā)時所有的DOM構(gòu)造都是通過虛擬DOM進行，每當(dāng)數(shù)據(jù)變化時，React會重新構(gòu)建整個DOM樹，然后React將當(dāng)前整個DOM樹和上一次的DOM樹進行對比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環(huán)（Event Loop）內(nèi)的兩次數(shù)據(jù)變化會被合并。

虛擬DOM不僅帶來了簡單的UI開發(fā)邏輯，同時也帶來了組件化開發(fā)的思想。React將UI上每一個功能相對獨立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體UI的構(gòu)建。每個組件的UI和邏輯都定義在組件內(nèi)部，和外部完全通過API來交互，通過組合的方式實現(xiàn)復(fù)雜的功能，每個組件間都可以重用和重組。

3.框架應(yīng)用實例

3.1應(yīng)用框架組件解決的實際問題

3.1.1Web資源的動態(tài)加載

資源的動態(tài)加載技術(shù)需要完成移動端原生接口的調(diào)用，解決圖片、樣式等小文件帶來的性能瓶頸問題，并以較低的開發(fā)成本和學(xué)習(xí)成本，解決應(yīng)用迭代、輕量發(fā)布等問題。在業(yè)務(wù)和樣式上，前端開發(fā)人員只需要在代碼塊頭部引用需要的插件庫；在邏輯上，開發(fā)人員只需調(diào)用后端提供的接口進行讀取與顯示?？蛻舳说腏avaScript引擎按照動態(tài)加載策略，完成復(fù)雜內(nèi)容的動態(tài)加載工作，優(yōu)化用戶體驗。

3.1.2通用模塊預(yù)制工作

在前端人員開發(fā)移動應(yīng)用項目的基礎(chǔ)上，總結(jié)常用、通用模塊進行統(tǒng)一封裝，模塊化處理常用的信息頁分頁、統(tǒng)一頁頭引用、常用按鈕等功能。這樣既可快速實現(xiàn)移動端的頁面風(fēng)格的一致性，也可在移動端調(diào)試時快速定位相關(guān)問題，實現(xiàn)一次修改多處應(yīng)用。定義多個模塊相互調(diào)用規(guī)范，既保證了各個模塊之間不發(fā)生沖突，又提高了開發(fā)人員的編碼效率。針對多個模塊化的調(diào)用、區(qū)分較復(fù)雜，在建立不同模塊化的同時，必須嚴(yán)格規(guī)定模塊名稱及其信息，形成規(guī)范化文檔。

3.1.3終端界面適配工作

根據(jù)不同分辨率、屏幕尺寸開展瀏覽器適配工作是移動Web應(yīng)用開發(fā)需要面對的一個重要問題，移動開發(fā)框架很好地解決了分辨率適配這個問題。在框架開發(fā)的代碼中，僅需設(shè)置寬度和視口設(shè)置內(nèi)容等必須屬性，即可適配移動端各個設(shè)備、各個型號的手機，做到一套代碼多次利用。界面適配統(tǒng)一規(guī)范了應(yīng)用內(nèi)部的動態(tài)彈出、用戶等待和數(shù)據(jù)加載等樣式，解決界面適配工作同時統(tǒng)一交互界面風(fēng)格，未來將定制多套樣式風(fēng)格供不同場景使用。

3.2移動開發(fā)框架的應(yīng)用

在新華社傳統(tǒng)OA系統(tǒng)基礎(chǔ)上，利用移動開發(fā)框架和組件開發(fā)移動首頁，與OA辦公、財務(wù)、郵件等系統(tǒng)對接，實現(xiàn)信息內(nèi)容移動端發(fā)布、應(yīng)用統(tǒng)一集成的目標(biāo)。目前，移動首頁集成了會議室預(yù)定、領(lǐng)導(dǎo)請假、新華簡訊等多個輕應(yīng)用。

（1）移動“首頁”應(yīng)用前端采用React框架進行Dom渲染，后臺采用node.js技術(shù)進行Dom內(nèi)容資源的生成?！笆醉摗睉?yīng)用支持分欄目、按權(quán)限的列表展示信息，用戶只可閱讀自己權(quán)限范圍內(nèi)的信息。信息通過列表展示標(biāo)題、發(fā)布時間等內(nèi)容，針對正文包括圖片的信息，在首頁中顯示正文的第一張圖片，點擊后可進入詳情頁。通過下拉方式刷新信息目錄，每頁顯示20條信息，可通過下拉頁面“加載更多”顯示更多消息。如下圖所示。

（2）移動辦公系統(tǒng)中開發(fā)多個輔助辦公輕應(yīng)用，涉及傳統(tǒng)PC網(wǎng)頁辦公系統(tǒng)和移動端兩個方面。采用Bootstrap框架進行開發(fā)設(shè)計，技術(shù)上實現(xiàn)了應(yīng)用運行在同一個后臺，采用一套代碼開發(fā)實現(xiàn)“兩端”共用。輔助辦公包括會議室預(yù)定、領(lǐng)導(dǎo)請假、交接班等應(yīng)用功能，在傳統(tǒng)OA網(wǎng)頁端和客戶端，需要響應(yīng)鼠標(biāo)點擊事件、鍵盤錄入和數(shù)據(jù)提交等操作；在移動端，輕應(yīng)用需要響應(yīng)屏幕滑動事件、點擊事件、異步刷新和數(shù)據(jù)提交等操作。

以移動端會議室預(yù)定功能為例，說明應(yīng)用使用場景。當(dāng)用戶需要預(yù)定會議室時，在移動端點擊“會議室預(yù)定”按鈕，進入預(yù)定查看界面，通過時間軸和會議室位置確定需要預(yù)定會議室的使用區(qū)間。用戶選擇會議室使用區(qū)間后，進入審批環(huán)節(jié)，由會議室管理員進行相關(guān)操作。全部后臺審批操作不僅在前端可以實時查閱，當(dāng)有狀態(tài)變化時，用戶可以收到推送通知。圖2/3/4為新華社移動辦公系統(tǒng)中的會議室預(yù)定功能頁面，分別對應(yīng)移動端、PC客戶端以及Web端三端的頁面，應(yīng)用Bootstrap框架實現(xiàn)了一次開發(fā)多終端適配。

總結(jié)

移動辦公輕應(yīng)用的開發(fā)第一次實現(xiàn)傳統(tǒng)辦公系統(tǒng)與移動互聯(lián)網(wǎng)雙向互動，將傳統(tǒng)OA系統(tǒng)適宜開放在互聯(lián)網(wǎng)的功能與移動辦公系統(tǒng)融合。這些功能既是傳統(tǒng)辦公系統(tǒng)與互聯(lián)網(wǎng)的可控融合，又貼近報道指揮第一線。在開發(fā)建設(shè)過程中，遇到傳統(tǒng)辦公系統(tǒng)內(nèi)部耦合性高、不同系統(tǒng)使用各自的框架等問題。而且，就使用到的開發(fā)框架而言，大多數(shù)采用開源框架，版本更迭演進速度快，這就對技術(shù)人員提出了更高開發(fā)能力要求。

新華社移動辦公輕應(yīng)用同互聯(lián)網(wǎng)應(yīng)用還是有區(qū)別的，互聯(lián)網(wǎng)應(yīng)用更新?lián)Q代的速度非常快；而內(nèi)部辦公使用的應(yīng)用具有一定的穩(wěn)定性。這就要求技術(shù)人員在具備開發(fā)能力的基礎(chǔ)上鍛煉技術(shù)整合、追蹤的能力，時刻追蹤新技術(shù)發(fā)展，合理整合使用開發(fā)框架。

參考文獻

[1]李驍，張丹.基于混合模式的移動開發(fā)技術(shù)的研究[C]. “決策論壇——企業(yè)管理模式創(chuàng)新學(xué)術(shù)研討會”論文集（下），2017.

[2]余楷鑫.Bootstrap在Web移動開發(fā)中的應(yīng)用[J].電腦知識與技術(shù)，2017，13（6）：82-84.

[3]李海峰.基于HTML5+jQuery Mobile的移動學(xué)習(xí)平臺Web App研究與實現(xiàn)[J].信息通信，2014（5）：84-85.