htmx talk 2021
1.0.0
このリポジトリには、DjangoCon US 2021 で行われ、その後 2021 年 12 月に Code Code Code 用に (修正されました) 講演「Server-Side is Dead! Long Live Server-Side (+ HTMX)」のサンプル コードとスライドが含まれています。
例
メッセージング受信トレイ機能 (読み取り/アーカイブ)
ワンクリック設定
複数のタブに複数のフォームを表示
遅延データのポップオーバー
スライド
ビデオ
リソース
ここでは、プレーンな 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 フィールドに関連する) を使用して設定を変更できるようにします。また、更新に関する一時的なアラートも受け取ります。
この例では、単一の Web ページ上で複数のフォームが必要となり、それぞれが独自のタブ内に非表示になるユースケースを示します。 HTMX を使用して、必要な場合にのみ各タブのコンテンツを読み込み、ページを更新せずに各フォームを送信します。
この例では、データが豊富なマップ (またはデータテーブルなど) が追加情報を含むポップオーバーを利用するユースケースを示します。ページの読み込み時にすべてのポップオーバー コンテンツを読み込むのではなく、ユーザーがマップ フィーチャをクリックしたときにポップオーバー コンテンツを遅延して読み込むことができます。
トークで説明した各パターンのデモンストレーション プロジェクトが提供されます。
要件をインストールしますpip install -r requirements.txt
python manage.py migrate
フィクスチャをインストールするpython manage.py loaddata fixtures.json
サーバーを実行しますpython manage.py runserver
資格情報: user & passを使用して admin http://127.0.0.1:8000/admin/にログインします。
ホームページhttp://127.0.0.1:8000/にアクセスし、ナビゲーション オプションを使用してさまざまなデモンストレーションを試してください。ヒント: ブラウザの開発ツール ペインを開きます。
スライドはメディア フォルダーにあります。ここから直接アクセスできます。
OpenDocument プレゼンテーション ファイルをダウンロードする
OpenDocument Flat XML プレゼンテーション ファイルの表示
DjangoConUS 2021 YouTube プレイリストのビデオ Code Code Code YouTube プレイリストのビデオ
講演で言及されたリソース:
htmx.org - HTMX の例、参考資料、その他のリソースのホーム。
django-htmx - Django と HTMX の統合を容易にする便利なユーティリティを備えた Adam Johnson の django パッケージ。
awesome-htmx - HTMX に関連する講演、ブログ投稿、例、その他のものへのリンク。
HTMX Discord - HTMX および Django + HTMX について議論するための非常に活発なコミュニティ ボードです。
Redditのr/htmx
GitHub 上の HTMX
_hyperscript - HTMX と連携して動作するように設計された投機的な JavaScript ライブラリ。イベント ハンドラーの作成と応答性の高いユーザー インターフェイスの開発を簡素化します。
Alpine.js - マークアップ内で動作を直接構成するための軽量の JavaScript ライブラリで、HTML とうまく連携します。
