Curso Básico de RxJS con Vanilla JavaScript

1. Introduccion a la Programacion Reactiva

La programacion reactiva es una forma de trabajar con flujos de datos que cambian con el tiempo.

• Un click del mouse es un evento.
• Lo que escribes en un input es un evento.
• Una respuesta HTTP es un evento asincrono.

En lugar de preguntar "si ya llego algo", reaccionas cuando el dato llega.

2. Que es RxJS

RxJS es una libreria de JavaScript para componer programas asincronos y basados en eventos usando Observables.

npm install rxjs

<script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.min.js"></script>

3. Observables

Un Observable es una fuente de datos que puede emitir 0, 1 o muchos valores en el tiempo.

const { of, from, interval } = rxjs;

of(1, 2, 3).subscribe(console.log); // 1, 2, 3
from(["A", "B"]).subscribe(console.log); // A, B

const { fromEvent } = rxjs;
const button = document.getElementById("btn");

const click$ = fromEvent(button, "click");
const sub = click$.subscribe(() => console.log("click"));

const { interval } = rxjs;

const sub = interval(1000).subscribe(v => console.log("tick", v));
setTimeout(() => sub.unsubscribe(), 5000);

4. Operadores Basicos

Un operador es una funcion que transforma o filtra valores del Observable.

const { of } = rxjs;
const { map, filter, take } = rxjs.operators;

of(1, 2, 3, 4, 5)
	.pipe(
		filter(n => n % 2 === 1),
		map(n => n * 10),
		take(2)
	)
	.subscribe(console.log); // 10, 30

5. Manejo de Eventos del DOM

const { fromEvent } = rxjs;

const btn = document.getElementById("btn");
const output = document.getElementById("output");
let count = 0;

fromEvent(btn, "click").subscribe(() => {
	count += 1;
	output.textContent = `Clicks: ${count}`;
});

const { fromEvent } = rxjs;
const { map, debounceTime } = rxjs.operators;

const input = document.getElementById("search");

fromEvent(input, "input")
	.pipe(
		map(e => e.target.value.trim()),
		debounceTime(300)
	)
	.subscribe(term => console.log("Buscar:", term));

6. Manejo de Asincronia

const { ajax } = rxjs.ajax;

ajax
	.getJSON("https://jsonplaceholder.typicode.com/users")
	.subscribe({
		next: data => console.log("Usuarios:", data),
		error: err => console.error("Error HTTP:", err),
		complete: () => console.log("Completado")
	});

7. Manejo de Errores y Finalizacion

const { of } = rxjs;
const { catchError, retry } = rxjs.operators;
const { ajax } = rxjs.ajax;

ajax
	.getJSON("https://api.example.com/data")
	.pipe(
		retry(2),
		catchError(err => {
			console.error("Fallo:", err);
			return of([]);
		})
	)
	.subscribe({
		next: data => console.log(data),
		complete: () => console.log("Finalizado")
	});

Puntos clave:

• catchError: recupera o transforma errores.
• retry: reintenta en caso de fallo.
• complete: avisa que el flujo termino correctamente.
• unsubscribe: corta manualmente un flujo activo.

8. Buenas Practicas y Recursos

• Limpia suscripciones en flujos infinitos (interval, fromEvent).
• Encadena operadores con pipe para mantener legibilidad.
• Evita logica pesada dentro de subscribe.
• Usa tap para debugging cuando necesites inspeccionar valores.

9. Proyecto Final (Propuesta)

Mini app de busqueda en vivo:

1. Input de texto.
2. Escuchar con fromEvent.
3. Aplicar map + debounceTime.
4. Hacer peticion HTTP con ajax.getJSON.
5. Mostrar resultados en pantalla.
6. Manejar error con catchError.

Con este proyecto practicas todo el curso en un solo flujo real.

10. Recursos y Siguientes Pasos

Documentacion oficial:

• Overview
• Installation
• Importing
• Operators
• fromEvent
• ajax
• catchError
• retry

Ejercicios recomendados:

1. Cronometro con interval.
2. Contador con botones + y -.
3. Busqueda en vivo con API publica.
4. Reintentos de peticion con retry.

Siguiente paso sugerido:

• Curso intermedio: switchMap, mergeMap, Subjects y manejo avanzado de streams.