Velocity 不用愁!Velocity 系統的前端工程化之路

来源:https://www.cnblogs.com/jingdongkeji/archive/2023/05/24/17427897.html
-Advertisement-
Play Games

Velocity是一個基於Java的Web頁面模版引擎。十多年前,Velocity將Java代碼從Web頁面中分離出來,使得開發者能夠並行網頁開發和Java開發。隨著十年前後端分離的浪潮涌動,迴首再面對這些基於Velocity的舊系統,無論是後端還是前端人員維護,都會存在諸多問題 ...


Velocity是一個基於Java的Web頁面模版引擎。十多年前,Velocity將Java代碼從Web頁面中分離出來,使得開發者能夠並行網頁開發和Java開發。隨著十年前後端分離的浪潮涌動,迴首再面對這些基於Velocity的舊系統,無論是後端還是前端人員維護,都會存在諸多問題:

(1)後端人員維護:不熟悉前端開發模式,需要花費大量精力學習UI和Js框架;

(2)前端人員維護:Velocity渲染依賴Java環境,需要花費大量精力學習Maven工程、環境配置,且前端MVC框架版本老,開發效率低。

這種情況廣泛存在於零售內部的一些舊系統中,且業務需求的不斷迭代,會導致系統維護成本越來越高。針對需要頻繁迭代的頁面模塊,常見的應對措施是採用前後端分離方案,對頁面進行整體重構,但如此以後,整體重構的代價是巨大的,主要體現在如下幾點:

(1)需要覆蓋所有的業務場景和需求;

(2)缺乏覆蓋全場景的測試物料;

(3)頁面重構本身不帶來業務價值。

我們團隊承擔了B端業務,由於業務啟動時間早,也不可避免需要維護這些Velocity系統。

針對老系統維護難的痛點,我們在實踐中探索了一種對老系統侵入程度低、技術架構緩步升級的技術路線,分為4個步驟,分別是(1)搭建Velocity+MVC+MVVC混合架構;(2)建立Velocity單文件組件化能力;(3)創建Velocity本地沙盒環境;(4)Velocity頁面前後端分離。下麵分別進行詳細說明:

一、 搭建Velocity + MVC + MVVC混合架構

Velocity系統多數還在使用JQuery等Js框架,開發效率低,亟待改善。對比MVC框架和MVVC框架,MVVC框架封裝了視圖層邏輯,開發效率顯著提升。

因此第一個步驟是在Velocity頁面中引入MVVC框架,實現兩套技術架構的共存。我們引入了Vue以及配套的UI組件庫,考慮Vue的主要因素有以下幾點:

(1)Vue支持Js資源鏈接的方式引入和使用,即在Velocity頁面中加入一行script標簽即可實現開箱即用;

(2)Velocity的頁面編寫語法與Vue的模板語法非常接近。

混合架構內部,模板渲染需要分兩步進行: Velocity模板首先在服務端渲染為Vue模板,Vue模板在客戶端渲染為最終頁面。

混合架構存在的問題是,由於一些Session內關鍵參數是伺服器直出,Vue並不能直接獲取到這些參數,因此傳參的方案是在頁面中提前埋了一些占位符,Vue執行時通過訪問DOM來獲取。

後續需求迭代時,可以逐步將業務邏輯從老舊MVC技術棧遷移到新的MVVC技術棧中,實現開發、維護效率的提升。

二、 建立Velocity單文件組件化能力

當項目規模較大時,不同模塊之間可能存在一些相似的功能或邏輯,擺在面前的問題是如何實現模塊級的功能復用。

