Por que a Gumroad não escolheu o htmx

• A Gumroad considerou o htmx ao iniciar o novo projeto Helper.
• Queria usar o htmx para evitar a complexidade do React, mas houve divergências de opinião dentro da equipe.
• No início, o htmx parecia promissor para adicionar interações simples.

Limitações do htmx

• Intuitividade e experiência do desenvolvedor: trabalhar com htmx não foi tão intuitivo quanto com Next.js. Ao implementar formulários complexos e validação dinâmica, a lógica no lado do servidor ficou mais complexa.
• Limitações de UX: o htmx adota basicamente uma abordagem Rails/CRUD, o que tornou a experiência do usuário mais monótona. Implementar interfaces de arrastar e soltar foi mais difícil do que com React.
• Suporte de IA e ferramentas: o Next.js é mais familiar para ferramentas de IA, mas o htmx não. Isso afetou a velocidade de desenvolvimento e a resolução de problemas.
• Problemas de escalabilidade: à medida que o projeto ficava mais complexo, o htmx não conseguia acompanhar os requisitos. Ao adicionar colaboração em tempo real e recursos complexos de visualização de dados, o gerenciamento de estado ficou difícil.
• Comunidade e ecossistema: o ecossistema de React/Next.js é maduro e oferece várias soluções, mas o do htmx não.

Decisão final: migração para React/Next.js

• React/Next.js era mais adequado para construir uma UX complexa.
• Aproveitaram as vantagens do React em recursos como arrastar e soltar, gerenciamento de estado complexo, geração dinâmica de formulários, colaboração em tempo real e otimização de desempenho.
• Migraram para React para superar as limitações do htmx, e isso apoia a visão de longo prazo do projeto.
• Estão satisfeitos com essa decisão e, no momento, isso lhes permite avançar mais rápido, criar uma experiência de usuário mais atraente e aproveitar ferramentas e bibliotecas existentes.

Lições aprendidas com a experiência

• Considerar alternativas leves também é importante, mas escolher uma tecnologia que possa crescer junto com o projeto e apoiar a visão de longo prazo também é essencial.
• No caso do Helper, React e Next.js se provaram essa escolha, e desde a migração foi possível melhorar significativamente a experiência do usuário do app para os clientes principais.

Resumo do GN⁺

• A experiência da Gumroad mostra que, embora seja importante considerar alternativas leves, também é importante escolher uma tecnologia que possa sustentar o crescimento do projeto e sua visão de longo prazo.
• O htmx pode ser adequado para modelos de interação simples ou para aplicações existentes com renderização no servidor.
• Para a interface complexa e orientada a estado do Helper, React e Next.js foram uma escolha melhor.
• A stack tecnológica pode ser reavaliada conforme as necessidades mudam, e é importante manter flexibilidade sempre que novas tecnologias surgirem.

[GN⁺]

Opiniões do Hacker News

• O CEO da Gumroad compartilhou sua experiência de testar o htmx e depois migrar para o NextJS. Isso foi uma informação útil para quem estava procurando relatos de experiências negativas com htmx

  • Ferramentas de IA estão familiarizadas com Next.js, mas não com htmx. Isso sugere uma previsão importante sobre o futuro das ferramentas de desenvolvimento
  • Há a previsão de que os LLMs reforçarão a estrutura existente de que o vencedor leva tudo e incentivarão o uso de ferramentas open source

• Ao criar formulários complexos, a lógica no lado do servidor ficou mais complicada e difícil do que o trabalho no cliente com React

  • Existe um meme que enfatiza que a validação também precisa ser implementada no lado do servidor

• Tentaram manter o frontend leve com htmx, mas acabaram recorrendo a bibliotecas de terceiros para lidar com UI/UX complexa e gerenciamento de estado

  • Há a opinião de que trabalhar com React foi mais fácil justamente por causa do uso de bibliotecas de terceiros
  • Se era necessário gerenciar estado complexo e renderização, então talvez htmx não fosse uma boa escolha desde o início

• Foi difícil implementar uma interface de arrastar e soltar com htmx, e com uma biblioteca React conseguiram uma experiência mais fluida

  • Com htmx, o ideal é usar apenas o bundle de frontend estritamente necessário
  • É possível usar o evento htmx.onLoad para localizar marcações com atributos no conteúdo carregado e conectá-las

• A equipe parece estar mais acostumada com desenvolvimento frontend e teve dificuldades na comunicação com o backend

  • Reconhecem as vantagens dos componentes React e a facilidade de encontrar documentação e ajuda

• Há a opinião de que o processo de desenvolvimento com Next.js foi mais natural

  • Também há a opinião de que a sintaxe do ReactJS não parece natural

• Há quem ache interessante que o HTMX compartilhe esse tipo de experiência, e que existam projetos para os quais apenas HTMX não é suficiente

  • Reforçam que a validação de formulários também é necessária no backend
  • O caso de uma equipe que passou a depender fortemente de ferramentas de IA é considerado interessante
  • Há a opinião de que são necessários plugins para compensar as limitações do HTMX

• Há elogios ao fato de o HTMX.org hospedar esse tipo de ensaio

• Existe a preocupação de que ferramentas de IA possam dificultar a adoção de novos frameworks ou linguagens de programação

  • Imaginam a possibilidade de isso afetar as ferramentas de desenvolvimento de forma semelhante ao SEO