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 取得和渲染資料:
<code class="language-html"><title>Nibodhdaware News Blog</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></code>
這會設定 HTML,包括 HTMX 及其客戶端模板擴充功能(稍後解釋)。 Nunjucks 用於模板。
主要渲染邏輯:
<code class="language-html"><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></code>
結論
雖然您可能仍需要建立 JSON API,但 HTMX 透過允許直接 HTML 渲染來簡化前端,降低開發複雜性並提高效能。
以上是HTMX:Web 的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章!