RS10系統(tǒng)中的關(guān)于ExtJS框架在開發(fā)工具研究與應(yīng)用

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)語

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