Hono combinado com htmx foi a pilha JavaScript mais barata de construir em um teste direto entre agentes de codificação com IA, e Angular foi a mais cara. O teste comparativo, publicado por um desenvolvedor web, pediu ao Claude Opus 5.5 que criasse o mesmo aplicativo de Pokémon em 12 frameworks e mediu quanto cada um custou para ser produzido.

Como foi realizado o teste comparativo de codificação com IA?

O aplicativo é um site pequeno, mas não trivial, que puxa dados da PokéAPI. Os usuários podem listar Pokémon com seus tipos, golpes e dados de jogo, além de pesquisar e filtrar esses dados. Cada agente foi executado em um ambiente isolado (sandbox) e verificado por um conjunto de testes de conformidade baseado na árvore de acessibilidade, o que impedia os agentes de simplesmente gerar HTML estático antecipadamente. Quando um framework oferecia um servidor MCP oficial ou habilidades para agentes, os agentes foram instruídos a usá-los. O autor executou cada framework cinco vezes e usou a mediana, exceto no caso do Angular, que produziu dois aplicativos quebrados e teve seus resultados informados com base em três execuções.

Qual framework JavaScript foi o mais barato de construir com agentes de codificação com IA?

Os valores de custo vêm dos preços da API que o Claude Code informa, e não dos gastos reais do autor. Ele paga uma assinatura mensal fixa, portanto os números são uma estimativa. Hono com htmx teve mediana de US$ 2,67 por execução, seguido de perto pelo Astro, com US$ 2,76, e pelo Nuxt, com US$ 2,82. No outro extremo, o SvelteKit ficou em US$ 4,28, o Gracile com Lit em US$ 4,65 e o Angular em US$ 4,97. O autor observou que as faixas se sobrepõem, de modo que a execução mais barata do React Router ainda foi menos cara que a execução mais cara do Hono.

Os frameworks mais caros apresentaram alguns padrões consistentes. Em todas as execuções do SvelteKit, os agentes leram o guia de migração do SvelteKit v3, que, segundo o autor, é provavelmente novo demais para aparecer nos dados de treinamento do modelo. O Gracile era menos familiar aos agentes, que clonaram o repositório ou leram o código compilado da pasta node_modules. O custo do Angular acompanhou o tamanho geral do seu código.

O tempo e o uso de tokens seguiram uma ordem semelhante. O Astro teve a menor mediana de construção, com 8,2 minutos, e o Angular teve a maior, com 17,2 minutos, em uma faixa de 9,8 a 23,7. O Nuxt usou a menor quantidade de tokens, com mediana de 3,85 milhões, enquanto o Angular usou a maior, com 9,76 milhões. O autor afirmou que o Vanilla, que consistia em Vite com TypeScript e sem framework de interface, foi surpreendentemente mais lento e mais caro do que vários frameworks, o que, segundo ele, sugere que um framework pode ajudar mesmo quando não é necessário.

Os resultados do Lighthouse ficaram muito próximos. A acessibilidade obteve 100 pontos em todos os 12 frameworks, e o desempenho ficou entre 97 e 100. O Cumulative Layout Shift foi zero em todos, exceto no Vanilla. O dado mais revelador foi a quantidade de JavaScript que cada página enviava. O Astro enviou praticamente nada, 0 quilobytes. O Vanilla enviou 7 KiB e o Hono com htmx enviou 18 KiB. O Next.js enviou 142 KiB, a maior quantidade entre os frameworks testados. O Largest Contentful Paint variou muito entre as execuções e, em geral, favoreceu os sites renderizados no servidor, que exibem HTML antes de o código do lado do cliente ser executado. O autor afirmou que a diferença do Next.js se deveu principalmente a um aplicativo que não aplicou carregamento lento (lazy-load) às imagens, enquanto os outros quatro aplicaram.

O Angular teve um problema próprio. Em duas execuções, o agente criou um aplicativo renderizado no servidor que rejeitava qualquer requisição que não viesse de localhost, mesmo com as instruções indicando que o aplicativo ficaria atrás de um proxy reverso. O autor considerou isso uma falha em seguir a especificação e não repetiu essas iterações.

Por que o Angular teve o custo mais alto no teste comparativo de codificação com IA?

O tamanho do código é onde o autor encontrou o contraste mais claro. O Hono com htmx teve mediana de 1.370 linhas de código-fonte não vazias. O Angular teve 2.009. O autor escreveu que o Hono com htmx conseguia realizar praticamente o mesmo trabalho que o Angular com cerca de 70% do código, o que importa em um fluxo de trabalho com agentes, porque mais código significa mais tokens para edições futuras.

O autor aponta várias limitações. O teste abrangeu um único tipo de aplicativo, um site com muito conteúdo e pouca interatividade. Os resultados foram instáveis: os agentes às vezes se desviavam para tangentes, e a métrica de maior elemento do Lighthouse podia escolher imagens diferentes de uma execução para outra. O uso das ferramentas oficiais também foi desigual. O MCP do Nuxt nunca foi utilizado, e os agentes do Next.js leram seu arquivo de habilidades em apenas uma de cada cinco execuções. O Lighthouse e as Core Web Vitals também tendem a favorecer sites estáticos e renderizados no servidor em detrimento de aplicações de página única, de modo que o autor espera que os resultados sejam diferentes para painéis ou ferramentas interativas.

O código do teste está disponível no GitHub, e o autor convidou outras pessoas a executá-lo ou criar uma bifurcação (fork). Ele também disse suspeitar que os MCPs e as habilidades atuais podem estar causando mais prejuízo do que benefício, e que os autores de frameworks poderiam melhorar seus resultados. Seu argumento principal é que os desenvolvedores devem testar suas premissas sobre ferramentas, em vez de confiar em alegações sobre velocidade ou facilidade de uso por agentes que não apresentam evidências.

Este artigo foi escrito com a assistência de IA.
News Factory APP - notícias agênticas para impulsionar seu SEO e AEO.