Actualicé a la versión 2.0.0 una biblioteca de gráficos para React Native que había creado hace 9 años y la publiqué en npm. La mayor parte de este trabajo de actualización la realizó un agente de IA, y quiero compartir el proceso.
Primero, una introducción a la biblioteca. Como su nombre lo indica, la identidad de react-native-pure-chart es ser "pure". No usa react-native-svg, ni ART, ni Skia, que hoy se volvió el estándar; dibuja gráficos de líneas, barras y pastel solo con componentes View/Text puros de RN. El principio de renderizado es el siguiente: calcula con trigonometría la distancia y el ángulo entre dos puntos de datos, rota una View delgada y larga con rotate transform para que parezca un segmento de línea, y une esas piezas para construir el gráfico completo. Su valor central es la dependencia cero: se puede usar con una sola línea de npm install, sin preocuparse por vincular bibliotecas de dibujo nativas ni por que se rompa la compilación durante pod install. En su pico tuvo 2,000 descargas semanales en npm, se usaba en unos 820 proyectos y tenía 289 estrellas. Después quedó abandonada durante 9 años, hasta el punto de no saber si funcionaba en versiones recientes de RN.
Justo tenía una cuenta de IA a la que pronto se le iba a restablecer el límite, así que durante la hora de almuerzo dejé un prompt.
"Ya hice git clone; haz que funcione bien en un entorno expo/RN reciente. Consulta la documentación del arnés"
Aquí, "arnés" se refiere a un entorno de autoverificación que ya tenía preparado. Es una configuración que permite manipular directamente el simulador de iOS y el emulador de Android con una herramienta de e2e móvil como Maestro, tomar capturas de pantalla y comprobar el resultado del renderizado. El punto clave de este trabajo está ahí.
Para hacer que una base de código de RN de hace 9 años funcione en expo/RN recientes, hay muchas cosas que tocar. La forma de escribir componentes y las API de aquella época seguían tal cual, así que no era simplemente subir versiones, sino prácticamente una refactorización de modernización. Este tipo de trabajo no es muy difícil en cada parte, pero tiene mucho volumen, y cada vez que se corrige algo hay que comprobar en la pantalla real que no se haya roto nada; hacerlo manualmente lleva bastante tiempo.
Mientras yo hacía otras cosas, el agente pasó varias horas iterando por su cuenta. Modificaba el código, ejecutaba la app en el simulador y el emulador, manipulaba la pantalla con e2e, tomaba capturas, evaluaba el problema de renderizado viendo esas capturas y luego volvía a modificar el código. Es importante que esta verificación no se limitaba a errores de compilación o a que pasaran los tests. En una biblioteca de gráficos, aunque el build sea exitoso, si una línea queda desalineada o un eje desplazado, es un fallo. Como es un proyecto donde la respuesta correcta es "lo que se ve en la pantalla", el ciclo de regresión visual basado en capturas cubrió partes que no se pueden verificar con unit tests.
El cambio más grande de esta versión es el soporte para gráficos de curvas (líneas suaves). De hecho, hace 9 años no pude soportar gráficos curvos. Para una línea recta basta con rotar una View, pero una curva requiere dividir el tramo en piezas pequeñas, calcular las coordenadas y el ángulo de cada pieza y aproximarla con segmentos cortos; en aquel momento no pude resolver el problema de que entre una pieza y otra se vieran pequeños cortes o ángulos, así que directamente no incluí la función. Esta vez, el agente no se quedó solo con revisar la captura completa: capturó con zoom los tramos donde parecía que la curva se cortaba y los inspeccionó. Luego ajustó los valores de las variables usadas para calcular las coordenadas y ángulos de las piezas, volvió a renderizar y volvió a ampliar para verificar, repitiendo ese ciclo. Cuando una persona repite manualmente un ciclo de tuning en el que cambia parámetros y evalúa el resultado a ojo, llega un punto en que acepta un compromiso; el agente siguió repitiendo hasta converger y, como resultado, se agregó como nueva función un gráfico de curvas suave. Es decir, esta vez entró una función que no había podido implementar hace 9 años.
Como resultado, quedaron completados la compatibilidad con entornos expo/RN recientes, el nuevo soporte para gráficos de curvas, la actualización de las capturas de gráficos en el README, y el build y despliegue de la versión 2.0.0 en npm. Es la primera actualización en 9 años.
Esto es lo que me dejó este trabajo. Llegué a pensar que el cuello de botella del coding con agentes no está tanto en el rendimiento del modelo como en el entorno de verificación. Cuando existe un arnés que permite verificar los resultados por sí mismo, puede converger incluso en calidad visual sin revisión humana. Especialmente en proyectos donde la respuesta correcta está en la pantalla, como bibliotecas de UI, la combinación de manipulación e2e y evaluación por capturas resultó efectiva. Parece que trabajos como la modernización de legacy, que no son muy difíciles pero tienen un alto costo de verificación repetitiva, se convirtieron en una buena categoría para delegar a agentes.
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
Aún no hay comentarios.