Decimos que algo es reactivo cuando reacciona, un ejemplo de esto son las celdas de excel que se calculan en base a otras, notas cómo cuando actualizamos el dato de una celda, el de la otra se actualiza automáticamente, luego por supuesto de ejecutar las operaciones deseadas, ese es el concepto abstracto de programación reactiva.
La programación reactiva, es un paradigma de programación, tal como lo son la programación orientada a objetos o la programación funcional.
En el centro de este paradigma están los datos y la ejecución asíncrona de las operaciones que realiza nuestro programa.
La ejecución asíncrona de instrucciones trae incontables beneficios, mejoras a la experiencia de usuario, al rendimiento de tu código, etc. Sin embargo, es más complicada de razonar y puede presentar desafíos como el compartir información entre dos operaciones que se ejecutan en distintos puntos del tiempo.
Uno puede pensar en la ejecución de un programa, como una línea del tiempo, como una flecha que va del inicio del programa, hasta el final. Durante este proceso, algunas operaciones se ejecutan en un orden previamente definido, primero a, luego b y luego c, a esto se le conoce como programación síncrona. Por otro lado, existen algunas operaciones que se ejecutan y sólo traen información al flujo, aunque no se sabe cuándo, a estos procesos los llamamos asíncronos.
---a------b------------c------------------>
---a------b---Ra---------c---Rc-------Rb-------->
Como mencioné, este beneficio de sacar operaciones fuera del flujo, puede traer enorme beneficios, pero hace de nuestro código y nuestro programa más difíciles de razonar. Es decir, ¿cómo hacemos que nuestro programa reaccione a datos que no sabe cuándo vendrán?
Para solucionar esto, se han implementado diferentes soluciones y patrones, uno de ellos el de la programación reactiva.
En programación reactiva, decimos que hay algunos tipos de datos que representan un dato a través del tiempo, esto quiere decir que esta referencia se mantiene actualizada, es decir “reacciona”. Uno de mis ejemplos favoritos es el que presenta Laurence Gonsalves en StackOverflow (https://stackoverflow.com/a/1028642).
x =
En este caso, las referencias mouse-x y mouse-y son una representación de las coordenadas del mouse a través del tiempo, lo que quiere decir que estos datos se mantienen actualizados sin que nosotros lo hagamos, siempre mantendrán el valor que se emita del mouse.
Aquí es donde los dos conceptos se entrelazan, la programación reactiva es interesante porque nos permite representar los valores de operaciones asíncronas con tipos de datos que siempre reflejan el valor de una operación a través del tiempo.
Esto es posible porque como parte del patrón de diseño existe el concepto de la propagación de cambio. Pongamos un ejemplo, supongamos que tengo la siguiente suma:
a = x + y
En un paradigma tradicional de programación, a es la suma de x + y, en el momento en el que se realiza la operación, si posteriormente modificamos x o modificamos y. A no se vería afectado.
En programación reactiva, en cambio, las modificaciones a x o y, pudieran significar que a debe recalcular su valor, recuerda, como las celdas de Excel que si modificamos un valor con el que están sincronizadas, la celda se recalcula.
Esta también es la razón por la que decimos que ciertos frameworks de JavaScript son reactivos, porque propagan cambios y recalculan sin que explícitamente el código se los indique, claros ejemplos son React, Angular y Vue.
Este enfoque de desarrollo nos permite expresar operaciones aunque el valor de algunos de los elementos aún no tengan valor, porque lo están esperando, vayan a cambiarlo porque el usuario interactúa con él, o bien, básicamente cualquier modificación.
Esto a su vez, se traduce en que nuestro programa es una representación del flujo de información, por ejemplo:
peliculas = peliculasAsync -> estructurarPeliculas -> convertirJSON;
Nota como en este pequeño pseudocódigo no se asume cuándo las películas estarán listas, o si estas cambian, se recalcula por completo la estructura y la conversión a JSON. Esto reduce la cantidad de código que escribimos porque no tenemos que estar al pendiente de actualizaciones o cuándo el resultado de peliculasAsync está completo, si este cambia, etc.
La programación reactiva es código más expresivo y una excelente solución a las complejidades del código asíncrono, en un siguiente tema hablaremos de una de las implementaciones, el patrón del Observador.
-
Módulo 1 | 7 clases
Introducción
expand_more-
play_circle_outline
Clase 1
Introducción al curso de Angular
-
play_circle_outline
Clase 2
Qué aprenderemos en este curso
-
play_circle_outline
Clase 3
Conocimientos previos
-
play_circle_outline
Clase 4
Qué es Angular
-
play_circle_outline
Clase 5
Diferencias entre AngularJS y Angular
-
play_circle_outline
Clase 6
Control de versiones semántico (semantic versioning)
-
play_circle_outline
Clase 7
Anatomía de un proyecto de Angular
-
-
Módulo 2 | 9 clases
Primeros pasos con Angular
expand_more-
play_circle_outline
Clase 1
Web Components
-
play_circle_outline
Clase 2
Crear un componente
-
play_circle_outline
Clase 3
Templates
-
play_circle_outline
Clase 4
Interpolación
-
play_circle_outline
Clase 5
Propiedades y métodos de un componente
-
play_circle_outline
Clase 6
ngOnInit
-
play_circle_outline
Clase 7
Estilos
-
play_circle_outline
Clase 8
ngContent
-
play_circle_outline
Clase 9
Ejercicio con ngContent y componentes
-
-
Módulo 3 | 21 clases
Componentes a detalle
expand_more-
play_circle_outline
Clase 1
Expresiones de un template de Angular
-
play_circle_outline
Clase 2
Sincronización de datos (Data Binding)
-
play_circle_outline
Clase 3
One way binding (interpolación)
-
play_circle_outline
Clase 4
Property binding
-
play_circle_outline
Clase 5
ngClass
-
play_circle_outline
Clase 6
Directivas Estructurales
-
play_circle_outline
Clase 7
ngIf
-
play_circle_outline
Clase 8
Ejercicio con ngIf y ngClass
-
play_circle_outline
Clase 9
ngFor
-
play_circle_outline
Clase 10
ngSwitch
-
play_circle_outline
Clase 11
Eventos
-
play_circle_outline
Clase 12
Nuevo componente para siguientes ejemplos
-
play_circle_outline
Clase 13
Payload de un evento con $event
-
play_circle_outline
Clase 14
Eventos personalizados (EventEmitter)
-
play_circle_outline
Clase 15
Input properties
-
play_circle_outline
Clase 16
Variables de referencia del template
-
play_circle_outline
Clase 17
Two way binding con ngModel
-
play_circle_outline
Clase 18
Pipes
-
play_circle_outline
Clase 19
Cómo crear mi propio Pipe
-
play_circle_outline
Clase 20
Cómo crear mi propia directiva de atributo
-
play_circle_outline
Clase 21
HostListener para eventos
-
-
Módulo 4 | 14 clases
Servicios y Observadores
expand_more-
play_circle_outline
Clase 1
Actualizar a Angular 6
-
play_circle_outline
Clase 2
Servicios en Angular
-
play_circle_outline
Clase 3
Crear tu propio servicio
-
play_circle_outline
Clase 4
Consultas asíncronas
-
play_circle_outline
Clase 5
Inyector de dependencias en Angular
-
play_circle_outline
Clase 6
Compartir datos de un servicio
-
play_arrow
Clase 7
Programación reactiva
-
play_circle_outline
Clase 8
El patrón del observable
-
play_circle_outline
Clase 9
Observadores y Observables en RxJS
-
play_circle_outline
Clase 10
Operadores en RxJS
-
play_circle_outline
Clase 11
Async Pipe
-
play_circle_outline
Clase 12
Operador de navegación segura ?.
-
play_circle_outline
Clase 13
Async y suscripciones a un Observable
-
play_circle_outline
Clase 14
Servicios en Angular 6
-
-
Módulo 5 | 7 clases
Animaciones
expand_more-
play_circle_outline
Clase 1
Animaciones CSS
-
play_circle_outline
Clase 2
Configurar módulo de animaciones
-
play_circle_outline
Clase 3
Estados y Transiciones
-
play_circle_outline
Clase 4
Aplicar estilos a estados y animaciones
-
play_circle_outline
Clase 5
Ejercicio de animación con Angular
-
play_circle_outline
Clase 6
Organizar animaciones
-
play_circle_outline
Clase 7
Animaciones de listas y escalonadas
-
-
Módulo 6 | 2 clases
Cierre del curso
expand_more