周文坤，喬運(yùn)華，侯佳佳，馬洋洋

（北京機(jī)械工業(yè)自動(dòng)化研究所有限公司，北京 100120）

0 引言

信息技術(shù)在不斷發(fā)展，每天都有新的IT技術(shù)出現(xiàn)，但企業(yè)應(yīng)用軟件的設(shè)計(jì)方法和開(kāi)發(fā)效率卻沒(méi)有明顯的提升。大多數(shù)軟件開(kāi)發(fā)依然是直接在底層的技術(shù)上構(gòu)建業(yè)務(wù)系統(tǒng)，所有的業(yè)務(wù)需求都要靠開(kāi)發(fā)人員通過(guò)代碼變成來(lái)轉(zhuǎn)換為軟件實(shí)現(xiàn)，開(kāi)發(fā)人員大量的時(shí)間和精力都耗費(fèi)在軟件技術(shù)實(shí)現(xiàn)層面。在這種低層次的開(kāi)發(fā)模式下，軟件開(kāi)發(fā)效率極為低下，開(kāi)發(fā)的軟件代碼固化、重用性差、難以擴(kuò)展、難以適應(yīng)客戶快速多變的個(gè)性化需求，導(dǎo)致軟件項(xiàng)目開(kāi)發(fā)周期長(zhǎng)，實(shí)施成本高，交付質(zhì)量差，用戶滿意度低。同時(shí)，不同的軟件項(xiàng)目又有不同的技術(shù)實(shí)現(xiàn)方式，軟件之間信息難以共享，成為一個(gè)個(gè)信息孤島，嚴(yán)重的阻礙了企業(yè)信息化建設(shè)的整體進(jìn)程。

1 混合應(yīng)用的解決方案

對(duì)于企業(yè)來(lái)講，應(yīng)用程序代碼的可移植性以及更快的上市時(shí)間是應(yīng)用程序開(kāi)發(fā)的重要標(biāo)準(zhǔn)?；旌弦苿?dòng)應(yīng)用，作為一種移動(dòng)應(yīng)用開(kāi)發(fā)方案，結(jié)合了原生應(yīng)用開(kāi)發(fā)和Web應(yīng)用開(kāi)發(fā)的特點(diǎn)，兼具了跨平臺(tái)性，開(kāi)發(fā)成本低以及開(kāi)發(fā)周期短的優(yōu)勢(shì)?；旌弦苿?dòng)應(yīng)用本質(zhì)上是HTML，CSS，JavaScript技術(shù)在Web應(yīng)用領(lǐng)域中的實(shí)踐。它并不需要使用額外的技術(shù)來(lái)使你的應(yīng)用支持多平臺(tái)，如IOS，Android或Windows。對(duì)于大多數(shù)企業(yè)級(jí)應(yīng)用來(lái)講，混合應(yīng)用與傳統(tǒng)原生應(yīng)用沒(méi)有太大差異，對(duì)用戶來(lái)講，兩者并沒(méi)有使用差別。和其他原生應(yīng)用一樣，用戶可以在應(yīng)用商店中找到這些混合應(yīng)用，將它們安裝到自己的移動(dòng)設(shè)備上，并使用相同的設(shè)備功能。

表1 原生，混合以及Web應(yīng)用架構(gòu)對(duì)比表

ExtJS框架提供了移動(dòng)設(shè)備開(kāi)發(fā)所需的工具包，通過(guò)該SDK，能夠?yàn)闉g覽器，平板，以及智能手機(jī)創(chuàng)建豐富的應(yīng)用。通過(guò)與開(kāi)源插件工具Cordova的結(jié)合，能夠很容易地創(chuàng)建出混合應(yīng)用。通過(guò)使用Cordova的打包，使混合應(yīng)用有能力訪問(wèn)設(shè)備的其他數(shù)據(jù)或功能，如攝像頭，網(wǎng)絡(luò)狀態(tài)，傳感器等。

圖1 ExtJS移動(dòng)混合應(yīng)用架構(gòu)圖

在混合應(yīng)用開(kāi)發(fā)前，需先安裝Java，Cordova命令行以及平臺(tái)SDK（IOS或Android），通過(guò)Sencha Architect開(kāi)發(fā)工具只需兩步即能實(shí)現(xiàn)混合應(yīng)用的創(chuàng)建。

圖2 步驟一：從菜單中添加Cordova包

圖3 步驟二：構(gòu)建應(yīng)用并在設(shè)備中模擬

2 可視化工具的開(kāi)發(fā)流程

通過(guò)使用新的開(kāi)發(fā)工具，同時(shí)借助版本控制系統(tǒng)，可以實(shí)現(xiàn)頁(yè)面的協(xié)同開(kāi)發(fā)。

