蔣慧寧

摘要： 針對(duì)當(dāng)前企業(yè)業(yè)務(wù)與生產(chǎn)信息化應(yīng)用系統(tǒng)建設(shè)過程中存在“涉及業(yè)務(wù)流程繁雜，功能需求相對(duì)簡(jiǎn)單，平臺(tái)對(duì)接方式固定，后期接手運(yùn)維耗時(shí)”等問題，廣泛調(diào)研各類現(xiàn)有開源前端代碼快速生成工具，結(jié)合自身需求，選擇最優(yōu)解，并在此基礎(chǔ)上進(jìn)一步開發(fā)出對(duì)接平臺(tái)、UI風(fēng)格一致的前端代碼快速生成工具，提升信息系統(tǒng)開發(fā)效率，便于后期運(yùn)維，同時(shí)節(jié)約出更多時(shí)間用于業(yè)務(wù)流程調(diào)研與分析，增強(qiáng)系統(tǒng)可用性與用戶滿意度，達(dá)到“開發(fā)運(yùn)維一體化”的目標(biāo)。

關(guān)鍵詞：應(yīng)用集成平臺(tái)；代碼生成工具；敏捷開發(fā)；一體化

一、前言

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

代碼自動(dòng)生成技術(shù)作為關(guān)鍵內(nèi)容融入到開發(fā)框架是可行的，一方面眾多框架技術(shù)日益成熟，眾多設(shè)計(jì)模式普遍應(yīng)用，使軟件設(shè)計(jì)層次清晰化，構(gòu)件規(guī)范化，實(shí)現(xiàn)軟件的代碼中大部份變得有章可循，這是可以應(yīng)用代碼自動(dòng)生成技術(shù)的前提條件之一。另一方面，與開發(fā)平臺(tái)供應(yīng)商的關(guān)注點(diǎn)不同，從同一領(lǐng)域、同一行業(yè)，甚至小到一個(gè)項(xiàng)目的角度來分析業(yè)務(wù)模式，會(huì)發(fā)現(xiàn)它一定能提取出更多的相似業(yè)務(wù)、相似界面、相似功能。這些潛在的業(yè)務(wù)模式的重復(fù)性也正是應(yīng)用代碼自動(dòng)生成技術(shù)的另一個(gè)前提條件。

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

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

二、工具需求

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

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

（1）支持生成簡(jiǎn)單易懂易于學(xué)習(xí)使用的代碼框架；

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

（3）支持導(dǎo)入以前項(xiàng)目的開發(fā)模板，套用原有的模型樣式；

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

（5）支持進(jìn)行頁(yè)面樣式的具體設(shè)計(jì)和排版；

（6）支持團(tuán)隊(duì)合作的開發(fā)模式。

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

三、工具對(duì)比與分析

（一）Vue CLI和懶猴子CG

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

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

通過對(duì)比生成的腳手架項(xiàng)目代碼文件結(jié)構(gòu)可以看出，同樣是簡(jiǎn)單代碼生成器，懶猴子的文件結(jié)構(gòu)更加規(guī)范完整，但生成代碼量較小[4-5]。

（二）LayoutIt、ibootstrap、GrapesJS、magicalcoder

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

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

GrapesJS結(jié)合了不同的工具和功能，同樣采用拖放的形式，主要針對(duì)于內(nèi)容的編輯而不是結(jié)構(gòu)框架的構(gòu)建?？捎霉倬W(wǎng)的網(wǎng)頁(yè)版的demo以及通訊版的demo，也可以選擇跟著文檔自己構(gòu)建一個(gè)編輯器。但自己繪制畫布無形中增加了上手難度。

magicalcoder的功能包括一個(gè)基于JS的動(dòng)態(tài)可視化H5布局器，能夠支持當(dāng)前互聯(lián)網(wǎng)上開源UI或者用戶定制的任何JS組件的可視化開發(fā)；另一個(gè)功能叫做代碼生成器，主要用于連接數(shù)據(jù)庫(kù)獲取數(shù)據(jù)庫(kù)結(jié)構(gòu)字段后自動(dòng)生成基本的增刪改查接口，便于用戶在生成代碼的基礎(chǔ)上繼續(xù)開發(fā)，大大縮短項(xiàng)目的開發(fā)周期。布局器內(nèi)可選擇的組件類型有Element、Layui、AntDesgin、Bootstrap4等，充分滿足不同語(yǔ)言不同開發(fā)習(xí)慣的不同需求。

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

（三）Yeoman和JHipster

Yeoman提供了靈活創(chuàng)建、開發(fā)、編譯和調(diào)試腳手架新途徑，支持使用各種不同的工具和接口協(xié)同優(yōu)化項(xiàng)目的生成，意在精簡(jiǎn)開發(fā)過程。在Yeoman官網(wǎng)上可以看到詳細(xì)的起步方法和教程，其中教程非常詳細(xì)的講述了如何構(gòu)建一個(gè)todo list程序、運(yùn)行、測(cè)試并實(shí)現(xiàn)本地儲(chǔ)存和交付生產(chǎn)的步驟，同時(shí)也簡(jiǎn)單介紹了生成的項(xiàng)目的文件結(jié)構(gòu)，方便使用者快速掌握并開始開發(fā)代碼。

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

通過對(duì)比Yeoman和JHipster這兩種工具，可以明顯感覺到JHipster在生成代碼的完整性方面占有很大的優(yōu)勢(shì)。只需在官方提供的藍(lán)圖基礎(chǔ)上修改UI與基本邏輯代碼，即可生成簡(jiǎn)單增刪改查頁(yè)面與接口都配置完整、風(fēng)格統(tǒng)一的前端框架，直接進(jìn)行復(fù)雜頁(yè)面功能的開發(fā)即可。

