CodeForge

JavaScript de Cero a Experto / Patrones y observables

Observer / pub-sub: constrúyelo desde cero

Teoría22 min20 XP

Esta es la lección que el blueprint marca en negrilla, y con razón: el patrón observer (o pub-sub) es la base de RxJS, de los signals de Angular, del sistema de eventos de Node y de medio ecosistema. En el módulo 8 lo USASTE con CustomEvent; hoy lo CONSTRUYES desde cero en 20 líneas — y cuando lo veas vestido de framework, reconocerás al viejo amigo.

El tablero de anuncios con lista de interesados

Las 20 líneas que mueven el ecosistema

Recorre las piezas y nota que TODO es curso viejo: una factory con estado privado (lección 3), un Map de tema → lista (módulo 5), funciones como valores (módulo 3), y el comprobante de desuscripción — un closure que recuerda exactamente a quién borrar. Ese comprobante es la firma del código profesional: toda suscripción debe poder deshacerse (¿reconoces la idea? removeEventListener, AbortController… el módulo 8 entero).

Ya lo conocías, ya lo vas a reconocer

Hacia atrás: tu CustomEvent + dispatchEvent del módulo 8 era este patrón, implementado por el navegador con el DOM como bus. El de hoy no necesita DOM: funciona en Node, en un worker, en un juego — donde sea.

Hacia adelante: cuando en Angular veas un Observable con .subscribe() que devuelve una Subscription con .unsubscribe() — son tus 20 líneas con superpoderes (operadores, flujos, cancelación). Cuando veas signals o el subscribe de un store de Zustand — el mismo tablero de anuncios. La industria envolvió este patrón mil veces porque resuelve EL problema del software con interfaces: "algo pasó allá y varias cosas deben enterarse acá, sin acoplarse".

Nota honesta de diseño: el pub-sub desacopla tanto que puede desorientar — si TODO se comunica por bus, seguir el flujo de un dato es perseguir fantasmas ("¿quién publica esto? ¿quién escucha?"). Úsalo para comunicaciones de VERDAD desacopladas (módulos lejanos, plugins, notificaciones); para llamar a tu vecino de archivo, una función normal es más clara.

Tu suscribir guarda la reacción pero devuelve undefined. Un panel se monta y desmonta 50 veces, suscribiéndose cada vez. ¿Qué pasa y qué faltó?

Mini-reto

Extiende tu bus con dos poderes de las librerías reales: 1) unaVez(tema, reaccion) — se ejecuta a la primera publicación y se desuscribe sola (pista: suscribe una envoltura que llama y usa su propio comprobante… la mochila lo permite); 2) haz que publicar devuelva cuántos suscriptores fueron avisados. Prueba ambos con el tema "gasto" y confirma que unaVez no reacciona a la segunda publicación.

Qué sigue

Tu bus transmite EVENTOS: cosas que pasan y vuelan. El siguiente paso de la industria fue aplicar el mismo patrón a un VALOR que cambia con el tiempo — "el total ES 48.800, y avísame cuando sea otro". Eso es un store observable (el abuelo directo de los signals), y lo construyes en la próxima lección sobre el bus de hoy.