Migración de Inputs a Signals en Angular: Mejora de Rendimiento y Flujo

La reactividad en Angular ha evolucionado significativamente con la introducción de los signals, ofreciendo un rendimiento mejorado y una reactividad más granular. Esta nueva forma de manejar los inputs no solo optimiza el tiempo de ejecución de nuestras aplicaciones, sino que también proporciona una experiencia de desarrollo más intuitiva. Veamos cómo podemos migrar nuestros proyectos existentes a este nuevo modelo de reactividad y aprovechar todas sus ventajas.

¿Cómo migrar automáticamente a Signal Inputs en Angular?

Cuando tienes una base de código extensa, revisar y modificar manualmente cada input puede resultar tedioso. Afortunadamente, Angular ofrece una solución automatizada para esta migración. Mediante un simple comando, puedes convertir todos los inputs tradicionales en signal inputs sin tener que modificar cada componente individualmente.

Para realizar esta migración, ejecuta el siguiente comando en tu terminal:

ng generate @angular/core:signal-input-migration

Al ejecutar este comando, Angular analizará tu código y transformará automáticamente los decoradores @Input() en signal inputs. Durante el proceso, te preguntará si deseas migrar lo máximo posible, incluso si esto pudiera romper temporalmente la compilación. En muchos casos, es seguro aceptar esta opción.

¿Qué cambios realiza la migración?

La migración transforma código como este:

@Input() name: string | undefined;

getNameLength(): number {
  return this.name ? this.name.length : -1;
}

En algo similar a esto:

@Input({required: true}) name = input<string>();

getNameLength(): number {
  const name = this.name();
  return name ? name.length : -1;
}

Los principales cambios incluyen:

• Conversión de propiedades @Input() en funciones signal
• Ajuste de las referencias a estos inputs en los métodos de la clase
• Modificación de las referencias en las plantillas HTML

¿Cómo realizar una migración progresiva?

Una característica valiosa de esta herramienta de migración es la posibilidad de aplicarla de forma selectiva. Si no estás seguro de migrar toda tu aplicación de una vez, puedes especificar rutas o carpetas específicas:

ng generate @angular/core:signal-input-migration ./src/app/products

Esto permite una migración gradual, donde puedes probar los cambios en un módulo antes de aplicarlos a toda la aplicación. Esta aproximación reduce el riesgo y te permite verificar que todo funcione correctamente antes de continuar con el resto del código.

Verificación post-migración

Después de ejecutar la migración, es crucial verificar que tu aplicación siga funcionando correctamente. Comprueba:

• La navegación entre páginas
• La funcionalidad de componentes clave
• Las interacciones con formularios
• El renderizado correcto de datos

¿Cómo mejorar la legibilidad del código con signals?

Una práctica que algunos equipos de desarrollo adoptan es utilizar una convención de nomenclatura para distinguir fácilmente los signals de otras propiedades o métodos. Una convención popular es añadir el prefijo $ a las variables que son signals:

@Input() $message = input<string>();

someMethod() {
  const message = this.$message();
  // Resto del código
}

Esta convención hace que el código sea más legible, ya que permite identificar rápidamente qué variables son signals y requieren ser ejecutadas como funciones para obtener su valor.

Uso de alias para mantener la API pública

Si decides adoptar esta convención pero no quieres cambiar la forma en que otros componentes interactúan con el tuyo, puedes utilizar alias en los inputs:

@Input({alias: 'duration'}) $duration = input<number>();

Esto permite que los componentes padres sigan utilizando el nombre original (duration) mientras internamente trabajas con la convención ($duration).

Es importante mencionar que el uso de alias está considerado una mala práctica según algunas reglas de linting, ya que puede crear confusión. Sin embargo, en este caso específico, puede ser justificable para mejorar la legibilidad del código. Si decides seguir este enfoque, puedes desactivar la regla correspondiente en tu configuración de ESLint:

"@angular-eslint/no-input-rename": "off"

La decisión de adoptar esta convención debe ser consensuada por el equipo, evaluando si los beneficios en términos de legibilidad superan las desventajas de romper una regla de estilo.

La migración a signal inputs representa un paso importante hacia aplicaciones Angular más eficientes y mantenibles. Con las herramientas automatizadas que proporciona el framework, este proceso se vuelve accesible incluso para proyectos grandes y complejos. ¿Has probado ya esta migración en tus proyectos? Comparte tu experiencia en los comentarios.