本文分享自華為雲社群《TinyEngine低程式碼引擎2.0新特性介紹》,作者:OpenTiny。
自從TinyEngine開源以來,眾多開發者已經將TinyEngine應用於生產環境,見證了其在實際專案中的表現。然而,隨著專案的持續迭代和使用者群體的不斷擴大,我們發現使用者在深度定製方面會遇到一些阻礙,其中最核心的問題集中在:原始碼二次開發管理問題以及定製化能力不夠強大,想要深度定製必須修改原始碼,而當開發者們在TinyEngine的原始碼中融入了大量的定製業務邏輯,這又使得直接合並TinyEngine自身的新功能變得異常困難,常常引發程式碼衝突和錯誤。
為了解決使用者的這些痛點問題,TinyEngine團隊投入了大量的時間,對TinyEngine的架構進行了最佳化和調整。這次的調整不僅提升了其核心效能,還精心打磨了一系列創新功能,旨在為開發者提供更流暢、更高效的開發體驗。
TinyEngine2.0新特性介紹
最佳化的開發體驗:包引入與CLI工具
TinyEngine 2.0 版本的一大亮點是將原始碼開發變成了包引入的模式,並且與之相結合的提供了CLI工具,徹底改變了使用者二次開發的方式。告別傳統克隆原始碼模式,一鍵生成低程式碼平臺專案。這裡提供了 @opentiny/tiny-engine-cli 這個強大的 CLI 工具,只需執行一條簡單的命令即可快速生成一個以 TinyEngine 為基礎的低程式碼平臺專案:
npx @opentiny/tiny-engine-cli create
生成的專案中tiny-engine作為一個核心npm包,package.json 檔案依賴包含:
-
核心依賴:@opentiny/tiny-engine、主題等。
-
開發依賴:@opentiny/tiny-engine-vite-config、@opentiny/tiny-engine-mock 等,為開發提供便利。
這樣的開發模式,主要有以下幾個特點:
-
非侵入式開發 ,可以將二次開發內容與TinyEngine核心程式碼進行分離,避免對核心程式碼造成汙染;
-
增強版本相容性,擺脫原始碼修改管理迭代更新難問題,可以輕鬆同步TinyEngine的官方程式碼;
-
提高開發效率,CLI工具可以提供豐富的命令和腳手架,幫助開發者快速搭建低程式碼平臺;
-
聚焦業務編碼,提供了一種標準化的開發流程,使得開發者能夠迅速進入編碼狀態。
開創性的“洛書架構”
在深入探討該架構之前,大家可以先理解一個熟悉的計算機概念——Windows登錄檔。Windows登錄檔是一箇中心化的資料庫,它儲存著系統、軟體程式以及硬體裝置的配置和設定資訊,為作業系統提供了一個統一的機制來儲存和檢索關鍵資料,確保了系統的穩定性和程式的正確執行。這樣的設計給TinyEngine也提供了靈感,TinyEngine也可以藉助這樣的概念,給開發者提供出一個這樣的架構:
-
豐富的配置能力:架構應覆蓋全面,能夠對整個系統的元件、配置項、API等內容進行細緻的定製化配置,以滿足不同場景的需求。
-
靈活的替換機制:透過登錄檔機制,可以輕鬆地對元件、API等內容進行替換,實現靈活的插拔和定製。
-
函式級別的覆蓋能力:當配置和替換能力無法滿足特定需求時,提供函式級別的覆蓋能力,作為最後的解決方案,確保使用者可以實現個性化的功能。
基於這樣的原則,我們推出了我們TinyEngine的洛書架構。它擁有全域性的內容儲存,記錄了所有可配置化的資訊。這個架構允許進行外掛的可插拔操作,實現外掛的配置化管理,以及對外掛API的集中管理。這樣的設計不僅提高了系統的靈活性,也為開發者提供了極大的便利。
“洛書架構”為二次開發專案還提供了一種無縫對接最新特性的方式。在軟體開發的實際操作中,將基座系統的新特性同步到定製系統中往往是一項複雜的任務。當一個系統已經積累了大量的定製業務程式碼時,嘗試直接整合新功能不僅會面臨巨大的技術挑戰,還可能對現有業務邏輯的穩定性以及系統的可維護性造成不利影響。在TinyEngine 2.0版本中,這一問題得到了有效的解決。
TinyEngine 2.0引入了一系列創新的架構設計和功能增強,使得新特性的整合變得更加順暢和高效。
interface MetaApp {
id: string
// 入口元件
entry?: VueComponent
// 可供定製的區域性模組元件,例如定製 header、footer
components?: Record<string, VueComponent>
// 對外提供的api介面
apis?: Record<string, Function>
// component的配置項
options?: Record<string, any>
// 佈局
layout?: MetaApp
// 生命週期
lifeCycle?: Record<string, Function>
// 覆蓋邏輯
overwrite?: Overwrite
…… // 其餘可配置的項
}
這種架構允許專案動態地註冊和使用TinyEngine的新功能,無需複雜的升級過程。這意味著開發者可以立即使用TinyEngine的最新成果,這種同步機制不僅提高了開發效率,還確保了專案能夠快速響應TinyEngine的更新,保持技術的先進性。
佈局靈活:自由定義
“洛書架構”是TinyEngine的一大創新,它提供了一種靈活的架構系統,允許開發者根據業務需求自由定義整個設計器的佈局。在調研使用TinyEngine的開發者的過程中,發現TinyEngine被用於各種專案中,這也導致了佈局非常多樣化。例如:有在底部加上schema皮膚、有在畫布旁邊加上流程相關皮膚、建立頁面時彈窗展示頁面模板等豐富的佈局。
為了相容多種佈局,“洛書架構”的推出可以滿足開發者可以輕鬆地建立複雜的頁面佈局,而無需擔心底層實現的複雜性。這種靈活性使得TinyEngine成為一個強大的工具,能夠滿足從簡單到複雜的各種開發需求。
畫布可以修改:技術棧畫布的靈活切換
除了設計器佈局型別比較豐富以外,畫布的型別也是非常多的。例如,在需要快速佈局的頁面編排場景中,可以選擇文件流式畫布;而在需要精確控制的流程平臺中,則可以使用圖元編排的畫布。
TinyEngine的“洛書架構”支援根據應用場景靈活切換技術棧畫布,這意味著開發者可以根據專案的具體需求選擇最合適的技術方案。這種靈活性使得TinyEngine能夠適應不同的開發需求,提供高效的定製化開發支援。
快速使用第三方元件庫
TinyEngine預設匯入的元件庫是華為雲開源的TinyVue元件庫。在開源之後,收到了部分小夥伴的反饋:“公司目前是使用elementUI元件庫的。能不能支援我們匯入第三方元件庫。”這個答案是肯定的。
得益於TinyEngine的渲染機制,TinyEngine支援匯入其他的元件庫,如elementUI和Ant Design Vue(antdUI),極大地簡化了整合流程。除此以為,TinyEngine還提供元件複用方案,提供了區塊的能力。開發者能夠將業務系統中可複用的元件提取出來,打包並上傳到平臺的資產管理庫中,集中管理版本,使其更靈活、更易用。相關的區塊區域網部署方案也已經放到官網文件裡面了,大家可以查閱。
(官網文件:https://opentiny.design/tiny-engine)
出碼可以定製成任意語言
TinyEngine的核心優勢在於其對多種技術棧的深度支援。無論是前端開發中的主流框架Vue和React,還是為鴻蒙系統量身打造的ArkTS語言,TinyEngine都能夠靈活定製並輸出相應技術棧的程式碼。這種多技術棧的支援,使得TinyEngine能夠適應各種開發需求。我們的開發者現在可以根據專案的具體需求,選擇最合適的技術棧,增強了專案的適應性和擴充套件性。
TinyEngine低程式碼引擎的靈活程式碼輸出能力,為開發者提供了一個強大的開發環境,可以根據系統自身的需要定製出需要的出碼語言。
嵌入任意的系統中使用
TinyEngine能夠高效整合至各垂直領域業務系統,實現與第三方系統的無縫對接和引數流轉。這種整合能力,使得TinyEngine在多種業務場景中都能使用,無論是AI、流程管理還是教育領域,都能提供量身定製的解決方案。這種整合使得TinyEngine成為一個強大的工具,能夠滿足各種業務需求。
未來展望
TinyEngine 2.0 的釋出,也讓TinyEngine自我迭代更新之路邁出了重要一步,希望全新的靈活定製擴充套件能力能夠助力開發者更好的構建自己的低程式碼平臺。未來,TinyEngine也計劃引入更多功能,增強低程式碼編排能力,讓開發過程體驗更友好。
模型驅動,高效開發頁面
目前TinyEngine在規劃中不僅支援模型驅動開發,還允許開發者輕鬆實現模型事件的繫結,快速構建多樣化的業務頁面。透過模型驅動架構,TinyEngine提升了程式碼的一致性和可讀性,使得開發過程更加高效,同時也降低了後期維護的難度。這種架構的優勢在於,它將業務邏輯從程式碼中抽象出來,使得開發者可以更加專注於業務本身,而不是深陷程式碼的細節。開發者可以利用TinyEngine的模型驅動開發功能,快速構建業務頁面,大大減少了程式碼編寫的工作量,加速了整個開發流程。
AI輔助開發
TinyEngine深度融合AI輔助開發,透過AI的深度整合,使用者可以迅速響應業務需求,從設計到程式碼實現一鍵轉換,最佳化開發流程,縮短專案週期。目前,AI輔助開發依賴於大模型的生成能力。大模型的生成能力其實時好時壞。有時候生成的程式碼渲染在畫布上面是非常高效的, 幾句話就能生成一個互動頁面,但是有時候生成的程式碼又是不可用的,導致畫面渲染不出來。這功能我們內部也在持續孵化完善中。
對於TinyEngine低程式碼引擎有更多想要了解的,歡迎觀看TinyEngine低程式碼引擎系列直播課(第1講——第6講):https://space.bilibili.com/15284299