htmx talk 2021

Sisi Server Sudah Mati! Sisi Server Panjang Umur (+ HTMX)

Repositori ini berisi kode contoh dan slide untuk pembicaraan "Sisi Server Sudah Mati! Umur Sisi Server (+ HTMX)", diberikan di DjangoCon US 2021 dan kemudian (dimodifikasi) untuk Kode Kode Kode pada bulan Desember 2021.

Isi

• Contoh

• Fungsionalitas kotak masuk pesan (baca/arsip)

• Pengaturan sekali klik

• Berbagai formulir di banyak tab

• Popover data yang lambat

• Slide

• Video

• Sumber daya

Contoh

Berikut adalah tangkapan layar dari contoh yang saya bicarakan, transisi dari templat Django biasa (ditambah sedikit ajax dalam contoh settings ), ke Django + HTMX. Folder examples berisi proyek Django dengan masing-masing contoh ini.

Ingatlah bahwa contoh-contoh ini dihilangkan seminimal mungkin agar konsep yang saya bahas dalam pembicaraan ini sejelas mungkin, sehingga contoh-contoh tersebut tidak mempertimbangkan praktik terbaik keamanan. Misalnya, dalam contoh settings , Anda ingin mendekorasi tampilan dengan @login_required .

Contohnya mencakup perlengkapan untuk memulai dan menjalankannya dengan cepat. Setelah bermigrasi, memuat perlengkapan, dan memulai runserver, masuk ke admin (http://127.0.0.1:8000/admin/) dengan kredensial user pass , lalu buka beranda (http://127.0.0.1:8000/) .

Pesan

Bagaimana Anda menambahkan kemampuan mengklik ikon untuk mengarsipkan pesan, tanpa harus menyegarkan seluruh halaman untuk melihat perubahannya? Berikut ini contohnya.

Pengaturan

Dalam contoh ini, kami mengizinkan pengguna saat ini untuk mengubah pengaturan mereka melalui serangkaian kotak centang (yang berhubungan dengan bidang BooleanField dalam database) tanpa menyegarkan halaman. Mereka juga mendapat peringatan sesaat tentang pembaruan tersebut.

Tab-Dengan-Formulir

Contoh ini menyajikan kasus penggunaan di mana beberapa formulir diperlukan pada satu halaman web, masing-masing tersembunyi dalam tabnya sendiri. Kami menggunakan HTMX untuk memuat konten setiap tab hanya bila diperlukan dan untuk mengirimkan setiap formulir tanpa memerlukan penyegaran halaman.

Peta dengan Popover Data Malas

Contoh ini menyajikan kasus penggunaan di mana peta yang kaya data (atau datatable, dll) memanfaatkan popover dengan informasi tambahan. Daripada memuat semua konten popover saat memuat halaman, kita dapat memuat konten popover dengan malas saat pengguna mengklik fitur peta.

Proyek Demonstrasi

Sebuah proyek percontohan disediakan dengan setiap pola yang dibahas dalam pembicaraan.

1. Instal persyaratan pip install -r requirements.txt

2. Migrasi python manage.py migrate

3. Instal perlengkapan python manage.py loaddata fixtures.json

4. Jalankan server python manage.py runserver

5. Masuk ke admin http://127.0.0.1:8000/admin/ dengan kredensial: user & pass

6. Buka halaman beranda http://127.0.0.1:8000/ dan gunakan opsi navigasi untuk mencoba berbagai demonstrasi. Petunjuk: buka panel alat pengembangan browser Anda.

Slide

Slide tersedia di folder media. Anda dapat mengaksesnya langsung di sini:

• Unduh file Presentasi OpenDocument

• Lihat file Presentasi OpenDocument Flat XML

Video

Video di Daftar Putar YouTube DjangoConUS 2021 Video di Daftar Putar YouTube Kode Kode

Sumber daya

Sumber daya yang disebutkan dalam pembicaraan:

• htmx.org - Rumah bagi contoh-contoh HTML, referensi, dan sumber daya lebih lanjut.

• django-htmx - Paket Django Adam Johnson dengan utilitas berguna untuk membuat integrasi Django dan HTMX lebih mudah.

• awesome-htmx - Tautan ke pembicaraan, postingan blog, contoh, dan hal lain yang terkait dengan HTMX.

• HTMX Discord - Dewan komunitas yang sangat aktif untuk mendiskusikan HTMX dan Django + HTMX.

• r/htmx di Reddit

• HTML di GitHub

• _hyperscript - Pustaka javascript spekulatif yang dirancang untuk bekerja bersama HTML. Menyederhanakan penulisan event handler dan mengembangkan antarmuka pengguna yang sangat responsif.

• Alpine.js - Pustaka javascript ringan untuk menyusun perilaku langsung di markup Anda yang berfungsi baik dengan HTMX.