來自 meng shao（@shao__meng）的推文串

[開源推薦] HMPL: 極簡的服務端驅動模板語言，比React 更輕、比傳統jQuery 更現代、類似HTMX 但更具模板化控制力。 核心目標非常明確：在保持現代Web 應用動態互動體驗的同時，大幅減少客戶端JavaScript 的程式碼量和複雜性，可以把它理解為HTMX 和EJS 之間的某種「中間形態」——它既擁有傳統模板引擎的直觀，又具備現代「服務端驅動UI」的能力。 💡 核心理念：在HTML 中定義“請求” HMPL 最大的創新在於它的語法邏輯。傳統的做法是“寫JS 發請求-> 拿到資料-> 更新DOM”，而HMPL 允許你直接在HTML 範本中聲明“這個區塊的資料來自哪裡”。 · 所見即所得的資料流：你不需要寫冗長的fetch 或axios 程式碼，只需在範本中使用特定的語法（如{{ src: "/api/component" }}），HMPL 就會自動處理請求、取得服務端傳回的HTML 片段，並安全地渲染到頁面上。 · 服務端為中心：它推崇將邏輯放回服務端，客戶端只負責「按需獲取和展示」。這使得它天然支持類似SSR 的效果，但沒有複雜的框架負擔。 ✨ 關鍵特性解讀 1. 極致輕量(Lightweight) 在現代前端框架（如React, Vue）動輒幾十KB 甚至更大的背景下，HMPL 的核心非常小巧（gzip 後約24KB 甚至更小），極其適合對首屏加載速度和性能有高要求的項目。 2. 安全性內建(Security First) 直接渲染服務端HTML 最害怕XSS 攻擊。 HMPL 聰明地整合了DOMPurify，預設對渲染內容進行清洗和消毒，解決了開發者最擔心的安全隱患。 3. 極佳的開發者體驗(DX) 儘管是小眾語言，但它提供了完善的配套工具，包括VS Code 插件、Vite 插件和Webpack Loader。這代表你在編寫HMPL 時也能享受到語法高亮、自動補全等現代開發體驗。 4. 彈性(Flexibility) 它不是要取代整個框架。你可以把它當作一個獨立工具使用，也可以將其嵌入到現有的Vue 或React 專案中，專門處理某些需要動態載入的服務端內容。 ⚖️ 產業價值與評價在當前的前端領域，HMPL 的出現反映了一種反思： · 拒絕過度工程化：我們真的需要為每個簡單的動態頁面都引入龐大的SPA 框架嗎？ HMPL 給了否定的答案。 · 更低的學習門檻：對於後端開發者或全端開發者來說，HMPL 這種「寫模板= 寫邏輯」的方式，比學習整套React Hooks 或Vue Lifecycle 要直觀得多。 開源位址：