JavaScript de Cero a Experto / Patrones y observables

Reto: Mi Bolsillo reactivo

Reto35 min60 XP

El examen de arquitecto: montar una mini-arquitectura donde la factory fabrica, el bus comunica y las suscripciones mantienen todo sincronizado — en tres módulos ESM separados, sin DOM y sin framework. Es la maqueta a escala de cómo se organizan las apps grandes; cuando veas RxJS o Zustand, vas a reconocer cada pieza.

Reto

Mi Bolsillo reactivo

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

Tres archivos (bus.js, bolsillo.js, index.js) que al correr producen EXACTAMENTE esto:

terminal

[total] $ 18.000

[total] $ 43.000

[alerta] Gasto fuerte: Cine ($ 25.000)

— alerta desuscrita —

[total] $ 135.000

Rechazado: El valor debe ser positivo

[total final] $ 135.000

Requisitos:

bus.js exporta tu crearBus() de la lección 4: Map de tema → lista, publicar(tema, datos), y suscribir(tema, reaccion) que DEVUELVE el comprobante de desuscripción.
bolsillo.js exporta la factory crearBolsillo(bus): movimientos PRIVADOS por closure, getter total (con reduce), y agregar(nombre, valor) que valida (valor > 0 o throw), guarda, y PUBLICA en el bus el tema "gasto" con { nombre, valor, total } — el total ya calculado viaja en el aviso.
index.js arma la app: crea el bus, crea el bolsillo (inyectándole el bus — nota el diseño: el bolsillo no crea su bus, lo RECIBE), y suscribe DOS observadores al tema "gasto": [total] (imprime el total formateado con Intl es-CO) y [alerta] (solo si valor > 20000, guardando su comprobante).
El guion: agrega Almuerzo 18000 y Cine 25000; desuscribe la alerta e imprime la línea de despedida; agrega Mercado 92000 (total avisa, alerta calla); intenta agregar ("Fantasma", -50) atrapando el error; cierra leyendo bolsillo.total directo.
El formateador Intl se crea UNA vez en index.js.

Reglas

Tres archivos con import/export — nada de todo-en-uno.
El bolsillo NO conoce a sus observadores (solo publica); los observadores NO conocen al bolsillo (solo escuchan el bus).
Movimientos privados de verdad: por closure, sin exponer el array.
Cero variables globales compartidas entre módulos que no sean los imports.

30:00

Cuando estés listo, arranca el reloj.

Las tres decisiones de arquitectura que este reto ensaya:

Inyección de dependencias (sin decir el nombre). crearBolsillo RECIBE el bus en vez de crearlo o importarlo: el bolsillo no sabe qué bus es ni quién escucha — mañana le inyectas un bus de mentiras en un test (módulo 16) y lo pruebas aislado. Recibir dependencias > buscarlas.
El aviso viaja completo. Publicar { nombre, valor, total } — con el total YA calculado — libera a los observadores de conocer el bolsillo para calcular nada: reaccionan solo con lo que llega. Avisos autosuficientes = observadores desacoplados de verdad.
Publicar es lo último. Validar → guardar → publicar: un aviso jamás miente, porque solo sale cuando el cambio ya es un hecho. El gasto rechazado ni se guarda ni se anuncia.

Autoevaluación de arquitecto: ¿tu salida calza línea por línea (incluido que el Fantasma NO produjo línea de [total])? ¿el bolsillo funciona igual si le inyectas otro bus? ¿los observadores calculan algo, o solo usan lo que el aviso trae? ¿borrar la línea soltarAlerta() hace que Mercado alerte (compruébalo y devuélvela)? Si todo es sí: acabas de diseñar con los mismos principios — inyección, encapsulación, pub-sub, avisos autosuficientes — que sostienen las codebases que vas a habitar el resto de tu carrera.

Qué sigue

Módulo 13 cerrado: piensas en patrones. El módulo 14 te devuelve al navegador con su caja de APIs modernas — y abre con la que "Mi Bolsillo" lleva pidiendo desde el módulo 8: localStorage, para que los datos POR FIN sobrevivan a la recarga. Además: observers del DOM, hilos aparte con Web Workers, portapapeles, ubicación y el cuaderno de rutas de las SPAs.