htmx talk 2021
1.0.0
이 저장소에는 DjangoCon US 2021에서 발표된 후 2021년 12월 Code Code Code에 대해 (수정된) "서버 측이 죽었습니다! 서버 측의 수명이 길다(+ HTMX)" 강연에 대한 예제 코드와 슬라이드가 포함되어 있습니다.
예
받은 편지함 기능(읽기/보관)
원클릭 설정
여러 탭의 여러 양식
게으른 데이터 팝오버
슬라이드
동영상
자원
다음은 일반 Django 템플릿( settings 예제의 약간의 ajax 포함)에서 Django + HTMX로 전환하는 예제의 스크린샷입니다. examples 폴더에는 이러한 각 예제가 포함된 django 프로젝트가 포함되어 있습니다.
이 예에서는 제가 강연에서 논의하는 개념을 최대한 명확하게 만들기 위해 최소한으로만 제거되었습니다. 따라서 예에서는 보안 모범 사례를 고려하지 않습니다. 예를 들어 settings 예제에서는 @login_required 로 뷰를 장식하고 싶을 것입니다.
이 예에는 신속하게 시작하고 실행하기 위한 설비가 포함되어 있습니다. 마이그레이션, 픽스쳐 로딩, runserver 시작 후 자격 증명 user pass 로 관리자(http://127.0.0.1:8000/admin/)에 로그인한 후 홈페이지(http://127.0.0.1:8000/)로 이동합니다. .
변경 사항을 보기 위해 전체 페이지를 새로 고칠 필요 없이 아이콘을 클릭하여 메시지를 보관하는 기능을 어떻게 추가합니까? 여기에 예가 있습니다.
이 예에서는 현재 사용자가 페이지를 새로 고치지 않고도 일련의 확인란(데이터베이스의 BooleanField 필드와 관련됨)을 통해 설정을 변경할 수 있도록 허용합니다. 또한 업데이트에 대한 순간적인 알림도 받습니다.
이 예는 단일 웹페이지에 여러 양식이 필요한 사용 사례를 제시하며 각 양식은 자체 탭에 숨겨져 있습니다. 우리는 HTMX를 사용하여 필요한 경우에만 각 탭의 내용을 로드하고 페이지를 새로 고칠 필요 없이 각 양식을 제출합니다.
이 예는 데이터가 풍부한 지도(또는 데이터 테이블 등)가 추가 정보가 포함된 팝오버를 활용한 사용 사례를 보여줍니다. 페이지 로드 시 모든 팝오버 콘텐츠를 로드하는 대신 사용자가 지도 기능을 클릭할 때 팝오버 콘텐츠를 느리게 로드할 수 있습니다.
강연에서 논의된 각 패턴에 대한 데모 프로젝트가 제공됩니다.
요구 사항 pip install -r requirements.txt 설치합니다.txt
python manage.py migrate 마이그레이션
픽스처 설치 python manage.py loaddata fixtures.json
서버 python manage.py runserver 실행
자격 증명: user 및 pass 사용하여 관리자 http://127.0.0.1:8000/admin/ 에 로그인합니다.
홈 페이지 http://127.0.0.1:8000/ 로 이동하여 탐색 옵션을 사용하여 다양한 데모를 시도해 보십시오. 힌트: 브라우저의 개발 도구 창을 여세요.
슬라이드는 미디어 폴더에서 사용할 수 있습니다. 여기에서 직접 액세스할 수 있습니다.
OpenDocument 프리젠테이션 파일 다운로드
OpenDocument Flat XML 프리젠테이션 파일 보기
DjangoConUS 2021 YouTube 재생 목록에 대한 동영상 코드 코드 코드 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와 함께 작동하도록 설계된 추측성 자바스크립트 라이브러리입니다. 이벤트 핸들러 작성과 응답성이 뛰어난 사용자 인터페이스 개발을 단순화합니다.
Alpine.js - HTMX와 잘 작동하는 마크업에서 직접 동작을 구성하기 위한 경량 자바스크립트 라이브러리입니다.
