¡Hola, developers! 👋 ¿Recuerdas la última vez que debugueaste una cadena compleja de RxJS con múltiples suscripciones, async pipes por todos lados, y ese memory leak que no podías rastrear? ¿O cuando tuviste que explicarle a un desarrollador junior por qué necesita hacer unsubscribe de los observables? Hoy, quiero compartir Angular Signals - un nuevo primitivo reactivo que cambia fundamentalmente cómo manejamos el estado en aplicaciones Angular. Al final de este artículo, entenderás cómo aprovechar signals para tener programación reactiva más limpia y performante sin la sobrecarga tradicional de RxJS. ## ¿Qué son los Angular Signals? Piensa en signals como "variables inteligentes" que automáticamente rastrean cuándo son leídas y notifican cuando cambian. Son como un rastreador GPS para tus datos - siempre sabiendo quién está observando y actualizando eficientemente solo lo que necesita cambiar. Angular Signals resuelven el problema fundamental de la reactividad granular: saber exactamente qué cambió y actualizar solo las partes afectadas de tu UI, sin gestión manual de suscripciones o preocupaciones con change detection. ## ¿Cuándo Deberías Usar Angular Signals? **Buenos casos de uso:** - Gestión de estado de componentes que necesita actualizaciones reactivas - Valores computados derivados de otras fuentes reactivas - Estado y lógica de validación de formularios - Estado compartido entre componentes sin servicios - Actualizaciones de UI críticas para performance con change detection mínimo **Cuándo NO usar Signals:** - Peticiones HTTP y operaciones asíncronas (continúa con Observables) - Streams de eventos complejos que necesitan operators como debounce, throttle - Integración con codebases pesadas en RxJS (usa interop con cuidado) ## Signals: Tu Primera Implementación Construyamos un ejemplo práctico: un contador de productos con cálculo de precio en tiempo real que demuestra los conceptos principales de signals. ### Paso 1: Creando Tu Primer Signal ```javascript import { Component, signal } from '@angular/core'; @Component({ selector: 'app-producto', template: `

Producto: {{ nombreProducto() }}

Cantidad: {{ cantidad() }}

` }) export class ProductoComponent { // Creando signals escribibles nombreProducto = signal('Libro Angular'); cantidad = signal(0); incrementar() { // Actualizando valor del signal this.cantidad.set(this.cantidad() + 1); } } ``` Este código crea dos signals - nota cómo los llamamos como funciones en el template. Los signals son funciones que retornan su valor actual cuando son llamadas. ### Paso 2: Trabajando con Computed Signals ```javascript import { Component, signal, computed } from '@angular/core'; @Component({ selector: 'app-producto', template: `

Cantidad: {{ cantidad() }}

Precio unitario: ${{ precioUnitario() }}

Total: ${{ precioTotal() }}

` }) export class ProductoComponent { cantidad = signal(1); precioUnitario = signal(29.99); // Computed signal actualiza automáticamente cuando las dependencias cambian precioTotal = computed(() => { return this.cantidad() * this.precioUnitario(); }); incrementar() { this.cantidad.update(c => c + 1); } } ``` Los computed signals recalculan automáticamente cuando sus dependencias cambian. Sin suscripciones, sin actualizaciones manuales - simplemente funciona. ### Paso 3: Signal Effects para Side Effects ```javascript import { Component, signal, computed, effect } from '@angular/core'; @Component({ selector: 'app-producto' }) export class ProductoComponent { cantidad = signal(0); inventario = signal(10); constructor() { // Effect ejecuta cuando los signals que lee cambian effect(() => { if (this.cantidad() > this.inventario()) { console.log('¡Advertencia: La cantidad excede el inventario!'); this.mostrarAdvertenciaInventario = true; } }); } agregarAlCarrito() { if (this.cantidad() < this.inventario()) { this.cantidad.update(c => c + 1); } } } ``` Los effects rastrean automáticamente las dependencias de signals y se re-ejecutan cuando esos signals cambian - perfecto para logging, analytics, o manipulaciones del DOM. ## Un Ejemplo Más Complejo: Carrito de Compras con Filtros Construyamos algo más realista - un carrito de compras con filtrado y cálculos en tiempo real: ```javascript import { Component, signal, computed } from '@angular/core'; interface Producto { id: number; nombre: string; precio: number; categoria: string; enStock: boolean; } @Component({ selector: 'app-carrito-compras', template: `

