Tómese un momento para observar esta captura de pantalla de la aplicación GitHub Copilot. Es pequeña, contiene muchos íconos y cuenta la historia más fascinante sobre la que estoy muy emocionado de escribir. Esta imagen representa un conjunto de sesiones apiladas. Se trata de una serie de tareas dentro del mismo repositorio, donde cada sesión se construye a partir de la anterior.
Abordaremos los detalles más adelante, pero primero, ¿por qué es tan especial esta captura de pantalla? Debemos retroceder más de una década para empezar. Tengo un repositorio muy antiguo de una aplicación personal que creé hace años (alrededor de finales de 2014). Ha hecho lo que necesitaba durante todo este tiempo: funciona como un panel de control personal de dispositivos inteligentes, calendarios y gestión de tareas en mi hogar. Ocasionalmente realizo actualizaciones, pero se han vuelto cada vez más difíciles de manejar.
Mis dependencias se habían vuelto antiguas. Vergonzosamente antiguas. Estaba usando React 15 (lanzado en 2016), Less para el preprocesamiento de CSS y una versión de react-bootstrap de esa misma época. Sí, leyó bien. Bootstrap. Era antiguo. Intentar desenredar este desastre absoluto antes de la llegada de la IA me habría llevado semanas. Lo había intentado y abandonado anteriormente. No es la aplicación más grande del mundo, pero es lo suficientemente grande como para ser dolorosa, y el esfuerzo simplemente no valía la pena.
…pero ahora tenemos IA, así que inicié la aplicación GitHub Copilot, agregué el repositorio y comencé. Primer paso: ¿Podría resolver esto en un solo intento? No. ¡Pero lo intenté! Este es el prompt que utilicé en el modo Plan: Quiero modernizar el frontend de este proyecto. Escribí gran parte de este código hace más de 10 años y necesita una limpieza profunda. Estoy pensando en empezar a usar Tailwind o simplemente CSS nativo (por favor, evalúe todo para ayudarme a decidir), eliminar todo el código Less y limpiar todo en términos de accesibilidad y capacidad de respuesta. Ahora mismo quiero centrarme en los estilos y luego organizar y consolidar la funcionalidad de React. Podría valer la pena modernizar las dependencias también. Vamos a elaborar un plan antes de profundizar.
1. Nada es sagrado, está bien si tenemos que empezar de cero en algunas partes. 2. Los enlaces deben cambiar de color y añadir subrayado al pasar el cursor o recibir foco. 3. Las cajas de entrada deben tener un radio de borde más pequeño y etiquetas más limpias. 4. Debe haber un ajuste de contenedor con ancho máximo para que un campo de entrada no ocupe todo un monitor ancho.
Pasé esto a Claude Opus 4.8, obtuve una revisión de tipo 'Rubber Duck' de GPT-5.5 y tuve que realizar bastantes intercambios para tomar decisiones. Una vez que llegué a un punto con el que estaba satisfecho, presioné "go" y dejé que la aplicación trabajara en mi proyecto para ver si funcionaba. No funcionó, y fue mi culpa.
Segundo paso: Darme cuenta de que ya lo había intentado antes. ¿Recuerda cuando dije que lo había intentado y abandonado? Resulta que tenía una rama antigua de desarrollo donde ya había modernizado algunas partes, pero no me había dado cuenta de los problemas de compatibilidad que encontraría. ¡Pero eso fue algo bueno! Cuando ejecuté la nueva versión desde esta sesión, me di cuenta de que estaba creando ramas a partir de 'main', pero que mi despliegue actual utilizaba mi versión parcialmente actualizada en 'dev'. Por lo tanto, algunas características deseadas que había creado para mí mismo debían incluirse en este conjunto de cambios. Pero los cambios eran lo suficientemente grandes como para tener que aplicarlos a la rama 'dev' para mantener mi cordura, en lugar de importar los cambios de 'dev' a 'main'.
Antes de la IA, esto me habría hecho arrancarme los pelos de la frustración. Debo admitir que también me sentí frustrado aquí. Había gastado tiempo y tokens intentando que esto funcionara con lo que pensaba que era un plan decente. ¡Pero pude cambiar de marcha (y de sesiones) con una simple petición, lo cual fue mucho más genial de lo que esperaba! Copilot creó una nueva sesión para mí, cerró el Pull Request que había intentado y trasladó mis decisiones de estilo a los cambios que estaba aplicando en la rama 'dev'.
Tercer paso: Hallazgos tras las pruebas. Bien, tenía una buena rama en marcha y un Pull Request con el que estaba decentemente satisfecho. Sin embargo, al comenzar las pruebas, no pude evitar notar algunas advertencias antiguas en mi consola. Mi corazón se llenó de temor al ver referencias antiguas a findDOMNode y componentWillReceiveProps, funciones que personalmente no había tocado en años. Esas referencias ya no estaban tanto en mi base de código, pero sí en react-bootstrap. Abrí el modo Plan nuevamente, porque necesitaba averiguar si una actualización funcionaría o si debería eliminar la biblioteca por completo: ¿Crees que deberíamos eliminar react-bootstrap por completo (y reemplazarlo con una alternativa moderna) o simplemente actualizar/migrar los componentes existentes? Ejecutar esto me dio un plan decente, analizó las opciones y recomendó reemplazar la biblioteca por completo.
Cuarto paso: Apilando una sesión sobre otra. Necesitaba asegurarme de que mis cambios estuvieran a salvo del trabajo existente, pero el reemplazo de react-bootstrap se sentía como una expansión excesiva del alcance (scope creep) para lo que estaba haciendo actualmente. He descubierto que en gran parte de mi trabajo de ingeniería "agentic", es particularmente difícil evitar ese tipo de expansión. Como no tengo que escribir todo el código yo mismo, ¡es muy tentador hacer Pull Requests de 10,000 líneas que se encarguen de todas las cosas que quiero hacer! Lo cual es realmente solo una nueva forma de procrastinación.
Entonces, en lugar de hacer este mega Pull Request para probarlo, lo dividí con una nueva sesión y escribí el prompt: Hagamos un Pull Request para el trabajo existente y luego comencemos una nueva sesión para este trabajo de reemplazo de react-bootstrap que se ramificará a partir de este trabajo existente y será un Pull Request separado para fusionar en 'dev' después de este primero. Esta es la parte que se sintió lo suficientemente mágica como para querer escribir esta entrada de blog. La aplicación GitHub Copilot: creó un Pull Request para todos mis cambios actuales desde 'dev', hizo una "sesión apilada" para la eliminación de react-bootstrap (tomó el contexto anterior, creó una sesión para ejecutarse después de la existente, hizo un plan, me hizo aprobar el plan y lo ejecutó) e hizo un Pull Request apilado siguiendo mi trabajo anterior. ¡ESTO FUE GENIAL! ¿Sesiones apiladas y Pull Requests apilados? ¿Es este el futuro? SÍ.
En caso de que no entienda lo que eso significa por su nombre: una pila es una serie de Pull Requests en el mismo repositorio donde cada uno apunta a la rama del Pull Request debajo de él, formando una cadena ordenada que finalmente llega a su rama principal. En mi caso, no solo las sesiones se siguieron una a otra, ¡sino que sus cambios también lo hicieron!
Quinto paso: Navegando hacia el atardecer con Pull Requests apilados. Sé que estoy siendo un poco descarado con mi entusiasmo, pero mi felicidad es sincera. La facilidad para enviar estos cambios fue una experiencia encantadora después de haber descuidado mi antigua base de código durante años. Observemos esa primera captura de pantalla nuevamente: se la explicaré. En la parte superior, puede ver el repositorio que importé. Luego, "Modernización del frontend" es el nombre de la sesión inicial. La siguiente capa anidada es el primer intento de Pull Request, que finalmente no enviamos (de ahí el ícono rojo). La siguiente capa anidada al mismo nivel es donde obtuvimos un Pull Request funcional para la rama 'dev'. La sesión anidada debajo de eso es el borrador del Pull Request en progreso, con los cambios de react-bootstrap. El desarrollo de software nunca ha sido fluido. Pero este proyecto se hizo mucho más fácil con estas herramientas modernas. Si está buscando modernizar sus propias bases de código, ¡intente esto! Revise los Pull Request stacks donde sea que suba código en GitHub, y las sesiones apiladas en la aplicación GitHub Copilot. Vía GitHub Blog.
