杜艷美 黃曉芳

(西南科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院 四川綿陽(yáng) 621010)

隨著前端技術(shù)的飛速發(fā)展和web應(yīng)用的復(fù)雜化，web應(yīng)用正在往兼容多端、高性能的方向發(fā)展[1-2]，為了快速迭代產(chǎn)品以滿足用戶日益變化的需求，提高用戶體驗(yàn)及提升企業(yè)競(jìng)爭(zhēng)力，web應(yīng)用開(kāi)發(fā)技術(shù)要求更加高效率地開(kāi)發(fā)，并兼顧性能要求，方便快速迭代及后期維護(hù)簡(jiǎn)單。

傳統(tǒng)的B/S(Browser/Server，瀏覽器/服務(wù)器)模式下的web開(kāi)發(fā)中存在前端代碼無(wú)法復(fù)用、性能在移動(dòng)互聯(lián)網(wǎng)中很難達(dá)到最優(yōu)、大量多頁(yè)面應(yīng)用和單頁(yè)web應(yīng)用(SPA，single page web application)不能滿足需求等問(wèn)題，而且，在這種開(kāi)發(fā)模式下，網(wǎng)頁(yè)路由需要后端配合，前后端工作無(wú)法獨(dú)立，再次迭代和維護(hù)效率較低，無(wú)法滿足企業(yè)級(jí)應(yīng)用的迭代速度。

本文針對(duì)前后端分離的開(kāi)發(fā)模式[3-4]，提出一種解決多終端性能、組件化開(kāi)發(fā)和打包部署的完整的開(kāi)發(fā)模型，以求進(jìn)一步提高開(kāi)發(fā)效率，通過(guò)實(shí)際系統(tǒng)的開(kāi)發(fā)實(shí)踐，證明了該開(kāi)發(fā)模型的有效性。

1 研究現(xiàn)狀

隨著模塊化和組件化理念出現(xiàn)，前端開(kāi)發(fā)技術(shù)開(kāi)始更加關(guān)注性能優(yōu)化、用戶體驗(yàn)的提升以及開(kāi)發(fā)速度的快速迭代。如Google公司的開(kāi)源框架AngularJs[5]，AngularJs首創(chuàng)的雙向數(shù)據(jù)綁定、內(nèi)置的模塊注入和組件化的支持，為web的發(fā)展提供了較大貢獻(xiàn)；FaceBook開(kāi)發(fā)的開(kāi)源框架ReactJs是第一個(gè)采用虛擬節(jié)點(diǎn)( virtual dom )技術(shù)的框架,使得框架足夠輕量和靈活，推進(jìn)了web性能的提升；VueJs[6-7]以其輕量級(jí)、高性能、靈活性的特點(diǎn)，使其不僅適用于大型復(fù)雜的web應(yīng)用，而且適合移動(dòng)場(chǎng)景，為web技術(shù)的發(fā)展和性能提升做了進(jìn)一步的貢獻(xiàn)。模塊構(gòu)建工具WebPack的出現(xiàn)給前端性能優(yōu)化帶來(lái)更多便利。NodeJs逐漸發(fā)展成一個(gè)成熟的開(kāi)發(fā)平臺(tái)，吸引了許多開(kāi)發(fā)者，國(guó)內(nèi)諸多大型高流量網(wǎng)站都采用NodeJs進(jìn)行開(kāi)發(fā)。NodeJs的發(fā)展，為web研發(fā)模式帶來(lái)了新的解決思路[8-9]，即通過(guò)在傳統(tǒng)的前端和后端之間引入NodeJs作為中間層，使得前端和后端實(shí)現(xiàn)完全解耦，業(yè)界諸如阿里、百度都已有基于NodeJs做前后端分離的應(yīng)用。在學(xué)術(shù)界，針對(duì)web端性能的優(yōu)化，也有大量的研究工作。2016年，孔令旭等人提出了一種基于Node.js實(shí)現(xiàn)的前后端分離的解決方案，并證明了其在性能方面的高效性[10]；2017年，吳賀提出一種前后端解耦模式的開(kāi)發(fā)方案，其核心是通過(guò)在傳統(tǒng)的MVC結(jié)構(gòu)上，引入Node.js作為前端和后端的中間層，從而解耦前端和后端，實(shí)現(xiàn)前端獨(dú)立開(kāi)發(fā)[11]；同樣在2017年，仇晶、黃巖等人提出基于Node.js中間層的web開(kāi)發(fā)，在傳統(tǒng)的互聯(lián)網(wǎng)前后端web應(yīng)用中，提出了引入Node.js作為中間層來(lái)解除前、后端之間的耦合關(guān)系的新解決方案[12]。但是對(duì)于企業(yè)級(jí)大型web應(yīng)用前后端分離，如何提升前端開(kāi)發(fā)效率等研究較少。目前,大部分的系統(tǒng)架構(gòu)如圖1所示，雖然有些系統(tǒng)采用分布式架構(gòu)，層與層之間使用了遠(yuǎn)程調(diào)用框架，但是本質(zhì)類(lèi)似。前后端耦合的問(wèn)題主要發(fā)生