${{ producto.precio }}

Items en el carrito: {{ itemsCarrito().length }}

Total: ${{ totalCarrito() }}

Con impuesto (10%): ${{ totalConImpuesto() }}

` }) export class CarritoComprasComponent { // Signals de estado productos = signal([ { id: 1, nombre: 'Portátil', precio: 999, categoria: 'Electrónica', enStock: true }, { id: 2, nombre: 'Ratón', precio: 29, categoria: 'Electrónica', enStock: true }, { id: 3, nombre: 'Escritorio', precio: 299, categoria: 'Muebles', enStock: false }, { id: 4, nombre: 'Silla', precio: 199, categoria: 'Muebles', enStock: true } ]); itemsCarrito = signal([]); terminoBusqueda = signal(''); categoriaSeleccionada = signal('todas'); // Computed signals para estado derivado categorias = computed(() => { const cats = new Set(this.productos().map(p => p.categoria)); return Array.from(cats); }); productosFiltrados = computed(() => { const termino = this.terminoBusqueda().toLowerCase(); const categoria = this.categoriaSeleccionada(); return this.productos().filter(producto => { const coincideBusqueda = producto.nombre.toLowerCase().includes(termino); const coincideCategoria = categoria === 'todas' || producto.categoria === categoria; return coincideBusqueda && coincideCategoria; }); }); totalCarrito = computed(() => { return this.itemsCarrito().reduce((suma, item) => suma + item.precio, 0); }); totalConImpuesto = computed(() => { return this.totalCarrito() * 1.1; // 10% impuesto }); agregarAlCarrito(producto: Producto) { this.itemsCarrito.update(items => [...items, producto]); } } ``` Este ejemplo muestra cómo los signals manejan elegantemente relaciones reactivas complejas sin gestión manual de suscripciones. ## Patrón Avanzado: Validación de Formulario Basada en Signals Construyamos algo aún más sofisticado - un formulario reactivo con validación en tiempo real usando signals: ```javascript import { Component, signal, computed, effect } from '@angular/core'; interface ErroresFormulario { email?: string; contrasena?: string; confirmarContrasena?: string; } @Component({ selector: 'app-formulario-registro', template: ` ` }) export class FormularioRegistroComponent { // Signals de campos del formulario email = signal(''); contrasena = signal(''); confirmarContrasena = signal(''); camposTocados = signal>(new Set()); // Reglas de validación como computed signals errores = computed(() => { const errores: ErroresFormulario = {}; const tocados = this.camposTocados(); // Validación de email if (tocados.has('email')) { const valorEmail = this.email(); if (!valorEmail) { errores.email = 'El email es obligatorio'; } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(valorEmail)) { errores.email = 'Formato de email inválido'; } } // Validación de contraseña if (tocados.has('contrasena')) { const pwd = this.contrasena(); if (!pwd) { errores.contrasena = 'La contraseña es obligatoria'; } else if (pwd.length < 8) { errores.contrasena = 'La contraseña debe tener al menos 8 caracteres'; } } // Validación de confirmación de contraseña if (tocados.has('confirmarContrasena')) { if (this.contrasena() !== this.confirmarContrasena()) { errores.confirmarContrasena = 'Las contraseñas no coinciden'; } } return errores; }); fuerzaContrasena = computed(() => { const pwd = this.contrasena(); if (pwd.length < 6) return 'Débil'; if (pwd.length < 10) return 'Media'; if (/[A-Z]/.test(pwd) && /[0-9]/.test(pwd) && /[^A-Za-z0-9]/.test(pwd)) { return 'Fuerte'; } return 'Media'; }); formularioValido = computed(() => { return this.email() && this.contrasena() && this.confirmarContrasena() && Object.keys(this.errores()).length === 0; }); constructor() { // Auto-guardar borrador en localStorage effect(() => { const borrador = { email: this.email(), timestamp: Date.now() }; localStorage.setItem('borradorRegistro', JSON.stringify(borrador)); }); } marcarComoTocado(campo: string) { this.camposTocados.update(campos => { campos.add(campo); return new Set(campos); }); } enviarFormulario(event: Event) { event.preventDefault(); if (this.formularioValido()) { console.log('Formulario enviado:', { email: this.email(), contrasena: this.contrasena() }); } } } ``` Esto demuestra cómo los signals pueden reemplazar librerías de formularios complejas con lógica de validación simple y reactiva. ## Angular Signals con TypeScript Para usuarios de TypeScript, aquí está cómo hacer tus implementaciones de signal type-safe: ```typescript // tipos.ts interface Usuario { id: number; nombre: string; email: string; rol: 'admin' | 'usuario' | 'invitado'; } interface EstadoApp { usuarioActual: Usuario | null; estaAutenticado: boolean; permisos: string[]; } // signal-store.service.ts import { Injectable, signal, computed, Signal } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class SignalStore { // Signals escribibles con tipos explícitos private _usuarioActual = signal(null); private _estaCargando = signal(false); // Computed signals de solo lectura readonly usuarioActual: Signal = this._usuarioActual.asReadonly(); readonly estaAutenticado = computed(() => !!this._usuarioActual()); readonly permisos = computed(() => { const usuario = this._usuarioActual(); if (!usuario) return []; switch(usuario.rol) { case 'admin': return ['leer', 'escribir', 'eliminar', 'admin']; case 'usuario': return ['leer', 'escribir']; case 'invitado': return ['leer']; } }); // Métodos de actualización type-safe login(usuario: Usuario): void { this._usuarioActual.set(usuario); } actualizarUsuario(actualizaciones: Partial): void { this._usuarioActual.update(actual => actual ? { ...actual, ...actualizaciones } : null ); } } // Uso con TypeScript @Component({ selector: 'app-perfil', template: `

