htmx talk 2021
1.0.0
Este repositorio contiene el código de ejemplo y las diapositivas para la charla "¡El lado del servidor está muerto! Larga vida al lado del servidor (+ HTMX)", impartida en DjangoCon US 2021 y luego (modificada) para Code Code Code en diciembre de 2021.
Ejemplos
Funcionalidad de la bandeja de entrada de mensajería (lectura/archivo)
Configuración con un clic
Múltiples formularios en múltiples pestañas
Ventanas emergentes de datos perezosos
Diapositivas
Video
Recursos
Aquí hay capturas de pantalla de los ejemplos que analizo, la transición de plantillas simples de Django (más un poco de ajax en el ejemplo settings ) a Django + HTMX. La carpeta de examples contiene un proyecto de Django con cada uno de estos ejemplos.
Tenga en cuenta que estos ejemplos se han reducido al mínimo absoluto para que los conceptos que analizo en la charla sean lo más claros posible, de modo que los ejemplos no tengan en cuenta las mejores prácticas de seguridad. Por ejemplo, en el ejemplo settings , querrás decorar la vista con @login_required .
El ejemplo incluye accesorios para comenzar a funcionar rápidamente. Después de migrar, cargar dispositivos e iniciar Runserver, inicie sesión en admin (http://127.0.0.1:8000/admin/) con las pass user y luego vaya a la página de inicio (http://127.0.0.1:8000/). .
¿Cómo se agrega la posibilidad de hacer clic en un ícono para archivar mensajes, sin tener que actualizar toda la página para ver los cambios? He aquí un ejemplo.
En este ejemplo, permitimos que el usuario actual cambie su configuración mediante un conjunto de casillas de verificación (que se relacionan con los campos BooleanField en la base de datos) sin actualizar la página. También reciben una alerta momentánea de la actualización.
Este ejemplo presenta un caso de uso en el que se necesitan varios formularios en una sola página web, cada uno oculto dentro de su propia pestaña. Usamos HTMX para cargar el contenido de cada pestaña solo cuando sea necesario y para enviar cada formulario sin necesidad de actualizar la página.
Este ejemplo presenta un caso de uso en el que un mapa rico en datos (o una tabla de datos, etc.) utilizó ventanas emergentes con información adicional. En lugar de cargar todo el contenido de la ventana emergente al cargar la página, podemos cargar el contenido de la ventana emergente de forma perezosa cuando el usuario hace clic en la función del mapa.
Se proporciona un proyecto de demostración con cada patrón analizado en la charla.
Instale los requisitos pip install -r requirements.txt
Migrar python manage.py migrate
Instalar accesorios python manage.py loaddata fixtures.json
Ejecute el servidor python manage.py runserver
Inicie sesión en admin http://127.0.0.1:8000/admin/ con credenciales: user y pass
Vaya a la página de inicio http://127.0.0.1:8000/ y utilice las opciones de navegación para probar las distintas demostraciones. Sugerencia: abra el panel de herramientas de desarrollo de su navegador.
Las diapositivas están disponibles en la carpeta multimedia. Puedes acceder a ellos directamente aquí:
Descargar archivo de presentación OpenDocument
Ver archivo de presentación XML plano de OpenDocument
Vídeo en DjangoConUS 2021 Lista de reproducción de YouTube Vídeo en Código Código Código Lista de reproducción de YouTube
Recursos mencionados en la charla:
htmx.org: el hogar de ejemplos, referencias y recursos adicionales de HTMX.
django-htmx: paquete django de Adam Johnson con utilidades útiles para facilitar la integración de Django y HTMX.
awesome-htmx: enlaces a charlas, publicaciones de blogs, ejemplos y otras cosas relacionadas con HTMX.
HTMX Discord: tablero comunitario muy activo para discutir HTMX y Django + HTMX.
r/htmx en Reddit
HTMX en GitHub
_hyperscript: una biblioteca de JavaScript especulativa diseñada para funcionar junto con HTMX. Simplifica la escritura de controladores de eventos y el desarrollo de interfaces de usuario altamente receptivas.
Alpine.js: una biblioteca javascript liviana para componer comportamientos directamente en su marcado que funciona muy bien con HTMX.
