JavaScript de Cero a Experto / Patrones y observables
Observer / pub-sub: constrúyelo desde cero
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.