TypeScript / Observables

Bienvenidos sean a este post, hoy veremos un concepto muy peculiar.

Una particularidad que destaca en mucho de los lenguajes pensados para trabajar sobre internet es que estos lo hacen sobre eventos. Desde javascript, jquery o node.js asi como otros lo que hacen es ejecutar determinadas secciones de su codigo en base a un evento. Estos incluyen desde trabajos en un servidor mediante el llamado de una API hasta los eventos en un navegador como pueden ser un click, pasar sobre un elemento, presionar una tecla, etc. y usualmente no tenemos un verdadero control sobre estos porque siempre dependeremos de una respuesta externa, ya sea por parte del servidor o el usuario.

Por esta razon una de las herramientas mas poderosas para manejar los eventos es Reactive Extensions For JavaScript o mas conocida como RxJs. Este se caracteriza por usar un patron de diseño GoF (Pandilla de Cuatro, por sus siglas en ingles). A este patron se lo denomina tambien como patron Observable y se basa en registrar el interes en un evento, asi como tambien cuando se dispara el evento. Asi como este patron tambien nos provee una gran cantidad de herramientas para manejar los eventos. Como el corazon de esta libreria es el concepto de Observables se tomo como costumbre denominar asi a los source streams de RxJs y que se puede hacer con ellos. Por lo tanto, cuando alguien hable sobre Observables en realidad esta refiriendose a trabajar con la libreria RxJs.

Antes de comenzar con la explicacion sobre Observables debemos instalar a la libreria y para ello debemos ejecutar el siguiente comando:

$ npm install rxjs

Un tema muy interesante que a diferencia de lo visto en este post cuando lo ejecutamos ya nos instala los archivos de declaracion por lo tanto ya tenemos un paso menos para realizar. Lo siguiente sera crear un archivo y agregaremos el siguiente codigo:

import {of, Observable} from 'rxjs';
const emisor: Observable<number> = of(1,2,3,4);

emisor.subscribe((valor: number) => {
        console.log("Valor: " + valor);
});

La primera linea sera la encargada de importar la funcion of y el tipo Observable desde la libreria rxjs. Nuestro siguiente paso sera crear un objeto del tipo Observable que manejara numeros. En este almacenaremos el resultado devuelto por la funcion of. Esta se encarga de tomar los valores y enviarlos cuando sea solicitado mientras estara esperando dentro de esta constante.

Despues utilizaremos la funcion subscribe en la constante anterior. Esta funcion se encarga de exponer a un observador para poder recibir la informacion de of. Esta siempre recibe una funcion como argumento y mediante esta procesaremos cada uno de los valores recibidos. En este caso solo los muestra en la consola pero podemos usarlo para otros temas. Si lo compilamos y ejecutamos tendremos la siguiente salida:

$ node mirar.js
Valor: 1
Valor: 2
Valor: 3
Valor: 4
$

Como pueden ver el «suscriptor» mostro cada valor recibido por el «emisor» mediante la funcion of. Tengan en cuenta que esto solo sucedera cuando utilicemos a suscribe de lo contrario quedaran retenidos en el emisor. Pero of no es la unica funcion ya que posee una compañera llamada from y esta procesara datos de tipo array. Tomemos el codigo anterior y realicemos la siguiente modificacion::

import {of, from, Observable} from 'rxjs';
const emisor: Observable<number> = from([1, 2, 3, 4]);

emisor.subscribe((valor: number) => {
        console.log("Arr: " + valor);
});

La primera modificacion fue la incorporacion de from para que sea importado. La segunda es que usamos a from en lugar de of. Lo otro es como pasamos la informacion, en este caso es un array como argumento en lugar de cada valor. El resto del codigo no sufrio modificacion dado que el suscriptor recibira cada valor informado, tal como sucedia antes, y lo mostrara en la consola. La unica pequeña modificacion es el texto antes del valor pero es opcional, lo hice por un tema estetico. Compilemos y ejecutemos para ver su salida:

$ node mirar.js
Arr: 1
Arr: 2
Arr: 3
Arr: 4
$

Como pueden observar sucedio lo que comentamos anteriormente. Esta es una opcion interesante porque muchas veces no recibiremos solo un valor sino un conjunto de ellos y poder procesarlos de esta manera nos facilitara mucho las tareas. Recuerden que deben utilizar la funcion que mas se ajuste a la necesidad del codigo. Por lo tanto, podemos decir que debemos crear un elemento considerado observable y solo cuando tengamos un observador se realizara el envio de la informacion. Esto es el concepto basico de como trabaja, en los proximos posts desarrollaremos mas sobre este tema y otros relacionados.

En resumen, hoy hemos visto una introduccion a Observables, que es, para que sirve, cual es su afinidad, como se utiliza y un ejemplo practico y sencillo para verlo en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.