Rol: {{ usuario.rol }}

{{ perm }}

` }) export class PerfilComponent { constructor(public store: SignalStore) {} } ``` ## Patrones Avanzados y Mejores Prácticas ### 1. Patrón de Composición de Signals Crea signals de orden superior que combinan múltiples fuentes de signals: ```javascript // Componer múltiples signals en un único estado reactivo function crearListaPaginada(items: Signal, tamañoPagina: number) { const paginaActual = signal(0); const totalPaginas = computed(() => Math.ceil(items().length / tamañoPagina) ); const itemsPaginados = computed(() => { const inicio = paginaActual() * tamañoPagina; return items().slice(inicio, inicio + tamañoPagina); }); return { items: itemsPaginados, paginaActual: paginaActual.asReadonly(), totalPaginas, siguientePagina: () => paginaActual.update(p => Math.min(p + 1, totalPaginas() - 1)), paginaAnterior: () => paginaActual.update(p => Math.max(p - 1, 0)) }; } ``` ### 2. Patrón de Memoización de Signals Optimiza cálculos costosos con signals memoizados: ```javascript // Memoizar operaciones costosas function crearSignalMemoizado( fuente: Signal, calcular: (valor: T) => R, igualdad?: (a: R, b: R) => boolean ) { let ultimaEntrada: T | undefined; let ultimaSalida: R | undefined; return computed(() => { const actual = fuente(); if (ultimaEntrada === actual && ultimaSalida !== undefined) { return ultimaSalida; } ultimaEntrada = actual; ultimaSalida = calcular(actual); return ultimaSalida; }, { equal: igualdad }); } ``` ### 3. Patrón de Debouncing de Signals Implementa signals con debounce para búsqueda y manejo de inputs: ```javascript // Signal con debounce para inputs de búsqueda function crearSignalConDebounce(valorInicial: T, retraso: number) { const inmediato = signal(valorInicial); const conDebounce = signal(valorInicial); let timeoutId: any; const definir = (valor: T) => { inmediato.set(valor); clearTimeout(timeoutId); timeoutId = setTimeout(() => { conDebounce.set(valor); }, retraso); }; return { inmediato: inmediato.asReadonly(), conDebounce: conDebounce.asReadonly(), definir }; } // Uso const busqueda = crearSignalConDebounce('', 300); // busqueda.inmediato() - valor instantáneo // busqueda.conDebounce() - valor con debounce para llamadas API ``` ### 4. Patrón de Máquina de Estados con Signals Construye máquinas de estados robustas con signals: ```javascript // Máquina de estados usando signals function crearMaquinaDeEstados( estadoInicial: T, transiciones: Record ) { const estadoActual = signal(estadoInicial); const puedeTransicionarA = computed(() => { return transiciones[estadoActual()] || []; }); const transicionarA = (nuevoEstado: T) => { if (puedeTransicionarA().includes(nuevoEstado)) { estadoActual.set(nuevoEstado); return true; } return false; }; return { estado: estadoActual.asReadonly(), puedeTransicionarA, transicionarA }; } ``` ## Errores Comunes a Evitar ### 1. Mutar Objetos Dentro de Signals ```javascript // ❌ No hagas esto - mutar objeto no dispara actualizaciones const usuario = signal({ nombre: 'Juan', edad: 30 }); usuario().nombre = 'María'; // ¡Esto no disparará change detection! // ✅ Haz esto en su lugar - crea nueva referencia de objeto usuario.update(u => ({ ...u, nombre: 'María' })); // O usuario.set({ ...usuario(), nombre: 'María' }); ``` ### 2. Crear Signals Dentro de Computed ```javascript // ❌ Ejemplo problemático - crea nuevo signal en cada cálculo const computedMalo = computed(() => { const signalTemp = signal(0); // ¡No crees signals aquí! return signalTemp() + otroSignal(); }); // ✅ Solución - crea signals fuera de computed const signalTemp = signal(0); const computedBueno = computed(() => { return signalTemp() + otroSignal(); }); ``` ### 3. Olvidar Llamar Funciones Signal ```javascript // ❌ Evita este patrón - olvidando paréntesis @Component({ template: `