圖1 目前大部分的系統(tǒng)架構(gòu)Fig.1 Most of the current system architecture

在控制層(Control)，控制層是前端和服務(wù)端交互的邊界，但是在開(kāi)發(fā)過(guò)程中控制層(Control)和服務(wù)層(Server)常?；煜磺澹@就是前后端耦合度高的重要原因。因此，要前后端解耦，就要?jiǎng)澢蹇刂茖拥倪吔?。同時(shí)，前后端分離的終極目標(biāo)應(yīng)該是前端和服務(wù)端是完全獨(dú)立的項(xiàng)目，前端項(xiàng)目應(yīng)該包含圖1里的瀏覽器和控制層，服務(wù)端項(xiàng)目包括服務(wù)層、DAO層等。項(xiàng)目開(kāi)發(fā)時(shí)讓前端脫離于后端，讓后端專(zhuān)注于業(yè)務(wù)服務(wù)，最后生產(chǎn)發(fā)布也要獨(dú)立部署，前端專(zhuān)注于展示和交互，這樣就達(dá)到了前后端真正解耦。

2 一種高效的前后端技術(shù)分離模型

2.1 總體思路

本文通過(guò)在前端和后端之間引入nodeJs作為中間層，后端通過(guò)REST框架實(shí)現(xiàn)前后端分離架構(gòu)。前端模型構(gòu)建視圖層、接口層和服務(wù)端，其中視圖層包含組件、路由模塊，接口層包括所有具體的業(yè)務(wù)接口以及服務(wù)端nginx[13]作為靜態(tài)資源代理和nodeJs作為前端和后端服務(wù)的中間層，并且服務(wù)端可以根據(jù)應(yīng)用的性能要求，采用負(fù)載均衡的方案以達(dá)到高性能的要求，從而快速響應(yīng)客戶端的請(qǐng)求。前端基于nodeJs+npm對(duì)開(kāi)源依賴(lài)包和工具進(jìn)行管理，通過(guò)webPack工具實(shí)現(xiàn)前端模塊化打包、合并和壓縮文件。

通過(guò)vue實(shí)現(xiàn)前端模塊化和組件化開(kāi)發(fā)模式；通過(guò)vue-router管理用戶請(qǐng)求和頁(yè)面跳轉(zhuǎn)；頁(yè)面通過(guò)ajax調(diào)用后端的restful api接口；前端與后端定義一個(gè)相對(duì)通用的JSON響應(yīng)結(jié)構(gòu)，其中包含兩部分：元數(shù)據(jù)與返回值，其中，元數(shù)據(jù)表示操作是否成功與返回值消息等，返回值對(duì)應(yīng)服務(wù)端方法所返回的數(shù)據(jù)。

JSON響應(yīng)結(jié)構(gòu)如下：

{

"meta": {

"success": true,

"message": "ok"

},

"data": ...

}

前后端分離的總體架構(gòu)模型如圖2所示。

2.2 面向企業(yè)業(yè)務(wù)應(yīng)用場(chǎng)景的組件化開(kāi)發(fā)模型

對(duì)于大型web應(yīng)用，涉及多團(tuán)隊(duì)合作開(kāi)發(fā)，要讓開(kāi)發(fā)人員之間高效合作，就得降低各功能之間的耦合度和重復(fù)開(kāi)發(fā)的成本，盡量讓各開(kāi)發(fā)人員負(fù)責(zé)的模塊依賴(lài)度降低，同時(shí)也便于后期的共同維護(hù)。組

圖2 前后端分離的總體技術(shù)模型Fig.2 General technical model of frontend-backend separation

