En este artículo vamos a comenzar una nueva etapa en nuestro conocimiento de Angular, dedicando tiempo para una primera aproximación a los "observables", que son una de las principales novedades del framework a partir de Angular 2. Los observables representan también una de las mejores formas de optimizar una aplicación, aumentando su rendimiento.

En Angular se usan mucho los observables, dada su utilidad y versatilidad, aunque hemos de admitir que no es una tarea sencilla de aprender inicialmente. Intentaremos acercártelos de una manera sencilla, para que los puedas ir digiriendo poco a poco y suavizar su curva de aprendizaje. De momento, en este artículo del Manual de Angular, nuestro objetivo es ofrecer una introducción general, para que comiences a conocerlos, así como el concepto de programación reactiva.

El "por qué" de los observables

Hemos dicho que los observables son una de las principales herramientas para programar aplicaciones de mayor rendimiento. Obviamente ese es el motivo por el cuál se usan en Angular. Pero, ¿dónde reside esa mejora de rendimiento?

Uno de los motivos por los que Angular (y en especial su predecesor AngularJS) se convirtió en un framework tan usado es su capacidad de proporcionar una actualización automática de las fuentes de información. Es decir, en Angular somos capaces de usar un almacén de datos y, cuando se modifica ese almacén, recibir automáticamente sus cambios, sin que tengamos que programar a mano ese tránsito de la información.

Incluso, aunque un componente sea el encargado de actualizar ese almacén de datos, hemos visto que, usando servicios, podemos conseguir que otros componentes reciban automáticamente las actualizaciones. Si no lo recuerdas, consulta el artículo de práctica con Angular con componentes, módulos y servicios.

Sin embargo, aunque Angular nos ahorra escribir mucho código, ésto tiene un coste en términos de rendimiento. Quizás una aplicación pequeña no se verá tan afectada por el trabajo que Angular hace por debajo, para proporcionarnos automáticamente los cambios, pero sí se dejará notar en aplicaciones medianas. Ya las más grandes aplicaciones acusarán sensiblemente una mayor falta de rendimiento.

La solución aplicada en Angular 2 (y que mantienen las siguientes versiones, 4, 5...) fué usar un patrón llamado "Observable", que básicamente nos ahorra tener que hacer consultas repetitivas de acceso a la fuente de información, aumentando el rendimiento de las aplicaciones.

Programación reactiva

Hacemos aquí una pausa para introducir otro concepto relacionado con los observables, como es la "programación reactiva". Aunque para hablar de programación reactiva existen libros enteros, vamos a explicar muy por encima sobre lo que se trata.

Programación tradicional

Primero establezcamos una base sobre un conocimiento de la programación tradicional que nos parece obvio, pero que es la base sobre la programación reactiva, que tiene que ver con el flujo de ejecución de las instrucciones.

En programación tradicional las instrucciones se ejecutan una detrás de otra. Por tanto, si realizamos un cálculo con dos variables y obtenemos un resultado, aunque las variables usadas para hacer el cálculo cambien en el futuro, el cálculo ya se realizó y por tanto el resultado no cambiará.

let a = 1;
let b = 3;
let resultado = a + b; // resultado vale 4
// Más tarde en las instrucciones... 
a = 7; // Asignamos otro valor a la variable a
// Aunque se cambie el valor de "a", resultado sigue valiendo 4,

El anterior código ilustra el modo de trabajo de la programación tradicional y la principal diferencia con respecto a la programación reactiva. Aunque pueda parecer magia, en programación reactiva la variable resultado habría actualizado su valor al alterarse las variables con las que se realizó el cálculo.

Programación reactiva y los flujos de datos

Para facilitar el cambio de comportamiento entre la programación tradicional y la programación reactiva, en ésta última se usan intensivamente los flujos de datos. La programación reactiva es la programación con flujos de datos asíncronos.

En programación reactiva se pueden crear flujos (streams) a partir de cualquier cosa, como podría ser los valores que una variable tome a lo largo del tiempo. Todo puede ser un flujo de datos, como los clics sobre un botón, cambios en una estructura de datos, una consulta para traer un JSON del servidor, un feed RSS, el listado de tuits de las personas a las que sigues, etc.

