Velocidad, Calidad y AI: ¿No Puedes Tenerlo Todo (O Sí Puedes?)

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2026
November 16 - 19, 2026
New York, US & Online
Upcoming event
JSNation US 2026
JSNation US 2026
November 16 - 19, 2026. New York, US & Online
Bookmark
Rate this content
Sentry
Promoted
Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

Cada equipo que trabaja con AI enfrenta la misma tensión: moverse rápido y lanzar, o desacelerar y hacerlo bien. En Zed, construimos un IDE obsesionado con el rendimiento y la calidad. Esto significa ser brutalmente honestos sobre dónde AI ayuda, dónde perjudica y cómo tomamos decisiones cuando la respuesta no es obvia. Esta es la historia de cómo navegamos esa tensión en la práctica: las compensaciones, los errores y el marco que hemos construido para mantener la calidad viva cuando la velocidad es el estándar. Todo mientras estamos completamente obsesionados con la calidad, la velocidad y el rendimiento.

This talk has been presented at React Summit 2026, check out the latest edition of this React Conference.

Gaauwe Rombouts
Gaauwe Rombouts
28 min
12 Jun, 2026

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Gawe discute sobre los frameworks de React, herramientas y agentes, enfatizando la velocidad y la colaboración en la construcción de Z, un editor de código basado en Rust. Z se diferencia por su rápido rendimiento, colaboración en tiempo real y soporte para diversas plataformas. La charla cubre nuevas herramientas frontend, autocompletado de código y linting, destacando las características de Z para los desarrolladores de React. Z ofrece una plataforma abierta, creación de temas personalizados e integración profunda con agentes para mejorar los flujos de trabajo. El viaje de los fundadores de Adam a Rust muestra el compromiso de Zed con el rendimiento, la UI de código abierto y características de soporte como servidores MCP y reconocimiento global de habilidades.

1. React Frameworks and Agents Discussion

Short description:

Gawe, un ingeniero de Z, discute sobre frameworks de React, herramientas y agentes utilizados en el ecosistema front-end. Planea construir un proyecto incorporando los frameworks y herramientas mencionados con el soporte del agente Z.

Hola a todos. Soy Gawe. Soy ingeniero en Z y quiero comenzar con algunas opiniones contundentes. ¿Alguien puede decirme cuál es su framework de React favorito que utilizan? ¿Next JS? Escucho Next JS aquí. Déjame anotarlo rápidamente. ¿Alguien piensa que su framework es mejor que Next JS? ¿Algún detractor de Next JS aquí que quiera una alternativa? No empieces a apilar. Bien. ¿Algún otro framework? ¿React Router? ¿Y ustedes usan alguna herramienta con esos frameworks? ESLint es bastante estándar hoy en día, pero el ecosistema front-end siempre se mueve rápido. ¿Quizás hay algunos nuevos linters, algunas otras herramientas nuevas y geniales que alguien esté usando? No todos a la vez. Bien. Oxlint. Bien. Y por último, pero no menos importante, algo que se mueve aún más rápido que el ecosistema front-end es por supuesto los agentes. Entonces, ¿alguien tiene un agente que use en su trabajo diario? Supongo que algunas personas están usando agentes aquí, así que no sean tímidos. Sé que es un grupo grande, pero ¿alguien tiene un agente? ¿Cloud Code? Bien. ¿Alguien está usando un agente diferente a Cloud, o todos somos fanáticos de Cloud aquí? ¿CodeX? ¿Y tenemos tal vez uno más que podamos probar? ¿Cursor? Muy bien.

