htmx talk 2021

ฝั่งเซิร์ฟเวอร์ตายแล้ว! ฝั่งเซิร์ฟเวอร์ใช้งานได้ยาวนาน (+ HTMX)

พื้นที่เก็บข้อมูลนี้มีโค้ดตัวอย่างและสไลด์สำหรับการพูดคุย "Server-Side is Dead! Long Live Server-Side (+ HTMX)" ซึ่งมอบให้ที่ DjangoCon US 2021 จากนั้น (แก้ไข) สำหรับ Code Code Code ในเดือนธันวาคมปี 2021

สารบัญ

• ตัวอย่าง

• ฟังก์ชั่นกล่องจดหมายข้อความ (อ่าน/เก็บถาวร)

• การตั้งค่าเพียงคลิกเดียว

• หลายรูปแบบในหลายแท็บ

• ข้อมูลป๊อปโอเวอร์ที่ขี้เกียจ

• สไลด์

• วีดีโอ

• ทรัพยากร

ตัวอย่าง

นี่คือภาพหน้าจอของตัวอย่างที่ฉันพูดถึง โดยเปลี่ยนจากเทมเพลต Django ธรรมดา (บวก Ajax เล็กน้อยในตัวอย่าง settings ) เป็น Django + HTMX โฟลเดอร์ examples มีโปรเจ็กต์ django พร้อมตัวอย่างเหล่านี้แต่ละตัวอย่าง

โปรดทราบว่าตัวอย่างเหล่านี้ถูกตัดออกให้เหลือน้อยที่สุดเพื่อทำให้แนวคิดที่ฉันพูดคุยในการเสวนามีความชัดเจนที่สุดเท่าที่จะเป็นไปได้ ดังนั้นตัวอย่างเหล่านี้จึงไม่คำนึงถึงแนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด ตัวอย่างเช่น ในตัวอย่าง settings คุณต้องการตกแต่งมุมมองด้วย @login_required

ตัวอย่างประกอบด้วยอุปกรณ์ติดตั้งสำหรับการเริ่มต้นใช้งานอย่างรวดเร็ว หลังจากการโยกย้าย โหลดฟิกซ์เจอร์ และเริ่มต้น runserver ให้เข้าสู่ระบบผู้ดูแลระบบ (http://127.0.0.1:8000/admin/) ด้วย pass ผ่าน user จากนั้นไปที่หน้าแรก (http://127.0.0.1:8000/) .

การส่งข้อความ

คุณจะเพิ่มความสามารถในการคลิกที่ไอคอนเพื่อเก็บข้อความโดยไม่ต้องรีเฟรชทั้งหน้าเพื่อดูการเปลี่ยนแปลงได้อย่างไร นี่คือตัวอย่าง

การตั้งค่า

ในตัวอย่างนี้ เราอนุญาตให้ผู้ใช้ปัจจุบันเปลี่ยนการตั้งค่าผ่านชุดช่องทำเครื่องหมาย (ซึ่งเกี่ยวข้องกับฟิลด์ BooleanField ในฐานข้อมูล) โดยไม่ต้องรีเฟรชเพจ พวกเขายังได้รับการแจ้งเตือนการอัปเดตชั่วขณะอีกด้วย

แท็บพร้อมแบบฟอร์ม

ตัวอย่างนี้นำเสนอกรณีการใช้งานที่หน้าเว็บเดียวต้องใช้แบบฟอร์มหลายรูปแบบ โดยแต่ละรูปแบบจะซ่อนอยู่ในแท็บของตัวเอง เราใช้ HTMX เพื่อโหลดเนื้อหาของแต่ละแท็บเมื่อจำเป็นเท่านั้น และส่งแต่ละแบบฟอร์มโดยไม่จำเป็นต้องรีเฟรชหน้า

แผนที่พร้อม Popovers ข้อมูล Lazy

ตัวอย่างนี้นำเสนอกรณีการใช้งานที่แผนที่ที่มีข้อมูลมากมาย (หรือตารางข้อมูล ฯลฯ) ใช้ป๊อปโอเวอร์พร้อมข้อมูลเพิ่มเติม แทนที่จะโหลดเนื้อหาป๊อปโอเวอร์ทั้งหมดในการโหลดเพจ เราสามารถโหลดเนื้อหาป๊อปโอเวอร์อย่างเกียจคร้านเมื่อผู้ใช้คลิกที่คุณลักษณะแผนที่

โครงการสาธิต

มีโครงการสาธิตพร้อมแต่ละรูปแบบที่อภิปรายในการบรรยาย

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 Flat XML

วีดีโอ

วิดีโอบนเพลย์ลิสต์ YouTube ของ DjangoConUS 2021 วิดีโอบนโค้ด รหัส เพลย์ลิสต์ YouTube

ทรัพยากร

แหล่งข้อมูลที่กล่าวถึงในการเสวนา:

• htmx.org - แหล่งรวมตัวอย่าง HTMX ข้อมูลอ้างอิง และแหล่งข้อมูลเพิ่มเติม

• django-htmx - แพ็คเกจ django ของ Adam Johnson พร้อมยูทิลิตี้ที่เป็นประโยชน์สำหรับการรวม Django และ HTMX ได้ง่ายขึ้น

• Awesome-htmx - ลิงก์ไปยังการพูดคุย โพสต์ในบล็อก ตัวอย่าง และสิ่งอื่นๆ ที่เกี่ยวข้องกับ HTMX

• HTMX Discord - บอร์ดชุมชนที่กระตือรือร้นมากสำหรับการสนทนา HTMX และ Django + HTMX

• r/htmx บน Reddit

• HTMX บน GitHub

• _hyperscript - ไลบรารีจาวาสคริปต์เชิงเก็งกำไรที่ออกแบบมาเพื่อทำงานร่วมกับ HTMX ลดความซับซ้อนในการเขียนตัวจัดการเหตุการณ์และพัฒนาอินเทอร์เฟซผู้ใช้ที่ตอบสนองสูง

• Alpine.js - ไลบรารีจาวาสคริปต์น้ำหนักเบาสำหรับการเขียนพฤติกรรมโดยตรงในมาร์กอัปของคุณ ซึ่งเล่นได้ดีกับ HTMX