因此第二個步驟是在Velocity系統中引入組件化能力,實現跨頁面代碼復用。Velocity系統由於渲染依賴Java環境,難以適用基於NodeJs的前端工程化能力,無法直接使用Vue的單文件組件化能力。幸運的是,可以利用Velocity的包含(#include)和解析(#parse)能力,配合Vue的API介面,實現一種創新型的Velocity+Vue單文件組件化技術。

如果你熟悉Vue,你肯定對Vue單文件組件很熟悉了,即一個文件名以.vue尾碼結尾的文件,它描述了一個Vue組件,內部結構的三板斧:template、script、style,簡單來說分別描述了組件的模板呈現、邏輯交互、css樣式。

Velocity單文件組件的組織方式參照了這個層級結構,使用一個文件名以.vm尾碼結尾的文件,描述了一個Velocity組件,由於缺乏工程化的能力,區別點在於:(1)為了相容低版本瀏覽器,需要使用script標簽來承載模板;不考慮瀏覽器相容性的情況下,也可以直接使用template標簽。(2)需要手動調用Vue.component執行組件的註冊。

實現單文件組件化之後,Velocity頁面可以通過粒度更小的組件來層層組裝,實現系統的業務耦合程度進一步降低。

三、 創建Velocity本地沙盒環境 + 前端工程化

前面兩個步驟對系統整體架構進行了大幅優化,但是仍有一個痛點沒解決:Velocity渲染依賴Java環境,習慣了本地開發的前端同學會很無語:改一個小問題需要本地盲開發->線上部署容器->看效果->繼續盲修改,一來二去幾個小時就過去了。

因此第三個步驟是實現Velocity本地編譯和開發環境,並且引入工程化技術實現熱更新。

解決Velocity本地編譯的核心思路是模擬Server的環境變數,並且支持Velocity語法編譯。我們搭建了一套基於Velocity的前端沙盒工程,前者通過在工程中mock服務端變數的方式來實現,在本地JSON數據源承載這些環境變數;後者是基於Velocity語法AST重構,開發了一套解析引擎Velocity-loader,支持在webpack中實時解析文件並註入環境參數。

沙盒能力引入後,開發流程轉變為本地實時開發Velocity,熱更新達到毫秒級,開發體驗只有一個字:爽。

四、 Velocity頁面前後端分離

事實上,對比前三個步驟,我們距離Velocity頁面徹底前後端分離已經很接近了。

第四個步驟是真正實現Velocity頁面的前端獨立構建和部署,並永久擺脫依賴Server端渲染。但由於Vue-loader實際上會在工程編譯時把模板語法解析成render函數,已經破壞了模板語法的結構,因此不能支持在客戶端動態的解析Velocity,需要固化渲染環境變數。Velocity的動態數據渲染部分需要改寫為Vue的語法來實現,托靠客戶端Ajax來刷新動態數據和頁面。

至此,我們完整實現了對Velocity後端應用向前端工程化逐步演進之路,路漫漫其修遠兮,吾將上下而求索,也歡迎各位看官共同探討。

作者:京東零售 陳震

內容來源:京東雲開發者社區


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在大數據處理中,[實時數據分析](https://www.dtstack.com/dtengine/easylake?src=szsm)是一個重要的需求。隨著數據量的不斷增長,對於實時分析的挑戰也在不斷加大,傳統的批處理方式已經不能滿足[實時數據處理](https://www.dtstack.com ...
  • Elasticsearch的查詢語句維護成本較高、在聚合計算場景下出現數據不精確等問題。Clickhouse是列式資料庫,列式型資料庫天然適合OLAP場景,類似SQL語法降低開發和學習成本,採用快速壓縮演算法節省存儲成本,採用向量執行引擎技術大幅縮減計算耗時。所以做此對比,進行Elasticsearc... ...
  • 鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少,於是找了找網路上的一些流行熱詞網站,挑了個數據量大的採集了下來,經過整理(去除重覆、去除詞長超過10字)共得到1萬4千多條記錄。 熱詞:做完核酸可以領豆油解釋:疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 英語詞典、背單詞類的數據已經發了很多很多了,打算今天這一個將是最後一個了,後續沒有顛覆性的好的話就不再發這類數據了,今天這一份的背單詞資料庫好處是有58個分類,之前發過有27個分類的《1萬6千多最好的背單詞SQLITE資料庫》。 單詞表:36238條記錄,可以看一下word_root_id欄位的作用 ...
  • 無人直播插件 直播替換安裝使用教程 一、適用機型及系統1、機型:所有iphone機型,可越獄即可2、系統:支持13系統及以上所有可越獄系統二、安裝手機端1、越獄(1)Windows越獄方法:電腦端安裝愛思助手,點擊工具 》一鍵越獄 》 選擇uncover 》開始越獄,如提示需要登錄,點擊商城,註冊並 ...
  • key是widget、element和semanticsNode的唯一標識,同一個parent下的所有element的key不能重覆,但是在特定條件下可以在不同parent下使用相同的key,比如page1和page2都可以使用ValueKey ...
  • >WebGL近幾年越來越被人們所關註,但是二三維開發難度也比普通web要高出許多,不管我們是在在開發或者是學習過程中,往往需要耗費大量的時間去查閱資料,和研究官方案例, >而大多二三維的包(openlayersjs,cesiumjs、threejs)都是外國的,如果英語水平好還行,否則讀起來正是連蒙 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 最近的面試中有一個面試官問我按鈕級別的許可權怎麼控制,我說直接v-if啊,他說不夠好,我說我們項目中按鈕級別的許可權控制情況不多,所以v-if就夠了,他說不夠通用,最後他對我的評價是做過很多東西,但是都不夠深入,好吧,那今天我們就來深入深入。 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...