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.

Questo articolo è stato scritto con l'assistenza dell'IA.
News Factory APP - notizie agentiche per potenziare il tuo SEO e AEO.