En Hibot Chat lideré la migración de las aplicaciones estratégicas de Angular a React. Éramos dos desarrolladores, tomó 5 meses y el producto nunca dejó de recibir features: migramos módulo a módulo, más de 40 en total.
Módulo a módulo, sobre la arquitectura nueva
Cada módulo se reescribía directamente sobre la arquitectura nueva de React, en lugar de traducir el código de Angular línea por línea. Así cada módulo migrado nacía con la estructura y las convenciones del destino, y el producto seguía operando mientras el resto esperaba su turno.
Dos roles: migrar y revisar
Además de migrar, me encargaba de revisar las nuevas implementaciones: que cumplieran los requisitos y las buenas prácticas de la arquitectura nueva. En un equipo de dos, esa revisión era lo que mantenía la consistencia entre módulos migrados en momentos distintos. La migración dejó además un sistema de componentes reutilizables compartido entre productos.
Lo difícil: que nadie notara el cambio
El objetivo era que el cliente no percibiera un cambio drástico: cada módulo en React tenía que funcionar igual y verse igual que su versión en Angular. Esa doble paridad, funcional y visual, fue lo más exigente. Una migración bien hecha es invisible para quien usa el producto.
Cómo medimos el resultado
El bundle inicial lo comparamos en la salida del build, antes y después: bajó un 38 %. El rendimiento lo medimos con el tiempo de carga de las mismas pantallas en ambas versiones: alrededor de un 40 % más rápido.
Lecciones
- Reescribir sobre la arquitectura destino, no traducir: un módulo migrado debe parecer nativo del nuevo stack.
- La paridad visual importa tanto como la funcional cuando el usuario no pidió el cambio.
- En un equipo pequeño, revisar cada implementación nueva evita que la arquitectura se degrade a mitad de camino.
- Migrar por módulos permite seguir entregando features mientras la migración avanza.