En la era actual del desarrollo web, muchas decisiones arquitectónicas suelen estar impulsadas por 'vibras': preferencias subjetivas sobre la experiencia del desarrollador (DX) o afirmaciones de marketing sobre la velocidad. Sin embargo, a medida que el desarrollo se desplaza hacia un modelo 'agéntico', donde los agentes de IA generan el código en lugar de que los humanos lo escriban manualmente, las limitaciones de la DX se vuelven menos relevantes. Nolan Lawson exploró este cambio mediante un benchmark sobre cómo diferentes frameworks de JavaScript afectan la eficiencia y la calidad de la producción de los agentes de IA encargados de construir una aplicación de Pokémon no trivial.
Para llevar a cabo el experimento, Lawson instruyó a un agente de IA (Opus 5.5) para que construyera una aplicación con mucho contenido utilizando diez frameworks o meta-frameworks diferentes, incluyendo Next.js, Nuxt, SvelteKit y Angular. Se le proporcionó al agente una especificación y se le permitió utilizar herramientas oficiales como las habilidades de Model Context Protocol (MCP) donde estuvieran disponibles. Los resultados mostraron una clara correlación entre la complejidad del framework y el 'costo' de generación. Las arquitecturas más simples como Hono+htmx y Astro fueron las más eficientes, con Hono+htmx costando una mediana de $2.67 por ejecución. En contraste, frameworks más complejos como SvelteKit ($4.28) y Angular ($4.97) fueron significativamente más caros tanto en términos de dólares estadounidenses como de tiempo de reloj, con Angular tomando una mediana de 17.2 minutos para completarse.
Los resultados del benchmark mostraron una clara correlación entre la complejidad del framework y el costo de generación, demostrando que las arquitecturas más simples resultaron ser más eficientes.
Más allá del costo de generación, el benchmark también midió el rendimiento de la aplicación final utilizando métricas de Lighthouse. Los datos revelaron una brecha de rendimiento entre los frameworks con tendencia a Multi-Page Application (MPA) y los frameworks pesados de Single-Page Application (SPA). Astro y Hono+htmx lograron los mejores resultados, con Astro transfiriendo 0 KiB de JavaScript en el lado del cliente y Hono+htmx transfiriendo solo 18 KiB. Por el contrario, frameworks pesados como Next.js (142 KiB) y Angular (93 KiB) resultaron en conteos de bytes de JavaScript más altos y un mayor Total Blocking Time (TBT). Curiosamente, el JavaScript 'Vanilla' tuvo un rendimiento inferior en comparación con varios frameworks, lo que sugiere que, si bien la simplicidad es clave para la eficiencia del agente, cierto nivel de abstracción de framework sigue siendo beneficioso para el éxito del agente.
Si bien estos resultados proporcionan una instantánea clara del comportamiento del agente, el experimento tiene limitaciones específicas. La aplicación de Pokémon utilizada como 'holotipo' es principalmente basada en contenido y carece de la alta interactividad de herramientas empresariales complejas como Gmail o Figma. Debido a que el benchmark se centra en una aplicación a pequeña escala, las compensaciones entre rendimiento y costo podrían cambiar significativamente cuando los agentes tengan la tarea de construir sistemas altamente dinámicos y con mucho estado. Además, la naturaleza estocástica de los LLM significa que las ejecuciones individuales pueden variar enormemente, lo que hace que estos resultados sean una representación mediana del comportamiento del agente en lugar de un resultado garantizado para cada proyecto.
La aplicación de Pokémon utilizada como 'holotipo' es principalmente basada en contenido y carece de la alta interactividad de herramientas empresariales complejas como Gmail o Figma.