1）選擇并設(shè)置源碼管理系統(tǒng)并配置合適的策略。

2）項(xiàng)目leader在Architect中創(chuàng)建應(yīng)用工程，保存項(xiàng)目到代碼樹(shù)中，并將文件提交至源碼管理系統(tǒng)中。

3）所有團(tuán)隊(duì)成員在本地安裝并設(shè)置Architect。

4）團(tuán)隊(duì)成員克隆源碼管理系統(tǒng)中的工程至本地系統(tǒng)并將自己的開(kāi)發(fā)工作保存在本地。

5）提交本地代碼至源碼管理系統(tǒng)并同步。若有多個(gè)團(tuán)隊(duì)成員更新統(tǒng)一文件，修改則會(huì)合并。

6）通過(guò)xda文件實(shí)現(xiàn)項(xiàng)目工程的共享。

圖4是具體的開(kāi)發(fā)協(xié)同控制流程圖。

圖4 開(kāi)發(fā)協(xié)同控制流程圖

通過(guò)源碼管理系統(tǒng)，實(shí)現(xiàn)了針對(duì)大量前端頁(yè)面的管理維護(hù)和協(xié)同合作。同時(shí)允許團(tuán)隊(duì)成員在遷入代碼時(shí)，可以運(yùn)行自動(dòng)化單元測(cè)試，代碼的質(zhì)量測(cè)試以及代碼復(fù)審等。同時(shí)，通過(guò)建立分支，可為不同項(xiàng)目或者系統(tǒng)省去大量重復(fù)工作。

3 Sencha Architect可視化工具的應(yīng)用

1）頁(yè)面布局應(yīng)用

Sencha Architect工具箱中包含有幾百個(gè)組件，這些組件按照MVC架構(gòu)模型可分為模型層組件，視圖層組件以及控制層組件。通過(guò)工具可以直接創(chuàng)建這些組件，其中對(duì)于視圖組件，提供了可視化的頁(yè)面布局，實(shí)現(xiàn)了所見(jiàn)即所得的開(kāi)發(fā)。對(duì)于Web頁(yè)面中多樣復(fù)雜的布局，工具實(shí)現(xiàn)了拖拽開(kāi)發(fā)，并提供了常用的布局解決方案，如卡片，水平，垂直及表格等布局。通過(guò)對(duì)頁(yè)面適當(dāng)?shù)牟季?，?shí)現(xiàn)了頁(yè)面展示的多樣化。

2）數(shù)據(jù)生成應(yīng)用

在任何應(yīng)用中，都避免不了與數(shù)據(jù)作交互。同樣，對(duì)于開(kāi)發(fā)工具而言，能夠?yàn)閼?yīng)用生成相應(yīng)格式或語(yǔ)義的數(shù)據(jù)也是非常方便的。在ExtJS框架中，實(shí)體已經(jīng)被抽象為Model，同時(shí)對(duì)于實(shí)體間的關(guān)系也可以通過(guò)模型的屬性進(jìn)行關(guān)聯(lián)，如實(shí)體的一對(duì)多，多對(duì)一以及多對(duì)多的關(guān)聯(lián)關(guān)系。對(duì)于實(shí)體的集合，通過(guò)Store統(tǒng)一管理，Store不僅會(huì)存儲(chǔ)一個(gè)或多個(gè)實(shí)體，同時(shí)它也負(fù)責(zé)如何獲取數(shù)據(jù)，如內(nèi)聯(lián)數(shù)據(jù)，Ajax/Rest方式請(qǐng)求數(shù)據(jù)等。

圖5 開(kāi)發(fā)工具生成模擬數(shù)據(jù)

3）主題定制應(yīng)用

對(duì)于一個(gè)成熟的應(yīng)用來(lái)講，應(yīng)用會(huì)包含多種風(fēng)格的主題，以滿足不同人群的需要。同樣可以通過(guò)開(kāi)發(fā)工具本身實(shí)現(xiàn)對(duì)應(yīng)用樣式或主題的定制。主要通過(guò)對(duì)主題中的顏色，形狀，字體的自定義，即可實(shí)現(xiàn)自定義樣式或主題。

圖6 開(kāi)發(fā)工具拖拽式設(shè)計(jì)主題

4）快速原型應(yīng)用

對(duì)于企業(yè)來(lái)講，能否快速響應(yīng)市場(chǎng)需求也是非常重要的。對(duì)于Sencha Architect來(lái)講，能夠利用自身快速，高效的特點(diǎn)迭代出產(chǎn)品的原型，并能夠提供數(shù)據(jù)交互能力。

