La programación reactiva en JavaScript te permite que la interfaz responda sola a los cambios, sin que tengas que llamar funciones manualmente. Aquí entra el observer pattern, un patrón clave para construir filtros que se actualizan en tiempo real y mantener tu código limpio y declarativo.

Si vienes de escribir código imperativo, donde cada instrucción la pones a mano, este enfoque te va a cambiar la forma de pensar. En lugar de decirle a tu app qué hacer y cuándo, le dices a qué reaccionar.

¿Qué diferencia hay entre programación imperativa y declarativa?

La imperativa es casi manual: lees, iteras y llamas funciones una por una. La declarativa, en cambio, se apoya en patrones que describen el comportamiento esperado. En el mundo profesional la segunda gana, porque es más fácil de mantener y escala mejor.

¿Qué es la programación reactiva? Es un estilo donde tu código reacciona automáticamente a cambios en los datos. En vez de ejecutar funciones manualmente tras un evento, defines suscriptores que se notifican solos cuando algo cambia.

Cuando aplicas reactividad a un filtro, ya no metes la función de render dentro del click. En su lugar, escuchas cambios en el estado del filtro, reaccionas y renderizas. Ese es el corazón del patrón que vas a implementar.

¿Cómo funciona el observer pattern paso a paso?

El recurso patterns.dev explica este patrón con video y ejemplos visuales, y conviene que lo revises [03:12]. La idea base es simple: tienes un objeto observable que mantiene una lista de suscriptores y los notifica cuando algo cambia.

La estructura mínima del patrón incluye cuatro piezas:

• Un array privado de observers que guarda las funciones suscritas.
• Un método subscribe que recibe una función y la agrega al array con push.
• Un método unsubscribe que elimina esa función usando filter para evitar mutaciones.
• Un método notify que itera los observers y ejecuta cada función con los datos actualizados.

Fíjate en un detalle importante: para desuscribir no se usa splice, se usa filter. Esto crea un nuevo array en lugar de mutar el original, manteniendo la inmutabilidad de la que ya hemos hablado.

¿Cómo se implementa el patrón en una clase de filtros?

La idea es montar una clase FilterState que administre el estado de los filtros y, encima, exponga el patrón observable. En este caso vas a manejar cuatro estados: la frequency, el status, el mínimo de cuántos lleva seguidos y un search para búsquedas en texto [05:48].

La clase incluye métodos básicos de programación orientada a objetos:

• Devolver el estado actual de los filtros.
• Modificar un filtro puntual.
• Actualizar todo el estado usando spread operator.
• Hacer un reset para volver a los valores iniciales.

Encima de eso, sumas el patrón observable. Cuando alguien llama a notify, todos los suscriptores reciben el estado de filtros y se ejecutan en cadena. Ya no necesitas acoplar el render al evento click.

¿Por qué importa el observer pattern en frontend moderno?

Este patrón aparece por todas partes cuando trabajas con frontend, sobre todo si manejas reactividad o flujos de datos en tiempo real. Chats, streaming, notificaciones push, dashboards en vivo: todo eso se apoya en variantes de observables.

¿JavaScript tiene observables nativos? Sí. La propuesta de Observable dentro de ECMAScript ya permite implementar este patrón sin construirlo a mano, aunque entender cómo se arma desde cero te da contexto para usarlo bien.

Un caso famoso es RxJS, una librería que lleva la programación reactiva a otro nivel y existe también para Java y Go. Netflix la usa intensamente para procesar streaming de video en tiempo real, tanto en backend como en el navegador.

¿Cuándo conviene usar este patrón?

No todo proyecto necesita observables. Pero hay escenarios donde brillan:

• Filtros que actualizan listas de forma reactiva.
• Aplicaciones con datos en tiempo real como chats o feeds.
• Streaming de datos donde el flujo nunca se detiene.
• Estados compartidos entre múltiples componentes que deben sincronizarse.

Lo interesante es que, aunque suena avanzado, por dentro sigues usando métodos convencionales de arrays como push y filter. Lo que cambia es la forma de orquestarlos para construir un patrón más potente.

Una vez tienes la carcasa del observable montada en tu clase de filtros, el siguiente paso es conectar el subscribe con el render real y ver la reactividad funcionando. ¿Ya intentaste implementar este patrón en alguno de tus proyectos? Cuéntame en los comentarios cómo te fue.