May 31, 2021 6 min to read

RxJS!

RxJS

Buenasss como andann?? En el post de hoy quiero que empecemos a ver y compartir conceptos a full sobre esta librería.

Creo que este post será el primero de algunos mas seguramente.. y si! RxJS es digno y merecedor de un buen espacio, ya que creo es un tema que mas de una vez nos ha dado ganas de llorar.

Bueno y si, eran necesarios los 2 memes, sufrimos mucho! En fin, te lo explico en criollo, algo asi como una version de “te lo resumo asi nomas” pero para codear? Y… ojala que si, seguire insistiendo en posts super cortos que den ganas de leer. La guía oficial de RxJS aquí. Bueno ahi vamos!

Que és?

Es una librería de programacion reactiva para JS, en criollo, todo lo que hemos hecho desde siempre para trabajar con asincronía (datos futuros, que aun no existen) ha sido un quilombo barbaro para manejar en nuestras apps (promises y entre otros manejes), y esto vendria para salvarnos. Asi que no importa en que framework estas desarrollando no hay excusasssss! No te voy a mentir, hay mucho material dando vueltas y es justamente por esta locurita que provoca. Asi que vamos a tratar de ganar la batalla.

Introducción

Imaginemos que tenemos mucha info que debemos procesar y mostrar en nuestra app, una colección (un array ponele), lo procesamos un poquito para mostrarlo en algun HTML y listo. Si estamos hablando de algo síncrono, onda algo asi en nuestro codigo del front:

    const array = [
        {name: 'sol', lastName: 'lopez'},
        {name: 'dario', lastName: 'barassi'}
    ]

no tenemos problemas, porque tenemos esta coleccion estatica y siempre disponible en nuestra app para tener un h1 con el nombre del mejor

AHORA el tema es cuando hablamos de asincronía, y es cuando, por ejemplo, hacemos uso de algun servicio externo que nos tiene que traer info y nosotros tenemos que esperar esa info para procesarla y mostrarla en algun lado de nuestra app.

Eso es justamente el trabajo que viene a resolver nuestro amiguito RxJS. De hecho, si queremos darle cierta forma a nuestro sync o array estatico que hariamos? usariamos algun operador (del mismisimo Array.prototype) algun map, filter, reduce bla bla…….

BUENO, exactamente eso tambien viene a resolver esta lib. Vamos a poder usar muchisimos operadores, incluso map, filter, reduce para estos arrays asíncronos/arrays futuros que todavia no existen.

A ese flujo de datos y colecciones futuras le llamamos streaming, como si fuera Netflix, van a ir llegando datos en diferentes momentos y a distintos ritmos, de hecho hasta vamos a desconocer la cantidad de ellos y nuestra app deberá saber como gestionar y manejar esos datos cuando arriben a nuestra app. Y de hecho, esta manera de representar esos streamings es mediante canicas (marble). Pero tranqui, eso lo vamos a ver despues.

Para instalar la lib es super facil, los pasos aquí

Observable

Ahora bien, con esta mini intro en mente, tenemos que empezar a hablar de observables y otros conceptos relacionados, para entender como nos vamos a manejar con estos datos futuros asíncronos.

El observable entonces representa la idea de una coleccion de datos/valores/eventos futuros como quieras llamarle, que puede ser invocada.

Como toda funcion, por si sola no hace nada si no la invocas, asi que si no te suscribís al observable, nada pasará!

Vos tambien podes CREAR observables, es decir, “datos futuros” para procesarlos y manipularlos. Si seguimos el ejemplo anterior, teniendo un array con nombres y apellidos, si usamos el operador from o el operador of creamos nuestro observable y luego nos subscribimos para ver nuestros datos:

    import { from } from  'rxjs';

    import { of } from  'rxjs';

    const  observable = from([{name:  'sol', lastName:  'lopez'}, {name:  'dario', lastName:  'barassi'}]);

    const  subscribe = observable.subscribe(val  =>  console.log(val));

    const  observable2 = of([{name:  'sol', lastName:  'lopez'}, {name:  'dario', lastName:  'barassi'}]);

    const  subscribe2 = observable.subscribe(val  =>  console.log(val));

Ya con eso estariamos usando nuestros primeros operadores que nos entrega esta librería (de tipo Creation, porque estamos creando el observable). Por supuesto que hay varios operadores mas, de este tipo y tambien de otras categorías que vamos a empezar a ver en los proximos posts.

Observer y Suscription

Subscription nos indica la ejecución de un observable. Como dijimos recien, los observables son lazy, si tremendos vagos!!!! asi que si no nos suscribimos a ellos, olvidate, no emiten ni un sandwich.

Observer es un objeto que reacciona a los valores entregados por el observable.

Para que nos quede claro, todo se resume en:

    interface Observable {
      subscribe(observer: Observer): Subscription
    }

    interface Observer {
      next(v: any): void;
      error(e: Error): void;
      complete(): void;
    }

    interface Subscription {
      unsubscribe(): void;
    }

Operadores

Como veniamos hablando antes el operador of, el from, y vamos a tener unos cuaaaantos mas que vamos a ver aquiiii, pero qué es??? Bueno como todo en JS, es una función si, que toma un observable como entrada y genera otro observable como salida.

Clasificación: creacionales, de transformación, de filtrado, condicionales, de combinación, multidifusión, manejo de errores y de utilidad. (sip, en el proximos posts vamos a ver estos loquillossss)