在現代 Web 開發領域，Vue 和 Angular 等 JavaScript 框架主導著反應式介面的討論。
然而，完全有可能在不依賴這些繁重的框架的情況下建立反應式 HTML。
在本文中，我們將討論如何使用該專案來實現這一點。
好吧，讓我們開始吧！ 🏎
👀 使用框架有什麼問題？
雖然 Vue 和 Angular 等 JavaScript 框架提供了強大的工具，但它們也存在一些明顯的缺陷。其中一個主要問題是樣板程式碼——開發人員經常在實現實際功能之前編寫重複的設定程式碼。框架也會強加自己的架構，這對於簡單的專案來說可能過於複雜。此外，頻繁的更新可能需要昂貴的遷移，隨著時間的推移，維護起來會變得困難。
另一個擔憂是效能開銷，因為框架會捆綁一些可能不需要的大型執行時庫。它們也會造成供應商鎖定，使得以後切換技術變得更加困難。許多專案最終只使用了框架的一小部分功能，但仍然付出了捆綁包大小和複雜性的代價。對於較小的應用程式，像 HMPL.js 這樣的輕量級替代方案通常可以實現響應式，而不會造成不必要的臃腫。
✅解決方案
您只需將程式碼放到伺服器上，然後從伺服器載入完成的 HTML 即可。這不僅可以減少原始程式碼的規模，還可以在不同的 Web 應用程式上重新設計元件。
但是，問題在於，當然我們可以使用 Next.js 或 Nuxt.js來實現這一點，但是我們暫時會再次責備，因為它們也使用了客戶端元件和最低限度的伺服器數量，它們在大多數情況下只是 metathegs 的初始包裝器，因此，這種方法可以稍微不同地使用。
🐜 使用 HMPL.js 模組
我們不需要將一堆包連接到我們的專案中來建立漂亮的介面。通常的 HTML 頁面和幾個標籤script就足夠了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
</head>
<body>
<main>
<template hmpl>
<div>
{{#request src="/api/header.html"}}
{{#indicator trigger="error"}}
<p class="indicator">Header loading error</p>
{{/indicator}}
{{/request}}
</div>
</template>
<div class="content"></div>
<template hmpl>
<div>
{{#request src="/api/footer.html"}}
{{#indicator trigger="error"}}
<p class="indicator">Footer loading error</p>
{{/indicator}}
{{/request}}
</div>
</template>
</main>
<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script src="https://unpkg.com/hmpl-dom/dist/hmpl-dom.min.js"></script>
</body>
</html>在這裡，我們從伺服器取得客戶端的元件，我們不在乎從伺服器取得多少。原始元件只有幾千字節，而且介面與我們在 Vue 上寫的一樣，實際上是一對一的。因此，如果您有此消耗，可以使用此方法。
🖋️ 結論
JavaScript 框架提供了強大的解決方案，但往往會為簡單的應用程式帶來不必要的複雜性、樣板程式碼和效能開銷。像 HMPL.js 這樣的輕量級替代方案表明，無需繁瑣的依賴關係即可實現響應式開發，為許多用例提供了更高效的方法。透過仔細評估專案需求，開發者可以在功能性和簡潔性之間找到合適的平衡點，避免過度設計，同時仍能提供動態的使用者體驗。
非常感謝您閱讀這篇文章❤️！
你還知道哪些其他流行的替代品？歡迎在留言區留言，分享你的想法！
PS 另外，別忘了幫我並給 HMPL 加星號！
{% cta https://github.com/hmpl-language/hmpl %} 🌱 星標 HMPL {% endcta %}
原文出處：https://dev.to/anthonymax/reactive-html-without-javascript-frameworks-1anh
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
