張煜東

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

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

中圖分類號(hào)：TP317.1 文獻(xiàn)標(biāo)識(shí)碼：A

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

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

1.移動(dòng)辦公App概況

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1.3終端界面適配工作

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

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

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

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

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

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

總結(jié)

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

新華社移動(dòng)辦公輕應(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í)刻追蹤新技術(shù)發(fā)展，合理整合使用開發(fā)框架。

參考文獻(xiàn)

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

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

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