基于企業集成平臺的前端代碼快速生成工具的對比研究與應用

蔣慧寧

摘要： 針對當前企業業務與生產信息化應用系統建設過程中存在“涉及業務流程繁雜，功能需求相對簡單，平臺對接方式固定，后期接手運維耗時”等問題，廣泛調研各類現有開源前端代碼快速生成工具，結合自身需求，選擇最優解，并在此基礎上進一步開發出對接平臺、UI風格一致的前端代碼快速生成工具，提升信息系統開發效率，便于后期運維，同時節約出更多時間用于業務流程調研與分析，增強系統可用性與用戶滿意度，達到“開發運維一體化”的目標。

關鍵詞：應用集成平臺；代碼生成工具；敏捷開發；一體化

一、前言

軟件技術的發展促使軟件的應用范圍越來越廣泛，軟件提供的功能也越來越多，應用軟件的規模和復雜程度也隨著發展而越來越大。伴隨著信息產業的不斷深入發展，企業應用系統的需求和開發環境變得越來越復雜，帶來的是更加復雜困難的開發過程。從早期的瀑布模式、迭代開發到螺旋開發，一直發展到現在常用的敏捷開發，傳統軟件開發方法暴露出新技術環境下的缺陷，比如開發周期漫長，工作重復較大，給系統的演進和維護造成了很大的困難，縮短軟件開發的時間和降低人力成本直接或間接影響了軟件企業的發展和競爭力。漸漸的，縮短軟件開發周期和降低軟件開發工作量成為了軟件從業人員關心的問題。

代碼自動生成技術作為關鍵內容融入到開發框架是可行的，一方面眾多框架技術日益成熟，眾多設計模式普遍應用，使軟件設計層次清晰化，構件規范化，實現軟件的代碼中大部份變得有章可循，這是可以應用代碼自動生成技術的前提條件之一。另一方面，與開發平臺供應商的關注點不同，從同一領域、同一行業，甚至小到一個項目的角度來分析業務模式，會發現它一定能提取出更多的相似業務、相似界面、相似功能。這些潛在的業務模式的重復性也正是應用代碼自動生成技術的另一個前提條件。

目前，市面上雖然有大量的不同類型的不同功能的代碼生成工具，但還并沒有人對這些代碼生成工具進行一個整體的對比分析，即使有少量的人將兩三種代碼生成工具做對比，也未得出最終適用于自身情況的答案。因此基于對代碼快速生成工具的需求，本文選擇側重于前端代碼快速生成工具的方向進行深入研究。

前端代碼快速生成工具，顧名思義，是一種用于快速生成前端代碼的一種工具，即根據用戶對于系統的各類不同需求建模后，自動生成源代碼的工具程序或軟件。本文通過充分調研與對比分析八種市面上比較常見的可用于快速生成前端代碼的代碼生成工具，將其一一試用并記錄其功能完備、適配語言、代碼可用性等等方面的性能指標的異同；并且，將各類前端代碼快速生成工具的參數進行詳細對比分析，選出使用感受較好的幾款，用于具體項目的代碼構建中去，切實體會其功能的優劣；最后，根據使用感受確定一款簡單易上手、功能完整并且適用于當前開發組編碼習慣的前端代碼快速生成工具，加上進一步的設計開發，最終得到一款既可以縮短開發周期、降低軟件開發工作量，又可以培養員工形成良好的代碼習慣、在開發過程中也能不斷學習到軟件知識的代碼快速生成工具，投入到未來的軟件自主研發工作中去[1-2]。

二、工具需求

作為企業來講，為做好信息化發展轉型工作，必須培養軟件自主研發的能力，但員工軟件開發能力的參差不齊注定給自主研發能力的提升不斷提出新的挑戰。同時，在日常的軟件開發過程中，逐漸顯現出企業信息系統對功能的要求并不復雜，但業務審批、數據流轉等流程的需求卻很復雜的問題。頁面的數據展示樣式、增刪改查跳轉調用邏輯等都相差不大，但開發時仍需要每個功能頁面復制粘貼基本重復的代碼和接口，大量的寶貴時間被用在了重復勞動之中；此外，不同的開發人員編寫的代碼勢必會存在強烈的個人風格，不論是變量、接口的命名方式，還是代碼的排版格式，這些看似細微的差異都會導致開發后期的代碼整合與運維出現困難[3]。

綜上，可以明確的提出對于前端代碼快速生成工具的一些需求：

（1）支持生成簡單易懂易于學習使用的代碼框架；

（2）支持生成完善的前端代碼，包括HTML、CSS、JS等，且能有效利用到開發環境中；

（3）支持導入以前項目的開發模板，套用原有的模型樣式；

