30 días con RxJS — Día 1
Si estas leyendo esto, bienvenido al cassette número 1 de 30
mmmmmm… claro que no, cassettes no… es el primer de los POST, recuerden que son 30 en total y el 0 fue:
Pero ahora si, vamos a arrancar con la primera parte.
¿Qué es RxJS?
ReactiveX se definen a si mismos como:
Una API para la programación asíncrona con flujos observables
RxJS es una librería para crear programas asincrónicos y basados en eventos mediante el uso de secuencias observables. Proporciona un tipo de núcleo (core type), el “Observable”, tipos de satélites (satellite types) “Observer, Schedulers, Subjects” y operadores inspirados en Array#extras “map, filter, reduce, every, etc” para permitir el manejo de eventos asíncronos como colecciones.
Think of RxJS as Lodash for events.
Y para esto creo un set de librerías Rx* para 18 lenguajes y 3 frameworks
En nuestro caso, vamos a usar solamente la de RxJS, claro la de javascript, para ello tenemos la API y el github del proyecto, por si no lo sabias es de Open Source.
Estos son links que vamos a utilizar bastante, por lo tanto si te hiciste una carpeta para los links de interés o si estas anotando las cosas en algún lado, esto es uno de los puntos mas importantes que hay.
Bueno es hora de arrancar, en RxJS hay una serie de “conceptos esenciales” para manejar la gestión de los eventos asíncronos ( esto es muy de manual, pero si nunca vieron RXJS va a venir genial).
Observable: Representa la idea de una colección invocable de valores o eventos futuros.
Observer: Es una colección de callbacks que “sabe” escuchar los valores entregados por el Observable.
Subscription: Representa la ejecución de un Observable, es principalmente útil para cancelar la ejecución.
Operators: Son funciones puras que permiten un estilo de “programación funcional” de tratar con colecciones con operaciones como mapa, filtro, concat, flatMap, etc.
Subjects: Es el equivalente a un EventEmitter, y la única forma de multi-difundir un valor o evento a varios observers.
Schedulers: Son “despachadores centralizados” para controlar la concurrencia, lo que nos permite coordinar cuando el cálculo ocurre por ejemplo SetTimeout o requestAnimationFrame u otros.
Bueno, ahora tenemos los conceptos principales de lo que vamos a usar, para ello vamos a arrancar con un ejemplo:
En javascript para obtener el click de un boton deberiamos hacer esto:
Ahora con RxJS vamos a hacer esto:
En ambos casos tomamos el boton de la misma forma así que la linea 1 la vamos a obviar.
Vamos a entender las diferencias:
En el primer caso JS “puro” agregamos un “eventListener” por medio de la función addEventListener, y le decimos el tipo es click y que va a hacer cada vez que se ejecuta un click, por lo tanto lo que estamos haciendo es REGISTRAR un evento.
En el caso de RxJS lo que hacemos es crear un “Observable” sobre el evento click del boton.
Okey pero… ¿Qué quiere decir esto?
Rx.Observable.fromEvent(button, ‘click’)
Lo que significa es que ahora “agregamos a nuestra colección de eventos futuros” (observable) un posible evento futuro en button del tipo click .
.subscribe(() => console.log(‘Clicked!’))
Al subscribirnos estamos “ejecutando” ese evento, y también podremos cancelarlo (en un futuro).
Por lo tanto la principal diferencia en nuestro primer ejemplo es que uno genera un evento directamente (event listener) que se ejecuta y el otro (RxJS) lo que tiene es que va a agregar un “posible evento futuro” en un “array” para luego poder “subscribirse” al mismo y poder ejecutarlo.
El código de lo que vimos esta en:
Esto es todo por hoy, tenemos que asentar bien las bases para poder avanzar estables mas adelante!
Te gusto? deja un comentario, contale a tus amigos desarrolladores, seamos un montón en esta aventura de 30 días.