件化開(kāi)發(fā)即可解決這樣的問(wèn)題，組件以其高內(nèi)聚、可重用、可互換、可組合的特點(diǎn)使得開(kāi)發(fā)者之間不會(huì)產(chǎn)生開(kāi)發(fā)時(shí)序的依賴(lài)，大幅提升并行的開(kāi)發(fā)效率，也更容易支持多個(gè)團(tuán)隊(duì)共同維護(hù)一個(gè)大型應(yīng)用的開(kāi)發(fā)。在一個(gè)企業(yè)內(nèi)部，web前端的組件，不管這個(gè)組件是UI層級(jí)，還是javascript開(kāi)發(fā)層級(jí)，都脫離不了該企業(yè)業(yè)務(wù)產(chǎn)品的模式，比如常見(jiàn)的登錄、注冊(cè)、新聞網(wǎng)站的新聞列表組件、文件系統(tǒng)的文件列表組件，都可以抽象成組件?；诮M件開(kāi)發(fā)，最重要的是組件可以用來(lái)組合構(gòu)成其他組件，通過(guò)分類(lèi)處理，理清組件的應(yīng)用邊界，這樣可以有針對(duì)性的積累和完善這些組件，有意識(shí)地開(kāi)發(fā)相關(guān)的組件，最終形成一個(gè)針對(duì)某個(gè)業(yè)務(wù)組件的組件倉(cāng)庫(kù)，即頁(yè)面上的每個(gè)獨(dú)立的可視/可交互區(qū)域視為一個(gè)組件(圖3)。

圖3 組件與頁(yè)面的關(guān)系Fig.3 The relationship between the component and the page

VueJs的組件化、模塊化的特點(diǎn)和WebPack模塊化打包的方案使得組件化開(kāi)發(fā)、后期的打包部署和模塊化帶來(lái)的性能問(wèn)題有了技術(shù)支撐，是真正將 JavaScript，Css和 Template 同時(shí)都考慮進(jìn)去的模塊化方案，而非僅僅 JavaScript 模塊化方案。

3 模型的實(shí)踐分析

3.1 模型實(shí)踐開(kāi)發(fā)

通過(guò)將該模型用于面向SaaS級(jí)的企業(yè)web應(yīng)用開(kāi)發(fā)，該應(yīng)用是一款電子簽名產(chǎn)品，其面向多終端用戶提供服務(wù)，提供文件簽名、文件查詢、文檔預(yù)覽、簽名制作、個(gè)人信息設(shè)置、實(shí)名認(rèn)證等核心功能。

前端開(kāi)發(fā)選用輕量級(jí)的vueJs作為基礎(chǔ)庫(kù)，采用vue-router對(duì)頁(yè)面路由進(jìn)行構(gòu)建和管理，通過(guò)vuex管理組件狀態(tài)，前端基于nodeJs+npm對(duì)開(kāi)源依賴(lài)包和工具進(jìn)行管理，通過(guò)webPack工具實(shí)現(xiàn)前端模塊化打包、合并和壓縮文件(圖4)。

圖4 前端主要技術(shù)Fig.4 Main front-end technology

基于面向企業(yè)業(yè)務(wù)場(chǎng)景的組件化開(kāi)發(fā)模型，應(yīng)用在此系統(tǒng)中，為了讓各終端的體驗(yàn)效果和頁(yè)面視覺(jué)效果達(dá)到最佳，將視圖層分為了移動(dòng)端和電腦客戶端，根據(jù)界面原型進(jìn)行UI組件劃分，通過(guò)對(duì)所有界面進(jìn)行分析、解構(gòu)、重組，最后總結(jié)UI組件的構(gòu)件分成移動(dòng)UI業(yè)務(wù)組件、公共UI業(yè)務(wù)組件、電腦UI業(yè)務(wù)組件三大部分，UI組件的總體構(gòu)建思路如圖5所示。結(jié)合前后端分離模型，應(yīng)用的前端工程目錄結(jié)構(gòu)劃分如表1所示。

圖5 UI組件的構(gòu)建思路Fig.5 The idea of building UI components

各戶端開(kāi)發(fā)目錄用途commons存放公共文件component用于存放業(yè)務(wù)基礎(chǔ)組件interface用于前端接口處理,可提供各終端調(diào)用。page-components最終客戶端可訪問(wèn)的頁(yè)面,頁(yè)面內(nèi)部由多個(gè)基礎(chǔ)業(yè)務(wù)組件組合成一個(gè)完整的功能頁(yè)。routes路由分發(fā),為了讓不同終端的用戶體驗(yàn)效果達(dá)到最佳,這里的重構(gòu)設(shè)計(jì)將移動(dòng)端單獨(dú)做了一份頁(yè)面,但是基于組件化的思想,各終端共用了基礎(chǔ)的業(yè)務(wù)組件,共用接口層,只有view層做了變化,因此,達(dá)到在保證各終端體驗(yàn)效果最佳的情況下,最大化地減少功能重復(fù)開(kāi)發(fā)的成本。styles存放樣式模塊

3.2 效果分析

