htmx talk 2021

伺服器端已死！伺服器端萬歲 (+ HTMX)

此儲存庫包含「伺服器端已死！伺服器端萬歲 (+ HTMX)」演講的範例程式碼和幻燈片，在 DjangoCon US 2021 上給出，然後（修改）為 2021 年 12 月的程式碼。

內容

• 範例

• 訊息收件匣功能（讀取/存檔）

• 一鍵設定

• 多個選項卡中的多個表單

• 惰性資料彈出窗口

• 幻燈片

• 影片

• 資源

範例

以下是我所討論的範例的螢幕截圖，從純 Django 模板（在settings範例中加上一些 ajax）過渡到 Django + HTMX。 examples資料夾包含一個包含每個範例的 django 專案。

請記住，為了使我在演講中討論的概念盡可能清晰，這些範例被精簡到絕對最少，因此這些範例沒有考慮安全最佳實踐。例如，在settings範例中，您希望使用@login_required裝飾視圖。

此範例包括用於快速啟動和運行的裝置。遷移、載入裝置並啟動 runserver 後，使用憑證user pass登入 admin (http://127.0.0.1:8000/admin/)，然後前往首頁 (http://127.0.0.1:8000/) 。

訊息傳遞

如何新增點擊圖示來存檔郵件的功能，而無需刷新整個頁面即可查看變更？這是一個例子。

設定

在此範例中，我們允許目前使用者透過一組複選框（與資料庫中的 BooleanField 欄位相關）來變更其設置，而無需刷新頁面。他們也會收到更新的瞬間提醒。

帶有表單的選項卡

此範例展示了一個用例，其中單一網頁上需要多個表單，每個表單都隱藏在自己的選項卡中。我們使用 HTMX 僅在需要時加載每個選項卡的內容，並提交每個表單而無需刷新頁面。

具有惰性資料彈出視窗的地圖

此範例展示了一個用例，其中資料豐富的地圖（或資料表等）利用帶有附加資訊的彈出視窗。我們可以在使用者點擊地圖功能時延遲載入彈出視窗內容，而不是在頁面載入時載入所有彈出視窗內容。

示範工程

演講中討論的每種模式都提供了一個演示項目。

1. 安裝需求pip install -r requirements.txt

2. 遷移python manage.py migrate

3. 安裝裝置python manage.py loaddata fixtures.json

4. python manage.py runserver

5. 使用憑證登入管理員http://127.0.0.1:8000/admin/ ： user和pass

6. 前往主頁http://127.0.0.1:8000/並使用導覽選項嘗試各種示範。提示：開啟瀏覽器的開發工具窗格。

幻燈片

幻燈片可在媒體資料夾中找到。您可以在這裡直接訪問它們：

• 下載 OpenDocument 示範文件

• 檢視 OpenDocument 平面 XML 簡報文件

影片

DjangoConUS 2021 YouTube 播放清單上的影片 Code Code Code YouTube 播放清單上的視頻

資源

演講中提到的資源：

• htmx.org - HTMX 範例、參考資料和更多資源的主頁。

• django-htmx - Adam Johnson 的 django 包，其中包含有用的實用程序，可以更輕鬆地整合 Django 和 HTMX。

• Awesome-htmx - 演講、部落格文章、範例和其他與 HTMX 相關的內容的連結。

• HTMX Discord - 非常活躍的社區委員會，用於討論 HTMX 和 Django + HTMX。

• Reddit 上的 r/htmx

• GitHub 上的 HTMX

• _hyperscript - 一個推測性的 javascript 函式庫，旨在與 HTMX 一起工作。簡化事件處理程序的編寫和開發高度響應的使用者介面。

• Alpine.js - 一個輕量級 javascript 函式庫，用於直接在標記中編寫行為，與 HTMX 配合良好。