Apresentando no HN: HTMX Playground 100% implementado no navegador

HTMX Playground

• O HTMX Playground é uma ferramenta para experimentar o HTMX em um ambiente simples de sandbox de código.
• Pode ser usado imediatamente, sem configuração separada, e permite conferir exemplos originalmente trazidos de htmx.org.
• É possível escrever código no navegador em um ambiente semelhante a um backend, definir endpoints em server.js e renderizar seus próprios templates.
• Ele executa um servidor simulado que intercepta as requisições feitas pelo HTMX e oferece processamento de requisições e um mecanismo de templates familiar para quem usa Django.
• Este projeto não se limita apenas ao HTMX, então também é possível testar livremente outras bibliotecas.

Salvar e compartilhar

• Você pode copiar em formato JSON clicando no botão "Copy as JSON" no canto superior direito.
• Faça upload do conteúdo copiado para um Gist e insira a raw URL em "Load Playground" para que a URL dessa página seja atualizada e possa ser compartilhada.
• O código também está disponível no GitHub.

Observações

• Não há funcionalidade de navegação entre páginas.
• O suporte a dispositivos móveis é limitado.
• server.js pode ter estado, mas se o estado for atualizado na view on.get("/"), essa atualização pode se perder porque, no carregamento inicial da página, ela é buscada por meio de um iframe separado.

Bibliotecas usadas

• Svelte
• Ace (editor de código)
• PollyJS (servidor simulado)
• Nunjucks (mecanismo de templates)

Opinião do GN⁺

• O HTMX Playground é uma ferramenta útil para desenvolvedores web prototiparem rapidamente aplicações web interativas usando HTMX.
• Ao oferecer um ambiente de fácil acesso para desenvolvedores familiarizados com frameworks backend como Django, ele ajuda a integrar as experiências de desenvolvimento de frontend e backend.
• A ferramenta também oferece recursos para salvar e compartilhar código com facilidade, o que pode ser muito útil para colaboração ou fins educacionais.

[GN⁺]

Comentários do Hacker News

• Agradecimento do criador do htmx

  • Criador do htmx: foi transmitida uma mensagem de agradecimento do criador do htmx. Ele expressou que é muito animador ver interesse e uso do seu projeto.

• Preocupações e perguntas sobre o uso de htmx

  • Preocupação com o pool de desenvolvedores: um usuário considerou usar htmx, mas sentiu dificuldade para contratar por haver um pool menor de desenvolvedores. Compartilhou a experiência de que era mais fácil contratar desenvolvedores de frontend especializados e acostumados a frameworks específicos do que encontrar desenvolvedores full stack especializados. Também comentou que os desenvolvedores tendem a evitar lidar com código complexo e que não queria que o backend se tornasse um gargalo. Perguntou se o htmx reconhece esse problema e como pretende resolvê-lo.

• Reflexões sobre htmx e suporte a aplicativos móveis

  • Suporte a apps móveis: um usuário disse que gosta do conceito do htmx e começou a ler um livro relacionado, mas ficou em dúvida ao lembrar que, quando fosse necessário dar suporte a apps móveis, teria de reescrever frontend e backend em grande escala. Mencionou conhecer o hyperview.org, mas observou que um app react-native não se adequa ao caso de uso de seu interesse.

• Opiniões sobre a escolha do editor e a saída de erros

  • Editor e saída de erros: um usuário apontou que o suporte móvel é limitado e argumentou que deveria ser usado o Monaco Editor em vez do Ace Editor. No entanto, foi explicado que o Ace é usado porque o Monaco intencionalmente não funciona em dispositivos móveis. Isso foi sustentado por um link para uma issue no GitHub.

• Relato de uso de htmx com Django

  • Uso de htmx com Django: um usuário disse que está usando maplibre, Django e htmx juntos, e planeja publicar um exemplo para compartilhar com outras pessoas.

• Experiência de uso e feedback sobre htmx

  • Uso e feedback sobre htmx: um usuário avaliou que usou htmx no trabalho e que funcionou bem. Pretende continuar usando, mas talvez também faça uma versão baseada em PHP. Compartilhou a experiência de ter perdido trabalho algumas vezes ao colar JSON no campo de carregamento por URL e mencionou o problema de não conseguir limpar o navegador de requisições de rede, apontando isso como um pedido de funcionalidade.

• Pergunta sobre suporte técnico

  • Suporte a ActiveX: um usuário perguntou se o htmx oferece suporte a ActiveX.

• Comentário sarcástico sobre a escolha de ferramentas de desenvolvimento

  • Uso de Svelte: um usuário perguntou se o htmx foi feito com Svelte. Também fez um comentário sarcástico perguntando onde estão os puristas de MPA (Multi-Page Application) e qual seria a reação deles.

• Curiosidade sobre desenvolvimento de apps offline

  • Desenvolvimento de apps offline: um usuário perguntou se alguém cria apps offline com htmx e HTML por meio de requisição-resposta, definindo um servidor virtual dentro de um service worker.

• Apontamento de erro de digitação na descrição do site

  • Erro de digitação: um usuário apontou que há um erro de digitação na descrição da página principal do site. Disse que "intersepts" deveria ser corrigido para "intercepts".