En la programación reactiva se tienen muy en cuenta esos flujos de datos, creando sistemas que son capaces de consumirlos de distintos modos, fijándose en lo que realmente les importa de estos streams y desechando lo que no. Para ello se dispone de diversas herramientas que permiten filtrar los streams, combinarlos, crear unos streams a partir de otros, etc.

Como objetivo final, reactive programing se ocupa de lanzar diversos tipos de eventos sobre los flujos:

• La aparición de algo interesante dentro de ese flujo
• La aparición de un error en el stream
• La finalización del stream

Como programadores, mediante código, podemos especificar qué es lo que debe ocurrir cuando cualquiera de esos eventos se produzca.

Si quieres leer más sobre programación reactiva, una introducción mucho más detallada la encuentras en el artículo The introduction to Reactive Programming you've been missing.

Observables y programación reactiva

El patrón observable no es más que un modo de implementación de la programación reactiva, que básicamente pone en funcionamiento diversos actores para producir los efectos deseados, que es reaccionar ante el flujo de los distintos eventos producidos. Mejor dicho, producir dichos eventos y consumirlos de diversos modos.

Los componentes principales de este patrón son:

• Observable: Es aquello que queremos observar, que será implementado mediante una colección de eventos o valores futuros. Un observable puede ser creado a partir de eventos de usuario derivados del uso de un formulario, una llamada HTTP, un almacén de datos, etc. Mediante el observable nos podemos suscribir a eventos que nos permiten hacer cosas cuando cambia lo que se esté observando.
• Observer: Es el actor que se dedica a observar. Básicamente se implementa mediante una colección de funciones callback que nos permiten escuchar los eventos o valores emitidos por un observable. Las callbacks permitirán especificar código a ejecutar frente a un dato en el flujo, un error o el final del flujo.
• Subject: es el emisor de eventos, que es capaz de crear el flujo de eventos cuando el observable sufre cambios. Esos eventos serán los que se consuman en los observers.

Estas son las bases del patrón. Sabemos que hemos puesto varios conceptos que sólo quedarán más claros cuando los veamos en código. Será dentro de poco. Aunque vistas muy por encima, son conceptos con los que merece la pena comenzar a familiarizarse.

Existen diversas librerías para implementar programación reactiva que hacen uso del patrón observable. Una de ellas es RxJS, que es la que se usa en Angular.

Qué es RxJS

Reactive Extensions (Rx) es una librería hecha por Microsoft para implementar la programación reactiva, creando aplicaciones que son capaces de usar el patrón observable para gestionar operaciones asíncronas. Por su parte RxJS es la implementación en Javascript de ReactiveExtensions, una más de las adaptaciones existentes en muchos otros lenguajes de programación.

RxJS nos ofrece una base de código Javascript muy interesante para programación reactiva, no solo para producir y consumir streams, sino también para manipularlos. Como es Javascript la puedes usar en cualquier proyecto en este lenguaje, tanto del lado del cliente como del lado del servidor.

La librería RxJS de por sí es materia de estudio para un curso o un manual, pero tenemos que introducirla aquí porque la usa Angular para implementar sus observables. Es decir, en vez de reinventar la rueda, Angular se apoya en RxJS para implementar la programación reactiva, capaz de mejorar sensiblemente el desempeño de las aplicaciones que realicemos con este framework.

Como habrás entendido, podemos usar RxJS en diversos contextos y uno de ellos son las aplicaciones Angular. En los próximos artículos comenzaremos a ver código de Angular para la creación de observables y de algún modo estaremos aprendiendo la propia librería RxJS.

Conclusión

Con lo que hemos tratado en este artículo tienes una base de conocimiento esencial, necesaria para dar el paso de enfrentarte a los observables en Angular.

No hemos visto nada de código pero no te preocupes, porque en el próximo artículo vamos a realizar una práctica de uso de observables en Angular con la que podrás practicar con este modelo de trabajo para la comunicación de cambios. Lo importante por ahora es aclarar conceptos y establecer las bases de conocimiento necesarias para que, a la hora de ver el código, tengas una mayor facilidad de entender cómo funciona esto de los observables y la programación reactiva.