RS10系統中的關于ExtJS框架在開發工具研究與應用

周文坤，喬運華，侯佳佳，馬洋洋

（北京機械工業自動化研究所有限公司，北京 100120）

0 引言

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

1 混合應用的解決方案

對于企業來講，應用程序代碼的可移植性以及更快的上市時間是應用程序開發的重要標準。混合移動應用，作為一種移動應用開發方案，結合了原生應用開發和Web應用開發的特點，兼具了跨平臺性，開發成本低以及開發周期短的優勢。混合移動應用本質上是HTML，CSS，JavaScript技術在Web應用領域中的實踐。它并不需要使用額外的技術來使你的應用支持多平臺，如IOS，Android或Windows。對于大多數企業級應用來講，混合應用與傳統原生應用沒有太大差異，對用戶來講，兩者并沒有使用差別。和其他原生應用一樣，用戶可以在應用商店中找到這些混合應用，將它們安裝到自己的移動設備上，并使用相同的設備功能。

表1 原生，混合以及Web應用架構對比表

ExtJS框架提供了移動設備開發所需的工具包，通過該SDK，能夠為瀏覽器，平板，以及智能手機創建豐富的應用。通過與開源插件工具Cordova的結合，能夠很容易地創建出混合應用。通過使用Cordova的打包，使混合應用有能力訪問設備的其他數據或功能，如攝像頭，網絡狀態，傳感器等。

圖1 ExtJS移動混合應用架構圖

在混合應用開發前，需先安裝Java，Cordova命令行以及平臺SDK（IOS或Android），通過Sencha Architect開發工具只需兩步即能實現混合應用的創建。

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

圖3 步驟二：構建應用并在設備中模擬

2 可視化工具的開發流程

通過使用新的開發工具，同時借助版本控制系統，可以實現頁面的協同開發。

1）選擇并設置源碼管理系統并配置合適的策略。

2）項目leader在Architect中創建應用工程，保存項目到代碼樹中，并將文件提交至源碼管理系統中。

3）所有團隊成員在本地安裝并設置Architect。

4）團隊成員克隆源碼管理系統中的工程至本地系統并將自己的開發工作保存在本地。

5）提交本地代碼至源碼管理系統并同步。若有多個團隊成員更新統一文件，修改則會合并。

6）通過xda文件實現項目工程的共享。

圖4是具體的開發協同控制流程圖。

圖4 開發協同控制流程圖

通過源碼管理系統，實現了針對大量前端頁面的管理維護和協同合作。同時允許團隊成員在遷入代碼時，可以運行自動化單元測試，代碼的質量測試以及代碼復審等。同時，通過建立分支，可為不同項目或者系統省去大量重復工作。

3 Sencha Architect可視化工具的應用

1）頁面布局應用

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

2）數據生成應用

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

圖5 開發工具生成模擬數據

3）主題定制應用

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

圖6 開發工具拖拽式設計主題

4）快速原型應用

對于企業來講，能否快速響應市場需求也是非常重要的。對于Sencha Architect來講，能夠利用自身快速，高效的特點迭代出產品的原型，并能夠提供數據交互能力。

4 Sencha Architect可視化開發工具的優勢

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

ExtJS框架為我們提供了豐富的功能組件，避免了重復造輪子的同時，也為我們提供了自定義組件的能力。通過基于JavaScript靈活的特性，不僅抽象出應用中的邏輯組件，也使我們可以使用面向對象的編程風格來創建類以及對象。除了基本的SDK之外，還包含有高級的功能包，如圖表數據的二維以及三維展示，數據的統計，導入，導出等。

2）可視化拖拽開發

對于企業級應用開發來講，能夠實現頁面的快速開發是非常重要的。對于傳統的ERP系統來講，本身包含有成千上萬個頁面。如果采用硬編碼的方式來編寫。

由于微服務是可獨立運行的進程，所以對于單個獨立的微服務來講，是可以完全按照軟件工程的流程來開發，部署，運行。當需要對某個微服務升級或添加新功能時，無需編譯、部署整個應用。由微服務架構的應用系統具備可并行的發布流程，使得發布更加高效，同時也降低對生產環境所造成的風險，最終縮短應用交付周期。

3）支持實時預覽

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

4）高度的可擴展性

ExtJS不僅自身具有很多組件，同時通過Sencha Architect可以實現自定義組件和模板的擴展，通過在開發面板中拖拽元素，實現自定義組件，同時允許將自定義組件以插件或類的方式，保存在工具箱中，以實現復用。對于自定義的組件，可以充分利用已有庫所提供的基本組件，通過面向對象的思想，對已有組件進行擴展。

同時，使用模板可以非常便捷地將已經做好的布局，頁面保存起來，或分享給團隊其他成員，極大地避免了重復性的開發工作，從而實現了團隊協作，提高了項目整體的開發效率，同時也為后續的修改，維護提供了良好的基礎，使得修改一處，處處生效的效果。

5 結語

作為前端頁面的開發工具，不僅擁有基本的可視化頁面創建，拖拽式布局等基本功能，還擁有自定義插件擴展以及模擬數據交互。使得該工具能夠為市場的快速響應，產品的快速成型以及開發效率的提升有著重要意義。尤其是在大型應用中，不管是給開發人員，設計人員或企業，實現了頁面的工廠式生產，極大地提升了提升了效率，減少了成本。