網頁開發環境正變得越來越複雜。像 React 和 Vue.js 這樣的前端框架功能強大，但並非所有項目都必須使用。特別是當你想實現簡單的動態功能時，這些框架可能會帶來過度的複雜性。

HTMX 是一個輕量級的 HTML 為中心的庫，旨在解決這些問題，能夠與 Django 等伺服器端框架良好的整合，輕鬆構建動態網頁應用。

HTMX 是什麼？

HTMX 是一個為簡化動態網頁開發而創建的輕量級 JavaScript 庫。無需複雜的 JavaScript 代碼或前端框架，只需通過 HTML 屬性即可實現AJAX、WebSocket、伺服器推送事件 (SSE)等動態功能。

HTMX 的主要 HTML 屬性

  • hx-get: 向伺服器發送 GET 請求。
  • hx-post: 向伺服器發送 POST 請求。
  • hx-swap: 將伺服器回傳的響應插入到頁面的特定部分。
  • hx-trigger: 根據點擊或滑鼠移動等特定事件執行動作。
  • hx-target: 指定要呈現伺服器回傳內容的特定 HTML 元素。

得益於這些屬性，HTMX 能與 Django 等伺服器端渲染方式自然結合。

Django 範本與 HTMX 的區別

1. Django 範本

  • Django 範本在伺服器端渲染 HTML 後，將整個頁面返回給客戶端。
  • 這是一種傳統方式，需要在刷新頁面的過程中運行。
  • 要添加動態功能，必須直接撰寫 JavaScript。

2. Django + HTMX

  • 使用 HTMX 可以實現不刷新頁面僅更新特定部分。
  • Django 視圖僅返回 HTML 的一部分，HTMX 將其插入到客戶端的特定元素中。
  • 无需复杂的 JavaScript 代码也能提供动人的用户体验。

Django 與 HTMX 的整合範例

基本的 Django 視圖代碼

from django.shortcuts import render

def update_content(request):
    if request.htmx:
        return render(request, 'partials/content.html')  # 返回部分 HTML
    return render(request, 'index.html')  # 返回整個頁面

範本結構

index.html
<!DOCTYPE html>
<html>
<head>
    <title>HTMX 範例</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
    <div id="content">
        <p>此內容將會改變。</p>
    </div>
    <button hx-get="/update/" hx-target="#content">更新內容</button>
</body>
</html>
partials/content.html
<p>新的內容會在這裡顯示。</p>

運作結果

  1. 使用者點擊按鈕後，將對 /update/ URL 發送 GET 請求。
  2. 伺服器返回 partials/content.html 範本，並在不刷新頁面的情況下替換 <div id="content"> 內的內容。

使用 Django 與 HTMX 的優點

  1. 簡單的動態網頁開發: 無需 JavaScript 便可輕鬆實現如 AJAX 的動態功能。
  2. 保持伺服器為中心的邏輯: 因為業務邏輯在伺服器端，安全性和維護性方面較為有利。
  3. 能替代前端框架: 在沒有 React、Vue.js 這類繁重框架的情況下，仍可改善用戶體驗。

總結

HTMX 基於 Django 的高兼容性，實現了複雜性低但功能動態的網頁開發。由於其足夠強大且簡單，能取代現有的前端框架，因此我強烈建議在項目中試用。

在下一篇中，我們將探討HTMX 與 Ajax 的關係以及與 React 的異同，並通過Ajax 請求和 HTMX 的動作範例深入了解 HTMX。敬請期待！