` // ¡No se actualizará! }) export class ComponenteMalo { contador = signal(0); } // ✅ Enfoque preferido - siempre llama signals como funciones @Component({ template: `

` // Propiamente reactivo }) export class ComponenteBueno { contador = signal(0); } ``` ## Cuándo NO Usar Signals No uses signals cuando: - Trabajando con peticiones HTTP - Los Observables manejan mejor las operaciones asíncronas - Necesites operators de stream complejos (debounce, throttle, retry) - RxJS es más poderoso - Integrando con APIs existentes basadas en Observable - sobrecarga de conversión innecesaria ```javascript // ❌ Exageración para escenarios simples const resultadoHttp = signal(null); this.http.get('/api/datos').subscribe(datos => { resultadoHttp.set(datos); // Conversión innecesaria }); // ✅ Solución simple es mejor datos$ = this.http.get('/api/datos'); // Usa async pipe en el template ``` ## Signals vs RxJS Observables **Los Signals son geniales para:** - Gestión de estado síncrono - Valores computados simples - Actualizaciones de UI críticas para performance - Reducir código boilerplate **Considera Observables cuando necesites:** - Operaciones asíncronas → Peticiones HTTP, streams WebSocket - Operators complejos → debounceTime, switchMap, retry - Streams de eventos → fromEvent, interval, timer ## Conclusión Angular Signals son una herramienta poderosa que puede simplificar dramáticamente la gestión de estado en tus aplicaciones. Traen reactividad granular, rastreo automático de dependencias, y mejor rendimiento a tus componentes Angular. **Puntos clave:** - Los signals son funciones que mantienen y rastrean valores reactivos - Los computed signals derivan automáticamente estado de otros signals - Los effects manejan side effects con rastreo automático de dependencias - Los signals eliminan la gestión manual de suscripciones y memory leaks La próxima vez que vayas a usar un Subject o BehaviorSubject para estado de componente, recuerda los signals. Tu código será más limpio, más performante, y más fácil de entender. ¿Ya has empezado a usar signals en tus proyectos Angular? ¿Qué patrones has descubierto? ¡Comparte tus experiencias en los comentarios! --- *Si esto te ayudó a mejorar tus habilidades en Angular, ¡sígueme para más patrones y mejores prácticas modernas de Angular! 🚀* ## Recursos - [Documentación Oficial de Angular Signals](https://angular.dev/guide/signals) - [Especificación de la Propuesta TC39 Signals](https://github.com/tc39/proposal-signals) - [Angular RFC: Sub-RFC 4: Componentes Basados en Signal](https://github.com/angular/angular/discussions/49685) --- ### ☕ Apoya Contenido Técnico Gratuito Si este artículo te ayudó a entender Angular Signals o te ahorró tiempo de debugging, ¡considera apoyarme con un café! **[☕ Invítame un café](https://buymeacoffee.com/blueprintdev)** *¡100% del apoyo va para más artículos técnicos gratuitos para la comunidad dev hispanohablante!* 🚀

Producto: {{ nombreProducto() }}

{{ producto.nombre }}

{{ usuario.nombre }}

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Guía de Angular Signals que Transformará tu Programación Reactiva