（4）前端代碼快速生成工具本身要入門簡單、上手快；

（5）支持進行頁面樣式的具體設計和排版；

（6）支持團隊合作的開發模式。

在得出了明確的需求之后，利用各種渠道搜索市面上口碑較好的前端代碼快速生成工具，并簡單對比后，選出了八種可以大致符合以上需求的產品，并簡單將其根據各自的特點和用法等方面，進行初步的分類，以便于之后的具體了解使用以及對比分析。其中Vue CLI和懶猴子CG由于都重點生成前端腳手架項目而分為一組；LayoutIt、ibootstrap、GrapesJS、magicalcoder都是基本基于圖形頁面、拖拽組件排版生成前端頁面，分為一組；Yeoman和JHipster由于都是基于命令的、又可以生成優秀代碼框架的前端代碼快速生成工具而分為一組。

三、工具對比與分析

（一）Vue CLI和懶猴子CG

Vue CLI是Vue 項目腳手架，支持自定義腳手架內容，它是用于快速Vue.js開發的完整系統，提供運行時依賴項、豐富的官方插件集合和完整的圖形用戶界面等服務，還可以開發并引入CLI插件，為項目添加額外的功能。直接下載并運行vue-cli初始hello-world示例項目可以得到一個結構完整的腳手架項目。

懶猴子CG采用四個階段的預編譯和兩個階段的生成來實現跨語言的代碼生成場景。用戶可以根據喜好和需求選擇技術棧來生成框架，或者在已有的系統代碼基礎上進行快速開發，也可以選擇自定義一個模板幫助完成重復工作、保證代碼規范和技術棧統一。在線生成框架方面，主要支持生成Java、JavaScript、Vue三大類。

通過對比生成的腳手架項目代碼文件結構可以看出，同樣是簡單代碼生成器，懶猴子的文件結構更加規范完整，但生成代碼量較小[4-5]。

（二）LayoutIt、ibootstrap、GrapesJS、magicalcoder

LayoutIt官網提供了拖拽Bootstrap組件生成前端頁面的Bootstrap構建器，它簡化了Bootstrap組件的使用，只需要簡單的拖拽就可以繪制出一個前端界面的樣式模型，這不僅可以利用于前端代碼的快速生成，還可以用于項目經理構建項目樣式模型，這樣生成的模型代碼下載后很大程度上的一部分可以利用到前端頁面的開發中。

ibootstrap與LayoutIt的Bootstrap構建器基本一樣，均為拖拽組件生成頁面，不同的是LayoutIt的組件無法完成交互，而ibootstrap的組件可以完成交互，不足之處是生成代碼僅有html代碼，且需要復制粘貼到自己的項目中。

GrapesJS結合了不同的工具和功能，同樣采用拖放的形式，主要針對于內容的編輯而不是結構框架的構建。可用官網的網頁版的demo以及通訊版的demo，也可以選擇跟著文檔自己構建一個編輯器。但自己繪制畫布無形中增加了上手難度。

magicalcoder的功能包括一個基于JS的動態可視化H5布局器，能夠支持當前互聯網上開源UI或者用戶定制的任何JS組件的可視化開發；另一個功能叫做代碼生成器，主要用于連接數據庫獲取數據庫結構字段后自動生成基本的增刪改查接口，便于用戶在生成代碼的基礎上繼續開發，大大縮短項目的開發周期。布局器內可選擇的組件類型有Element、Layui、AntDesgin、Bootstrap4等，充分滿足不同語言不同開發習慣的不同需求。

通過對比可以看出，這四種前端代碼快速生成工具都存在一個共同的不足：無法下載完整代碼。其中LayoutIt下載的CSS和JS文件有部分加密；ibootstrap和magicalcoder只能下載HTML代碼，GrapesJS無法下載JS代碼。

（三）Yeoman和JHipster

Yeoman提供了靈活創建、開發、編譯和調試腳手架新途徑，支持使用各種不同的工具和接口協同優化項目的生成，意在精簡開發過程。在Yeoman官網上可以看到詳細的起步方法和教程，其中教程非常詳細的講述了如何構建一個todo list程序、運行、測試并實現本地儲存和交付生產的步驟，同時也簡單介紹了生成的項目的文件結構，方便使用者快速掌握并開始開發代碼。

JHipster可快速生成、開發和部署現代Web應用程序和微服務架構，是可以快速投入開發使用的樣板，它支持許多前端技術，包括Angular，React和Vue等等，用戶可安裝官方藍圖選擇生成spring-boot+Vue等多種前后端組合的項目藍圖，并利用這個藍圖生成帶有一定頁面邏輯樣式的樣板代碼。