經(jīng)過(guò)前后端分離，原先開(kāi)發(fā)Java后臺(tái)的人員只需要專(zhuān)注API的設(shè)計(jì)和實(shí)現(xiàn)，無(wú)需關(guān)心前端頁(yè)面路由；前端以組件化的方式劃分，可以輕易將前端開(kāi)發(fā)人員進(jìn)行分層，擅長(zhǎng)網(wǎng)絡(luò)層和js開(kāi)發(fā)的人員，專(zhuān)注

server端與后臺(tái)接口的對(duì)接和專(zhuān)注書(shū)寫(xiě)提供客戶端調(diào)用的js模塊，擅長(zhǎng)css和html的開(kāi)發(fā)人員，即可專(zhuān)注UI組件的實(shí)現(xiàn)，且開(kāi)發(fā)人員以組件劃分任務(wù)。

(1)前后端開(kāi)發(fā)模式由串行變成了并行，開(kāi)發(fā)效率明顯提升，各模塊之間沒(méi)有耦合，大家只需要按照需求實(shí)現(xiàn)各自組件即可。

(2)前端部分性能優(yōu)化不再受限，靜態(tài)頁(yè)面的訪問(wèn)可以通過(guò)引用Nignx，使得后臺(tái)不再關(guān)心靜態(tài)頁(yè)面訪問(wèn)帶來(lái)的壓力，并且前端server端可根據(jù)用戶端的情況擴(kuò)展服務(wù)器，以達(dá)到良好的訪問(wèn)速度(圖6)。

圖6 負(fù)載均衡的時(shí)間圖Fig.6 Design diagram of load balance

(3)使用壓力測(cè)試工具ab(ab是apache自帶的壓力測(cè)試工具)，分別模擬4組數(shù)據(jù)，并發(fā)請(qǐng)求訪問(wèn)本地發(fā)布的2種單服務(wù)器環(huán)境的相同首頁(yè)訪問(wèn)效果，采用前后端分離模型之后性能顯著提升，且并發(fā)請(qǐng)求量越高，分離后的性能優(yōu)勢(shì)越明顯(表2)。

表2 性能測(cè)試數(shù)據(jù)Table 2 Performance test data

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

本文通過(guò)前后端分離技術(shù)的研究，設(shè)計(jì)了面向web應(yīng)用的前后端分離模型的設(shè)計(jì)與開(kāi)發(fā)，并設(shè)計(jì)了面向企業(yè)業(yè)務(wù)場(chǎng)景的組件化開(kāi)發(fā)模型，通過(guò)實(shí)踐證明該模型在web應(yīng)用開(kāi)發(fā)過(guò)程中的高效性。

[1] 劉順益.移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展現(xiàn)狀及未來(lái)發(fā)展趨勢(shì)[J].黑龍江科技信息,2017,(17):167.

[2] 吳秒秒.WEB系統(tǒng)前端性能優(yōu)化研究[J].中國(guó)科技投資,2017,(1):315.

[3] 林嘉婷.試談前后端分離及基于前端MVC框架的開(kāi)發(fā)[J].電腦編程技巧與維護(hù),2016,(23):5-8.

[4] 孫娉娉,李新,史廣軍.基于前后端分離的內(nèi)容管理系統(tǒng)[J].科研信息化技術(shù)與應(yīng)用,2016,(4):70-75.

[5] 董英茹.簡(jiǎn)談AngularJS在下一代Web開(kāi)發(fā)中的應(yīng)用[J].軟件工程師,2015,(5):30-31.

[6] 朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新,2017,(20):119-121.

[7] 李曰斌，詹舒波.基于Vue的前端組件化研究與實(shí)踐[Z].2016.09.09.

[8] 萬(wàn)里晴,楊浩.探究基于V8引擎的Node.js在各應(yīng)用領(lǐng)域的發(fā)展[J].通信世界,2015,(13):97-97.

[9] 王金龍,宋斌,丁銳.Node.js:一種新的Web應(yīng)用構(gòu)建技術(shù)[J].現(xiàn)代電子技術(shù),2015,(6):70-73.

[10] 孔令旭. 基于Node.js的前后端分離框架的實(shí)現(xiàn)與應(yīng)用[D]. 湖北武漢：華中科技大學(xué), 2016.

[11] 吳賀. 前后端解耦模式及開(kāi)發(fā)[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用, 2017, 26(2):217-221.

[12] 仇晶, 黃巖, 柴瑜晗. 基于Node.js中間層Web開(kāi)發(fā)的研究與實(shí)現(xiàn)——以微信圖書(shū)借閱平臺(tái)為例[J]. 河北工業(yè)科技, 2017, 34(2):118-124.

[13] 肖明魁.基于Nginx負(fù)載均衡技術(shù)初探[J].科技展望,2015,(36):125.