htmx talk 2021
1.0.0
Este repositório contém o código de exemplo e os slides da palestra "Server-Side is Dead! Long Live Server-Side (+ HTMX)", proferida na DjangoCon US 2021 e depois (modificada) para Code Code Code em dezembro de 2021.
Exemplos
Funcionalidade de caixa de entrada de mensagens (leitura/arquivamento)
Configurações com um clique
Vários formulários em várias guias
Popovers de dados preguiçosos
Apresentações
Vídeo
Recursos
Aqui estão capturas de tela dos exemplos que falo, fazendo a transição de modelos simples do Django (mais um pouco de ajax no exemplo settings ) para Django + HTMX. A pasta examples contém um projeto Django com cada um desses exemplos.
Lembre-se de que esses exemplos são reduzidos ao mínimo absoluto para tornar os conceitos que discuto na palestra o mais claros possível, de forma que os exemplos não levem em consideração as melhores práticas de segurança. Por exemplo, no exemplo settings , você gostaria de decorar a visualização com @login_required .
O exemplo inclui acessórios para começar a funcionar rapidamente. Após migrar, carregar os fixtures e iniciar o runserver, faça login no admin (http://127.0.0.1:8000/admin/) com credenciais user pass e vá para a página inicial (http://127.0.0.1:8000/) .
Como você adiciona a capacidade de clicar em um ícone para arquivar mensagens, sem precisar atualizar a página inteira para ver as alterações? Aqui está um exemplo.
Neste exemplo, permitimos que o usuário atual altere suas configurações por meio de um conjunto de caixas de seleção (relacionadas aos campos BooleanField no banco de dados) sem atualizar a página. Eles também recebem um alerta momentâneo da atualização.
Este exemplo apresenta um caso de uso em que vários formulários são necessários em uma única página da Web, cada um oculto em sua própria guia. Usamos HTMX para carregar o conteúdo de cada guia somente quando necessário e para enviar cada formulário sem a necessidade de atualizar a página.
Este exemplo apresenta um caso de uso em que um mapa rico em dados (ou tabela de dados, etc.) utilizou popovers com informações adicionais. Em vez de carregar todo o conteúdo popover no carregamento da página, podemos carregar o conteúdo popover preguiçosamente quando o usuário clica no recurso de mapa.
Um projeto de demonstração é fornecido com cada padrão discutido na palestra.
Instale os requisitos pip install -r requirements.txt
Migrar python manage.py migrate
Instalar acessórios python manage.py loaddata fixtures.json
Execute o servidor python manage.py runserver
Faça login em admin http://127.0.0.1:8000/admin/ com credenciais: user e pass
Vá para a página inicial http://127.0.0.1:8000/ e use as opções de navegação para experimentar as diversas demonstrações. Dica: abra o painel de ferramentas de desenvolvimento do seu navegador.
Os slides estão disponíveis na pasta de mídia. Você pode acessá-los diretamente aqui:
Baixe o arquivo de apresentação OpenDocument
Visualizar arquivo de apresentação XML simples do OpenDocument
Vídeo na lista de reprodução do DjangoConUS 2021 no YouTube Vídeo na lista de reprodução do Code Code Code no YouTube
Recursos mencionados na palestra:
htmx.org - O lar de exemplos, referências e outros recursos HTMX.
django-htmx - pacote django de Adam Johnson com utilitários úteis para facilitar a integração de Django e HTMX.
awesome-htmx – Links para palestras, postagens de blogs, exemplos e outras coisas relacionadas ao HTMX.
HTMX Discord - Conselho da comunidade muito ativo para discutir HTMX e Django + HTMX.
r/htmx no Reddit
HTML no GitHub
_hyperscript – Uma biblioteca javascript especulativa projetada para funcionar junto com HTMX. Simplifica a escrita de manipuladores de eventos e o desenvolvimento de interfaces de usuário altamente responsivas.
Alpine.js – Uma biblioteca javascript leve para compor comportamento diretamente em sua marcação, que funciona bem com HTMX.
