> For the complete documentation index, see [llms.txt](https://weekly-essay.mikey.wang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://weekly-essay.mikey.wang/es/2026/w12-d2-observation-frontend-vitality-in-the-ai-wave/2026-d2-key-takeaways-review.md). # 2026-Notas de D2 Programa del congreso: La organización suele compartir las diapositivas un mes después. No ofrece retransmisión ni grabaciones. En un solo día hay decenas de charlas simultáneas, así que es inevitable perderse muchas. Elegí a algunos ponentes con una base profesional sólida. Lo que sigue se limita a las sesiones a las que asistí y que considero que merece la pena recordar. Antes, una introducción al ecosistema JS actual. He observado que incluso muchos profesionales de frontend no conocen bien el ecosistema de su lenguaje o conservan la imagen que tenían al empezar. Hoy destacan Vercel, VoidZero, Bun, Biome y otros. Pedí a ChatGPT un diagrama ASCII que lo explica bien; lo incluyo como referencia. ``` ┌──────────────────────────────────────────────────────────────────────┐ │ JavaScript Ecosystem │ └──────────────────────────────────────────────────────────────────────┘ ┌──────────────┐ │ Developers │ └──────┬───────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ① AI / Coding Entry Layer │ │----------------------------------------------------------------------│ │ Cursor / Claude Code / Copilot / Windsurf / Zod │ │ │ │ 作用： │ │ - 代码生成 │ │ - agent 工作流 │ │ - IDE 内交互 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ② Framework / Application Layer │ │----------------------------------------------------------------------│ │ React / Vue / Svelte / Solid │ │ Next.js / Nuxt / Remix / Astro │ │ │ │ 代表公司 / 项目： │ │ - Vercel → Next.js │ │ - NuxtLabs → Nuxt │ │ - Vue / Evan You ecosystem │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ③ Toolchain Layer ← 现在竞争最激烈 │ │----------------------------------------------------------------------│ │ Bundler / Dev Server / Compiler / Linter / Formatter / Test │ │ │ │ 主要玩家： │ │ - Vite / Rollup / Rolldown → VoidZero 阵营 │ │ - Turbopack → Vercel │ │ - Rspack → ByteDance │ │ - Webpack → 旧时代核心基础设施 │ │ - Biome → lint / format │ │ - esbuild → 高性能构建基础件 │ │ - SWC / OXC → 编译基础设施 │ │ │ │ 这里决定： │ │ - 本地开发体验 │ │ - 构建速度 │ │ - 配置模型 │ │ - AI 能否直接操作工程系统 │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ④ Runtime Layer │ │----------------------------------------------------------------------│ │ Node.js / Bun / Deno / Browser / Edge Runtime │ │ │ │ 主要玩家： │ │ - Node.js Foundation / OpenJS │ │ - Bun │ │ - Deno │ │ - Vercel Edge Runtime │ │ - Cloudflare Workers │ └──────────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────────┐ │ ⑤ Deploy / Cloud / Delivery Layer │ │----------------------------------------------------------------------│ │ Vercel / Netlify / Cloudflare / AWS / Azure / GCP │ │ │ │ 作用： │ │ - 部署 │ │ - 托管 │ │ - 边缘分发 │ │ - Serverless / AI App Runtime │ └──────────────────────────────────────────────────────────────────────┘ ``` #### I. **Vite+: una cadena de herramientas JS integrada — Evan You** Continúa promoviendo la reescritura de las herramientas de frontend en Rust. Usarlo para la infraestructura de frontend ya es prácticamente un consenso del sector. La excepción es TSC. | **Tipo de herramienta** | **Generación anterior (JavaScript)** | **Nueva generación (Rust)** | | ----------------------- | -------------------------------------------- | --------------------------- | | Creación de proyectos | Vue Cli / Create React App | Vite 8 | | Empaquetado | Webpack (compilación con ts-loader) / Rollup | Rolldown | | Construcción de TS | tsup (basado en esbuild) | tsdown | | Análisis de código | ESLint | Oxlint | | Formato de código | Prettier | Oxfmt | | Framework de pruebas | Jest | Vitest | ![Herramientas de la nueva generación](https://km.sankuai.com/api/file/cdn/2752980249/228125441867?contentType=1\&isNewContent=false) Vite+ reúne en un único archivo las distintas configuraciones de la cadena de herramientas y simplifica ese trabajo. ![Configuración unificada en Vite+](https://km.sankuai.com/api/file/cdn/2752980249/228143018714?contentType=1\&isNewContent=false) ¿Por qué es importante su trabajo? ¿Por qué necesita la era de la IA una cadena de herramientas unificada y eficiente? **La idea central: escribir código ya no es el cuello de botella. La IA necesita comprobar y verificar continuamente lo que escribe. Si no le ofrecemos una cadena de herramientas limpia y eficiente, eso limitará las grandes mejoras de productividad que podríamos obtener.** ![La verificación como límite de productividad](https://km.sankuai.com/api/file/cdn/2752980249/228145264077?contentType=1\&isNewContent=false) Al final mencionó brevemente el producto que VoidZero está probando de forma privada. Se centra en el despliegue automático y la seguridad de tipos de extremo a extremo para aplicaciones full stack. Parece un paso hacia los servicios en la nube, en la misma dirección que Vercel. ![Producto en pruebas de VoidZero](https://km.sankuai.com/api/file/cdn/2752980249/228143392739?contentType=1\&isNewContent=false) #### II. **Google A2UI: interfaces generadas por LLM para agentes y A2A — Jennie** Una muestra de la influencia de Google: ![Sesión de Google A2UI](https://km.sankuai.com/api/file/cdn/2752980249/228154026954?contentType=1) ![Público de la sesión](https://km.sankuai.com/api/file/cdn/2752980249/228178285513?contentType=1\&isNewContent=false) La charla presentó A2UI, una propuesta para generar interfaces dinámicas para los usuarios. Hay muchas otras además de A2UI. | **Dimensión** | **AG-UI** | **ChatKit** | **MCP UI** | **Vercel AI UI** | **Google A2UI** | | ------------------------ | ----------------------------------------- | -------------------------------- | -------------------------------------------- | -------------------------------- | -------------------------------------- | | **Enfoque** | Dirigido por el estado del frontend | Específico de OpenAI | Renderizado remoto del agente | Integración de una pila vertical | **Protocolo declarativo general** | | **Mecanismo central** | Estado compartido del cliente | Biblioteca de componentes propia | iframe aislado | Shadcn + SDK | **Descripción de renderizado en JSON** | | **Relación señal/ruido** | Muy alta (rendimiento nativo) | Media | Media (coste de comunicación entre dominios) | Alta (eficiencia de desarrollo) | **Muy alta (coherencia visual)** | | **Seguridad** | Alta (frontend controlado) | Alta | Muy alta (aislamiento del entorno) | Alta | **Muy alta (sin ejecución de código)** | | **Multiplataforma** | Limitada (hay que reescribir el frontend) | Limitada | Amplia (Web primero) | Limitada (Web primero) | **Muy amplia (nativo y Web)** | **El rasgo de Google A2UI: la interfaz como datos estructurados.** A diferencia de Vercel, que envía fragmentos de componentes React —código— desde el servidor, A2UI exige que el agente envíe solo descripciones JSON. * El agente produce un flujo de JSON plano que describe la intención de la interfaz, por ejemplo `{type: "chart", data: [...]}`. Al recibirlo, el cliente renderiza con componentes locales predefinidos y de confianza, como Angular, Flutter o Lit. * Esa separación entre datos y renderizado elimina por completo el riesgo de que un LLM genere scripts maliciosos, o XSS, y permite que las respuestas del agente tengan el mismo estilo visual en aplicaciones móviles nativas y páginas web. La lógica de AG-UI es: «El agente se ocupa de pensar y decidir; la lógica de la interfaz debe quedarse en el frontend». * Sincronización de estado, Shared State: establece un objeto de estado con sincronización bidireccional en tiempo real entre el agente y el frontend. El agente puede cambiarlo mediante instrucciones, por ejemplo `state.selectedItems = [...]`. El framework, React o Vue, detecta los cambios y actualiza los componentes locales en milisegundos. * Activación de acciones, Action System: el desarrollador expone al agente un conjunto de funciones, o Actions. El agente decide cuándo llamarlas, pero el código del frontend define por completo cómo se ejecutan. Eso garantiza la seguridad de la lógica de negocio. La lógica de MCP UI es: «La interfaz debería estandarizarse como una API. Donde vaya el agente, debe poder acompañarlo la interfaz». * Interfaz como recurso, UI as Resource: en MCP, la interfaz deja de ser código escrito previamente en el frontend y pasa a ser un recurso que el agente proporciona de forma dinámica. Devuelve una URI mediante `ui://`, por ejemplo `ui://analytics-dashboard/v1`. * Independencia del anfitrión, Host Agnostic: la interfaz ofrecida por un servidor MCP puede renderizarse directamente en Claude Desktop, ChatGPT, Cursor o una aplicación propia, sin reescribir el frontend para cada plataforma. Se apoya en un iframe. #### III. **Construir Agentic Coding: del modelo al framework — Cui Zeyu (Mayou) y Luo Changwei (Shanguo)** En Alibaba hay muchas herramientas de programación con IA, desarrolladas por distintos departamentos. Se parece mucho al frontend de hace diez años. Solo asistí a dos charlas, Qoder y Qwen-Code. Qwen-Code me pareció más interesante. Es un fork de Gemini CLI: . Anoté dos ideas. Lo demás era una presentación del producto; quien tenga interés puede leer el repositorio o descargarlo y probarlo. La programación es importante porque constituye una tarea con un alto grado de verificabilidad. En muchas actividades resulta fácil generar contenido pero difícil comprobar si es correcto, como al escribir artículos o emitir juicios subjetivos. En programación ocurre lo contrario: generar puede ser difícil, pero la compilación, las pruebas y los sistemas de evaluación permiten verificar rápidamente el resultado. Esa combinación de generación difícil y verificación fácil hace de la programación un objeto ideal de optimización para la IA y muestra la estrecha relación entre el valor de una tarea y su verificabilidad. ![Verificabilidad de las tareas de programación](https://km.sankuai.com/api/file/cdn/2752980249/228183240565?contentType=1) La mejora de los modelos en programación sigue tres vías de ampliación: volumen de datos, con muchos datos y una alta proporción de código; contexto, para comprender repositorios completos y relaciones largas, por ejemplo con 256K de contexto; y datos de calidad, usando datos sintéticos para mejorar continuamente el entrenamiento. Juntas permiten que el modelo evolucione mediante ciclos de respuesta verificable y dé un salto cualitativo en tareas complejas de ingeniería. ![Escala y calidad en el entrenamiento](https://km.sankuai.com/api/file/cdn/2752980249/228162627358?contentType=1\&isNewContent=false) #### IV. **De la ingeniería de contexto a Harness Engineering — Zhou Xiao** Zhou Xiao destacó entre los ponentes por su criterio técnico y su análisis sereno a partir de primeros principios. La cuenta de Web Infra de ByteDance compartió la transcripción: . Resumen: La programación con IA ha multiplicado por diez la eficiencia de escribir código, pero la entrega no se ha acelerado porque programar solo representa el 30 %; el 70 % restante corresponde a pruebas, diagnóstico, publicación y comunicación. Optimizar únicamente la escritura es un óptimo local: hay más código, más presión de verificación y personas más cansadas. Zhou Xiao parte de las realidades físicas de la autorregresión de Transformer, KV Cache, Prompt Cache y ReAct. Un contexto más largo encarece el prefill, diluye la atención y aumenta las alucinaciones; añadir al final es barato, modificar en el medio es caro. Por eso la ingeniería de contexto consiste en proteger la estabilidad del prefijo y diseñar con cuidado la estructura del prompt, no en acumular información sin límite. Conviene condensar una conversación larga en un snapshot o un AGENTS.md y delegar su almacenamiento al sistema de archivos, en lugar de introducirlo todo en el contexto. Desde esa base, el papel del ingeniero pasa de escribir código a diseñar entornos y herramientas: una cadena que el agente pueda leer, con baja latencia, salidas estructuradas y señales claras cuando algo falla. Las GUI, los registros y los gráficos tradicionales, orientados a personas, son en gran medida ruido para un agente. Una buena herramienta debe ser una API que pueda usar. MCP proporciona acciones atómicas; los Skills convierten métodos probados en procedimientos que se cargan cuando hacen falta; los subagentes dividen tareas largas en entornos aislados y se comunican mediante resúmenes estructurados, evitando que un único contexto acumule desorden hasta perder el control. El ciclo no debe terminar en «la IA escribe y yo reviso el código». El agente debe acceder a LSP, pruebas y CLI en sandbox, demostrar la corrección de su trabajo y reunir en un informe el alcance de los cambios, las capturas y el plan de pruebas. La persona revisa el resultado entregado, sin perseguir cada operación. Las especificaciones y los planes, la colaboración entre personas e IA y la decisión de cuándo usar AskUser buscan reducir pruebas innecesarias y reservar la atención humana para definir objetivos y evaluar resultados. La conclusión central es que el modelo es una función sujeta a restricciones físicas, no magia. Al entender esas restricciones, la ventaja del ingeniero consiste en diseñar un mejor harness: un sistema de ingeniería controlable, verificable y ampliable, formado por varios agentes y pocas personas, dentro de límites de contexto y de herramientas. No consiste en escribir más líneas de código.