無需 JavaScript 框架的響應式 HTML

在現代 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