HTMX：Web 的未來

HTMX：透過以 HTML 為中心的互動簡化 Web 開發

這篇文章探討了我將 HTMX 整合到使用 Tailwind CSS（前端）、Python 和 Flask（後端）建立的 SaaS 平台中的經驗。雖然我熟悉其他技術，但 HTMX 是我工具包中的新成員。 這篇文章詳細介紹了它的實作。

面向 JSON 的架構：挑戰

在深入研究 HTMX 之前，了解其目標至關重要。 傳統的全端應用程式通常依賴面向 JSON 的架構。後端發送JSON數據，前端渲染它。這種方法雖然增強了互動性，但會帶來大量的資料開銷。 JSON 有效負載可能比同等 HTML 大 10 倍，進而導致效能下降。

HTMX：典範轉移

HTMX 透過提倡伺服器直接回傳 HTML 來解決這種低效率問題。 這可以最大限度地減少資料傳輸，從而改善用戶體驗。 HTMX 不僅僅是簡單的 JSON 替換；它緊密地成了伺服器端和客戶端邏輯，從而實現更快、更靈敏的互動。

至關重要的是，HTMX 不會取代 JavaScript。 它需要包含 JavaScript（透過 CDN 或本機檔案）。

與其他 JavaScript 框架相比，HTMX 的一個關鍵優勢是它能夠透過 HTML 屬性直接與 API 交互，從而最大限度地減少 JavaScript 程式碼。

範例：取得和渲染資料

以下程式碼示範如何使用 HTMX、客戶端範本和 Nunjucks 範本引擎從 API 取得和渲染資料：

<title>Nibodhdaware News Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

這會設定 HTML，包括 HTMX 及其客戶端模板擴充功能（稍後解釋）。 Nunjucks 用於模板。

主要渲染邏輯：

<h1>Nibodhdaware</h1>
<p>HTMX JSON API Test</p>
<div hx-ext="client-side-templates">
  <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
    <template>
      <p>The `hx-ext='client-side-templates'` attribute tells HTMX to utilize the extension.  We're using the Space Flight News API. `hx-trigger="load"` sends a GET request on page load.  `nunjucks-template` identifies the template.</p>

      <p>The API response schema is:</p>
      <code>
      {
        "count": 123,
        "next": "...",
        "previous": "...",
        "results": [ /* array of blog objects */ ]
      }
      </code>

      <p>Nunjucks (similar to Jinja) uses `{% %}` for code blocks and `{{ }}` for variables.  `{% if previous %}` checks for pagination. `{% for blog in results %}` iterates through blog posts, accessing properties like `{{ blog.url }}` and `{{ blog.title }}`.</p>

      <p>The blog posts are loaded directly from the API upon page load.</p>
      <img src="/uploads/20250116/17370305576788fb9d220a3.jpg" width="800" height="400" loading="lazy">

      <p>The remarkable aspect is the direct use of API data without explicit fetch calls or JavaScript manipulation of `innerHTML`.</p>
    </template>
  </div>
</div>

結論

雖然您可能仍需要建立 JSON API，但 HTMX 透過允許直接 HTML 渲染來簡化前端，降低開發複雜性並提高效能。

以上是HTMX：Web 的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章！