通過對比Yeoman和JHipster這兩種工具，可以明顯感覺到JHipster在生成代碼的完整性方面占有很大的優勢。只需在官方提供的藍圖基礎上修改UI與基本邏輯代碼，即可生成簡單增刪改查頁面與接口都配置完整、風格統一的前端框架，直接進行復雜頁面功能的開發即可。

四、本地化開發

通過對八種工具的橫向與縱向對比，可以得出結論，還是JHipster的各方面的都較為符合當前的項目研發模式，尤其是其Vue+ts的技術框架十分有利于軟件開發入門人員快速養成良好代碼習慣、規范代碼格式[6]。但JHipster若要自己定義藍圖進行項目生成，就需要一個比較好的頁面模型來支撐，這時可以引入其他的針對內容的前端代碼快速生成工具來完善其頁面樣式，做到取長補短。如圖1所示。

由于當前開發的項目前端大都是用Vue來實現，所以選擇根據JHipster官網提供的Vue+Spring-Boot模板即Vuejs藍圖模板，更改了相關的配置并導入設計好的數據庫JDL，就可以得到一個擁有完整增刪改查邏輯的模板項目。在這個模板項目的基礎上，可以加入自己需要的組件應用、更改API配置、頁面模型、實體類生成邏輯等等，這無疑讓藍圖的功能進一步擴充，生成自定義藍圖，讓JHipster的功能也變得更加強大，更加符合既具備企業風格UI又與應用集成平臺對接完善的實際需求。由自定義藍圖可快速生成功能完備的系統代碼。

應用至具體系統開發中流程如下：

（1）下載官方藍圖；（2）根據具體的需求更改藍圖的生成頁面樣式、組件布局、跳轉邏輯、登錄鑒權、API接口規范、ci配置文件、前端依賴等內容；（3）發布自定義藍圖；（4）利用自定義藍圖生成初始項目；（5）設計系統數據庫并編寫JDL；（6）將設計好的JDL文件引入初始項目，生成對應數據庫表的前后端代碼；（7）根據其余復雜的需求完善系統功能和頁面樣式。

五、實際應用效果

目前基于本藍圖開發的信息系統已有近10套，均反饋能有效提升開發效率，規范代碼格式。其中電工材料系統頁面功能簡單、算法復雜，項目組基本完全使用藍圖生成的前端代碼，著重開發算法模塊，僅用1個半月時間就完成了系統開發上線工作；

土地信息系統由于功能點重復性較高，在原自定義藍圖的基礎上進行二次開發，再快速生成代碼，最終僅用2個月時間就完成了20余項功能點的開發工作，且代碼符合標準規范，風格高度統一，為后期運維工作奠定了良好基礎；

開發鉆井甲供料系統僅用4個月時間就完成了全部36個功能點的敏捷迭代開發工作，上線后從系統功能、頁面交互等方面均收獲了用戶好評，年登錄次數超2萬次，提升工作效率30%。

六、結語

經過進一步的實際使用，JHipster的藍圖在本地化開發后確實給開發初期生成項目的代碼框架模板起到了積極推動的作用，極大的提升了開發效率，節約了重復勞動時間至少50%。在實際使用中，針對JHipster的自定義藍圖在需要自己設計頁面的樣式模的部分，可進一步優化，引入magicalcoder等其他頁面內容類型的代碼生成工具，會進一步縮短藍圖開發時間，使工具變得更加簡單易用，增刪改查邏輯也僅需集中開發一次自定義藍圖，效率方面也不存在問題。

本文認為該代碼生成工具已具備了很大推廣價值并已在團隊內部得到廣泛應用。但是，本地化的藍圖開發本身就存在一定技術難度，且只能生成固定模板的前端代碼，需進一步增強其易用性和靈活性，以滿足企業的實際需求。未來，這種工具和開發機制也會不斷的在實踐中被考驗和錘煉，一定可以真正應用于企業自主研發工作中去。H

參考文獻

[1]方敏，應晶等.基于模板工程的軟件開發自動化框架研究[J].浙江大學學報（工學版），2007（03）：396-401+417.

[2]張志飛.前端工程化的研究與實踐[J].電腦知識與技術，2016，12（25）：224-226.

[3]Azat Mardan. Node.js項目實踐構建可擴展的 Web 應用[M].北京： 電子工業出版社，2015.

[4]王博，舒新峰，王小銀，等.自動代碼生成技術的發展現狀與趨勢[J].西安郵電大學學報，2018，23（03）：1-12.

[5]呂亮亮.微服務在石油化工企業的多平臺整合中的應用[J].電子技術與軟件工程，2019（01）：63-64.

[6]徐勇.Web前端代碼生成技術研究與系統實現[D].揚州大學，2021.