四、本地化開發(fā)

通過對(duì)八種工具的橫向與縱向?qū)Ρ?，可以得出結(jié)論，還是JHipster的各方面的都較為符合當(dāng)前的項(xiàng)目研發(fā)模式，尤其是其Vue+ts的技術(shù)框架十分有利于軟件開發(fā)入門人員快速養(yǎng)成良好代碼習(xí)慣、規(guī)范代碼格式[6]。但JHipster若要自己定義藍(lán)圖進(jìn)行項(xiàng)目生成，就需要一個(gè)比較好的頁(yè)面模型來支撐，這時(shí)可以引入其他的針對(duì)內(nèi)容的前端代碼快速生成工具來完善其頁(yè)面樣式，做到取長(zhǎng)補(bǔ)短。如圖1所示。

由于當(dāng)前開發(fā)的項(xiàng)目前端大都是用Vue來實(shí)現(xiàn)，所以選擇根據(jù)JHipster官網(wǎng)提供的Vue+Spring-Boot模板即Vuejs藍(lán)圖模板，更改了相關(guān)的配置并導(dǎo)入設(shè)計(jì)好的數(shù)據(jù)庫(kù)JDL，就可以得到一個(gè)擁有完整增刪改查邏輯的模板項(xiàng)目。在這個(gè)模板項(xiàng)目的基礎(chǔ)上，可以加入自己需要的組件應(yīng)用、更改API配置、頁(yè)面模型、實(shí)體類生成邏輯等等，這無疑讓藍(lán)圖的功能進(jìn)一步擴(kuò)充，生成自定義藍(lán)圖，讓JHipster的功能也變得更加強(qiáng)大，更加符合既具備企業(yè)風(fēng)格UI又與應(yīng)用集成平臺(tái)對(duì)接完善的實(shí)際需求。由自定義藍(lán)圖可快速生成功能完備的系統(tǒng)代碼。

應(yīng)用至具體系統(tǒng)開發(fā)中流程如下：

（1）下載官方藍(lán)圖；（2）根據(jù)具體的需求更改藍(lán)圖的生成頁(yè)面樣式、組件布局、跳轉(zhuǎn)邏輯、登錄鑒權(quán)、API接口規(guī)范、ci配置文件、前端依賴等內(nèi)容；（3）發(fā)布自定義藍(lán)圖；（4）利用自定義藍(lán)圖生成初始項(xiàng)目；（5）設(shè)計(jì)系統(tǒng)數(shù)據(jù)庫(kù)并編寫JDL；（6）將設(shè)計(jì)好的JDL文件引入初始項(xiàng)目，生成對(duì)應(yīng)數(shù)據(jù)庫(kù)表的前后端代碼；（7）根據(jù)其余復(fù)雜的需求完善系統(tǒng)功能和頁(yè)面樣式。

五、實(shí)際應(yīng)用效果

目前基于本藍(lán)圖開發(fā)的信息系統(tǒng)已有近10套，均反饋能有效提升開發(fā)效率，規(guī)范代碼格式。其中電工材料系統(tǒng)頁(yè)面功能簡(jiǎn)單、算法復(fù)雜，項(xiàng)目組基本完全使用藍(lán)圖生成的前端代碼，著重開發(fā)算法模塊，僅用1個(gè)半月時(shí)間就完成了系統(tǒng)開發(fā)上線工作；

土地信息系統(tǒng)由于功能點(diǎn)重復(fù)性較高，在原自定義藍(lán)圖的基礎(chǔ)上進(jìn)行二次開發(fā)，再快速生成代碼，最終僅用2個(gè)月時(shí)間就完成了20余項(xiàng)功能點(diǎn)的開發(fā)工作，且代碼符合標(biāo)準(zhǔn)規(guī)范，風(fēng)格高度統(tǒng)一，為后期運(yùn)維工作奠定了良好基礎(chǔ)；

開發(fā)鉆井甲供料系統(tǒng)僅用4個(gè)月時(shí)間就完成了全部36個(gè)功能點(diǎn)的敏捷迭代開發(fā)工作，上線后從系統(tǒng)功能、頁(yè)面交互等方面均收獲了用戶好評(píng)，年登錄次數(shù)超2萬次，提升工作效率30%。

六、結(jié)語(yǔ)

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

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

參考文獻(xiàn)

[1]方敏，應(yīng)晶等.基于模板工程的軟件開發(fā)自動(dòng)化框架研究[J].浙江大學(xué)學(xué)報(bào)（工學(xué)版），2007（03）：396-401+417.

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

[3]Azat Mardan. Node.js項(xiàng)目實(shí)踐構(gòu)建可擴(kuò)展的 Web 應(yīng)用[M].北京： 電子工業(yè)出版社，2015.

[4]王博，舒新峰，王小銀，等.自動(dòng)代碼生成技術(shù)的發(fā)展現(xiàn)狀與趨勢(shì)[J].西安郵電大學(xué)學(xué)報(bào)，2018，23（03）：1-12.

[5]呂亮亮.微服務(wù)在石油化工企業(yè)的多平臺(tái)整合中的應(yīng)用[J].電子技術(shù)與軟件工程，2019（01）：63-64.

[6]徐勇.Web前端代碼生成技術(shù)研究與系統(tǒng)實(shí)現(xiàn)[D].揚(yáng)州大學(xué)，2021.