Así que lo que quiero hacer ahora es que preparé una pequeña habilidad llamada la habilidad de demostración del React Summit, y preparé algunos datos offline con información sobre las charlas que ocurrieron hoy. Y lo que voy a hacer es para los frameworks que se mencionaron, voy a construir un nuevo proyecto con ese framework y posiblemente una herramienta que se mencionó en el agente que se requirió. Porque en Z soportamos muchos lenguajes diferentes, muchas herramientas diferentes, pero también muchos agentes diferentes. Así que comencemos con el agente Z. Tengo el agente Z seleccionado aquí. Pero en el agente Z soportamos muchos proveedores de forma predeterminada. Así que como algunas personas ya mencionaron, CodeX, por ejemplo, puedes iniciar sesión a través de la suscripción de OpenAI o tu suscripción de ChetGPT. Ya estoy registrado con mi suscripción de ChetGPT. Así que vamos a crear una demostración del React Summit. Y tenemos algunas opciones. Next sí. Probablemente la gente esté usando Biome aquí, así que incluyamos Biome también. Y hagamos que esto comience.

2. Project Work Trees and External Agents

Short description:

Creando nuevos árboles de trabajo, apoyando agentes externos con el protocolo del cliente agente. Probando Gemini como un agente externo con Donstack start y Oxalint en una demostración del React summit.

Porque vamos a crear múltiples proyectos, voy a crear un nuevo árbol de trabajo ahora. Y ves una nueva entrada aquí. Además de nuestros propios agentes, apoyamos agentes externos. Tenemos nuestro propio protocolo para eso llamado el protocolo del cliente agente. Y es una abstracción sobre los arneses que los agentes pueden implementar. Y luego otros clientes pueden usar su propia UI sobre él.

Así que creo que alguien mencionó Cursor. No creo que tenga una suscripción a Cursor en este momento. Así que tal vez podamos probar otro agente externo. Tengo algunos instalados aquí. Si quieres más, apoyamos un montón de diferentes agentes del registro ACP. Así que usemos en este caso Gemini. Se va a cargar ahora. Está comenzando a arnesar en el fondo. Y luego todavía tenemos nuestra UI establecida a la que estamos acostumbrados. Así que crea una demostración del React summit con, y creo que teníamos Donstack start y Oxalint. Así que mientras eso está corriendo, podemos crear otro árbol de trabajo.

En el fondo, estos agentes todavía están corriendo. Y otra cosa que tenemos se llama hilos de terminal. Así que si abres hilos de terminal aquí, como dice el nombre, abre otro terminal. Tal vez algunos agentes no sean soportados ni por ACP ni por nuestro propio agente set. Un buen ejemplo de eso es Cloud Code. Tenemos soporte para Cloud Code, tanto en nuestro agente set como en ACP. Pero Entropiq también anunció que su suscripción va a cambiar y que terceros no pueden usar la suscripción más. Así que se basará en tokens específicos. Pero en este caso, todavía puedes ejecutar Cloud como cualquier terminal y sigue siendo una entrada dentro de set aquí, todavía corriendo en paralelo con todos los otros agentes.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
La Guía del Desarrollador de React para la Ingeniería de AI
React Summit US 2025React Summit US 2025
96 min
La Guía del Desarrollador de React para la Ingeniería de AI
Featured WorkshopFree
Niall Maher
Niall Maher
Una masterclass integral diseñada específicamente para desarrolladores de React listos para convertirse en ingenieros de AI. Aprende cómo tus habilidades existentes de React—pensamiento en componentes, gestión de estado, manejo de efectos y optimización del rendimiento—se traducen directamente en la construcción de aplicaciones de AI sofisticadas. Cubriremos todo el stack: integración de API de AI, respuestas en streaming, manejo de errores, persistencia de estado con Supabase y despliegue con Vercel.Traducción de habilidades:- Ciclo de vida de componentes → Ciclo de vida de conversación de AI- Gestión de estado → Gestión de contexto y memoria de AI- Manejo de efectos → Streaming de respuestas de AI y efectos secundarios- Optimización del rendimiento → Caché de AI y optimización de solicitudes- Patrones de prueba → Estrategias de prueba de interacción de AILo que construirás: Una herramienta completa de gestión de proyectos impulsada por AI que muestra patrones de integración de AI a nivel empresarial.