4 Sencha Architect可視化開(kāi)發(fā)工具的優(yōu)勢(shì)

1）一站式的前端解決方案

ExtJS框架為我們提供了豐富的功能組件，避免了重復(fù)造輪子的同時(shí)，也為我們提供了自定義組件的能力。通過(guò)基于JavaScript靈活的特性，不僅抽象出應(yīng)用中的邏輯組件，也使我們可以使用面向?qū)ο蟮木幊田L(fēng)格來(lái)創(chuàng)建類(lèi)以及對(duì)象。除了基本的SDK之外，還包含有高級(jí)的功能包，如圖表數(shù)據(jù)的二維以及三維展示，數(shù)據(jù)的統(tǒng)計(jì)，導(dǎo)入，導(dǎo)出等。

2）可視化拖拽開(kāi)發(fā)

對(duì)于企業(yè)級(jí)應(yīng)用開(kāi)發(fā)來(lái)講，能夠?qū)崿F(xiàn)頁(yè)面的快速開(kāi)發(fā)是非常重要的。對(duì)于傳統(tǒng)的ERP系統(tǒng)來(lái)講，本身包含有成千上萬(wàn)個(gè)頁(yè)面。如果采用硬編碼的方式來(lái)編寫(xiě)。

由于微服務(wù)是可獨(dú)立運(yùn)行的進(jìn)程，所以對(duì)于單個(gè)獨(dú)立的微服務(wù)來(lái)講，是可以完全按照軟件工程的流程來(lái)開(kāi)發(fā)，部署，運(yùn)行。當(dāng)需要對(duì)某個(gè)微服務(wù)升級(jí)或添加新功能時(shí)，無(wú)需編譯、部署整個(gè)應(yīng)用。由微服務(wù)架構(gòu)的應(yīng)用系統(tǒng)具備可并行的發(fā)布流程，使得發(fā)布更加高效，同時(shí)也降低對(duì)生產(chǎn)環(huán)境所造成的風(fēng)險(xiǎn)，最終縮短應(yīng)用交付周期。

3）支持實(shí)時(shí)預(yù)覽

Sencha Architect工具不僅能夠支持組件的拖拽開(kāi)發(fā)，還能夠支持在開(kāi)發(fā)的同時(shí)，實(shí)時(shí)顯示，實(shí)現(xiàn)了所見(jiàn)即所得的開(kāi)發(fā)模式。有效地幫助了開(kāi)發(fā)人員對(duì)頁(yè)面整體布局的理解，同時(shí)能夠使得開(kāi)發(fā)更具即時(shí)性，提升了開(kāi)發(fā)效率。

4）高度的可擴(kuò)展性

ExtJS不僅自身具有很多組件，同時(shí)通過(guò)Sencha Architect可以實(shí)現(xiàn)自定義組件和模板的擴(kuò)展，通過(guò)在開(kāi)發(fā)面板中拖拽元素，實(shí)現(xiàn)自定義組件，同時(shí)允許將自定義組件以插件或類(lèi)的方式，保存在工具箱中，以實(shí)現(xiàn)復(fù)用。對(duì)于自定義的組件，可以充分利用已有庫(kù)所提供的基本組件，通過(guò)面向?qū)ο蟮乃枷?，?duì)已有組件進(jìn)行擴(kuò)展。

同時(shí)，使用模板可以非常便捷地將已經(jīng)做好的布局，頁(yè)面保存起來(lái)，或分享給團(tuán)隊(duì)其他成員，極大地避免了重復(fù)性的開(kāi)發(fā)工作，從而實(shí)現(xiàn)了團(tuán)隊(duì)協(xié)作，提高了項(xiàng)目整體的開(kāi)發(fā)效率，同時(shí)也為后續(xù)的修改，維護(hù)提供了良好的基礎(chǔ)，使得修改一處，處處生效的效果。

5 結(jié)語(yǔ)

作為前端頁(yè)面的開(kāi)發(fā)工具，不僅擁有基本的可視化頁(yè)面創(chuàng)建，拖拽式布局等基本功能，還擁有自定義插件擴(kuò)展以及模擬數(shù)據(jù)交互。使得該工具能夠?yàn)槭袌?chǎng)的快速響應(yīng)，產(chǎn)品的快速成型以及開(kāi)發(fā)效率的提升有著重要意義。尤其是在大型應(yīng)用中，不管是給開(kāi)發(fā)人員，設(shè)計(jì)人員或企業(yè)，實(shí)現(xiàn)了頁(yè)面的工廠式生產(chǎn)，極大地提升了提升了效率，減少了成本。