- As pessoas falam do htmx como se ele estivesse salvando a web das SPAs
- O criador do htmx, Carson Gross, descreve essa dinâmica com humor como a "dialética hegeliana":
- tese (thesis): MPA tradicional
- antítese (antithesis): SPA
- síntese (synthesis): uma aplicação composta por ilhas interativas baseadas em hipermídia
- Mas eu não enxerguei isso e, algum tempo atrás, "criei uma SPA com htmx"
- É uma PoC de um app simples de lista de tarefas
- depois que a página carrega, ela não se comunica mais com o servidor
- tudo é processado localmente no cliente
- se o foco do htmx é gerenciar trocas de hipermídia pela rede, como isso funciona?
- um truque simples: o código "server-side" roda dentro de um Service Worker
Service Worker
- Atua como um proxy entre a página web e a internet
- Pode interceptar e manipular requisições de rede
- Pode modificar requisições, armazenar respostas em cache para uso offline e gerar novas respostas sem enviar a requisição para fora do navegador
- Essa última capacidade é o ponto central desta aplicação de página única
- Quando o htmx faz uma requisição de rede, o Service Worker a intercepta
- Em seguida, o Service Worker executa a lógica de negócio e gera novo HTML
- O htmx substitui o DOM com o novo HTML
Vantagens em relação a uma SPA tradicional
- O Service Worker precisa usar IndexedDB como armazenamento
- Isso preserva o estado entre carregamentos de página
- Mesmo que você feche a página e volte depois, o app lembra os dados
- Esse é um benefício colateral que vem "de graça" ao escolher essa arquitetura
- Também é fácil fazer com que funcione offline
Desvantagens
- O suporte das ferramentas de desenvolvedor é ruim
console.log é perdido de forma intermitente- os relatórios sobre a instalação do Service Worker não são confiáveis
- Falta suporte a módulos ES no Firefox
- todo o código precisa ficar em um único arquivo
- A experiência geral de desenvolvimento "não é divertida"
Ainda assim, a SPA com htmx funciona bem
Detalhes de implementação
- O HTML base é a estrutura vazia da aplicação de página única
- A tag
<body> configura o corpo do app usando htmx
hx-boost="true": instrui o htmx a substituir respostas de cliques em links e envios de formulário via Ajax, sem navegação de página inteirahx-push-url="false": impede que o htmx altere a URL com base em cliques em links e envios de formuláriohx-get="./ui": instrui a buscar a página em /ui ao carregar e substituí-lahx-target="body": instrui a substituir o resultado no elemento <body>hx-trigger="load": instrui a executar tudo isso no carregamento da página
Endpoint /ui
- Retorna a marcação real do app
- Depois disso, o htmx controla links e formulários para torná-lo interativo
- O Service Worker trata o roteamento das requisições com uma biblioteca estilo Express
setFilter e listTodos são funções simples que encapsulam o IDB Keyval- O componente
App é composto por formulário de filtro, lista de tarefas e formulário de adição
Endpoint /todos/add
- Salva a tarefa e retorna uma resposta com a UI renderizada novamente
- O htmx substitui a resposta no DOM
Componente Todo
- É composto por checkbox, botão de exclusão e texto da tarefa
- O checkbox dispara uma requisição para
/todos/${id}/update
- O botão de exclusão dispara uma requisição de remoção para
/todos/${id}
- O texto da tarefa tem dois estados: "normal" e "editing"
- o htmx escuta o evento de duplo clique
- faz uma requisição para
/ui/todos/${id}?editable=true
- o Service Worker retorna o HTML de
Todo com um <input> incluído
- o htmx substitui o item de tarefa atual pelo HTML da resposta
Resumo
- Tecnicamente, funciona
- É uma boa ideia? Será mesmo o auge das aplicações baseadas em hipermídia? Devemos abandonar o React e construir assim?
- Em um app totalmente local, a indireção do htmx parece mais um peso do que algo libertador
- A maioria dos apps não é totalmente local
- O padrão de "ilhas interativas (islands of interactivity)" parece melhor do que dividir o código "server-side" entre o Service Worker e um servidor real
- Foi uma tentativa experimental de mostrar a construção de uma aplicação de página única totalmente local com hipermídia
Ainda não há comentários.