La idea de la reactividad

Clase 4 de 36 • Curso de Programación Reactiva con RxJS

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

uRieL Martinez Bautista

student•

Patrones Observer e Iterator de comportamiento. Ojala platzi siga haciendo cursos como estos; de nivel intermedio para arriba.

Sergio Brandon De Lucio Chavero

student•

De las mejores diapositivas que he visto en Platzi, me ha gustado mucho esta clase, este curso tiene potencial para ser uno de mis favoritos <3

Cristhian Cepeda

student•

Observables y Observadores

Un observable es un patrón de diseño que representa una cadena de valores que vambian en el tiempo y se comunica con los observadores usando los siguientes tres métodos:

Next: Cuando envía un dato.
Complete: Cuando deja de enviar datos
Error: Cuando algo falla.

Un observador es un objeto o una función que se suscribe a un observable puede comunicarse a través de los métodos:

Subscribe: Para empezar a recibir valores.
Unsubscribe: Para dejar de recibir valores

Diego Fernando Caviedes Camaho

student•

Patern Observer Subject: Es el que notifica cualquier cambio de estado a los observadores además para que los observadores se subscriban y cancelen la suscripción. Observers: cuando suscribirse o cuando cancelar la suscripción

Patern Iterator: utiliza un objecto iterator como mecanismo para recorrer una colección o contenedor ejemplo un Array de elementos de forma secuencial(iterar la colección sin necesidad de conocer la estructura de la colección ) un iterador tiene solo dos metodos:

hasNext()
Next()

let coleccion = new iterableList (1,2,3,4,5,6);

let iterator = coleccion.iterator();

while (iterator.hasNext()) { 
    console.log (iterator.next());
}

import {interval} from rxjs;

const observable = interval(1000); //emite un evento por segundo

const subscription = observable.subscribe( 
    x => console.log(x) //es el imprime cada evento
);

setTimeout( () => {
    subscription.unsubscribe()
},4000); //cancel Stream

//output 1 valor cada segundo   0, 1, 2, 3,

uRieL Martinez Bautista

student•

La explicación de Marcelo muy entendible , me está gustando. Me costó trabajo entenderlo cuando empece el desarrollo de micros con Webflux.

Kevin Bueno

student•

Excelente explicación, se nota la preparación, los slides son una obra de arte

Andrés Villarraga

student•

En los eventos **Error ** o Complete emitidos por el Observable, se hace un Unsubscribe por defecto ? En caso de que no, para que mantendría la suscribción si no recibiré más datos ?

Marcelo Arias

teacher•

¡Hola Andy! Cuando se ejecutan los eventos de Error o Complete se termina la suscripción. Por lo que no es necesario utilizar el método unsubscribe después de ese escenario.

Reinaldo Mendoza

student•

Son las mejores diapositivas que he visto, es casi una pelicula

Wilmer David Cedeño Mendoza

student•

muy bonitas las animaciones, sirven de mucho para dar a entender el funcionamiento de este patron

Manuela Barba Guerra

student•

Resumen: Los observables son secuencias de eventos. Un observador se puede subscribe y unsubscribe a un observable, y consumir los datos que son enviados a través del observable. El observable puede:

enviar uno a uno datos con next,
o dejar de enviar con complete indicando que la secuencia terminó y no se observará más,
y también puede enviar con error la información del error y se detiene la observación.

Sergio Daniel Reyes Javier

student•

Gracias. Esta es la explicación que quería ver en el vídeo.

Platzi Team

student•

La idea de la reactividad

Patron Observador
Patron Iterador

El patrón observador es un diseño de software que se utiliza para establecer una relación de dependencia uno a muchos entre objetos. En este patrón, hay dos tipos principales de objetos: el sujeto (también conocido como observable o publicador) y los observadores (también conocidos como suscriptores o subscriptores).

El flujo típico del patrón observador es el siguiente:

El sujeto tiene métodos para permitir que los observadores se registren y cancelen su registro.
Cuando ocurre un cambio en el sujeto, este notifica a todos los observadores llamando al método de actualización en cada uno de ellos.
Los observadores reciben la notificación y realizan las acciones necesarias en función de la información proporcionada por el sujeto.

Andrés Giovanni Vanegas Castañeda

student•

Esta clase es espectacular! No había visto una clase tan descriptiva en mucho tiempo. Gracias profe Marcelo, quedaron super claros los conceptos.

Anfernee Valera

student•

No puedo creer que una clase tan larga y con tanta información. Fue tan sencilla de entender y tan clara 😍. Creo que así es el formato en el que platzi siempre tiene que apuntar los cursos, no las clases de 2min en donde se siente que el profesor no explica, sino que lee documentación...

Odon Lozada

student•

que buen ejemplo

Felipe de Jesús Ramirez Rodriguez

student•

An Observable communicates with its observers with the following notifications: OnNext conveys an item that is emitted by the Observable to the observer OnCompleted indicates that the Observable has completed successfully and that it will be emitting no further items OnError indicates that the Observable has terminated with a specified error condition and that it will be emitting no further items OnSubscribe (optional) indicates that the Observable is ready to accept Request notifications from the observer (see Backpressure below) An observer communicates with its Observable by means of the following notifications:

Subscribe indicates that the observer is ready to receive notifications from the Observable Unsubscribe indicates that the observer no longer wants to receive notifications from the Observable Request (optional) indicates that the observer wants no more than a particular number of additional OnNext notifications from the Observable (see Backpressure below)

https://reactivex.io/documentation/contract.html

Linda Montoya

student•

Por fin alguien que explica de forma entendible estos dos conceptos. Según lo comprendí, el Observable es como una banda de producción (o cinta transportadora) donde se emiten paquetes (eventos) de forma constante.

Para que esto funcione, necesitamos un Observador, que es la persona o entidad al final de la banda esperando los paquetes. Siguiendo el ejemplo de una empresa de domicilios:

La empresa coloca todos los paquetes sobre la cinta transportadora (El Observable). Esta cinta tiene distintas salidas (canales) dirigidas a diferentes destinos, por ejemplo, continentes. En cada salida, hay un receptor específico (El Observador) que se ha 'suscrito' a esa banda.

Mientras la cinta lleva los paquetes de forma constante, el Observador (el receptor en el destino) reacciona a cada paquete que llega. La suscripción es, por tanto, el acto de asignar a ese receptor a una salida específica para que empiece a recibir y procesar el flujo de paquetes.salidas para el ejemplo seria por continente, entonces cada continente representa una salida por donde se van los paquetes (El Observador), entonces la cinta lleva los paquetes de forma contante y las salidas representa la subscripcion del Observador al flujo contante de paquetes.

Anfernee Valera

student•

Hay que hablar del grandísimo nivel que tienen las diapositivas. Son espectaculares. Sin ellas creo que la clase no hubiera sido lo mismo, gracias por eso Profe.

Alvaro Eduardo Garzón Pira

student•

Esta teoría de observable y observador me recuerda mucho a un sistema de gestión de colas como RabbitMQ, ActiveMQ, Amazon MQ, SQS, entre otros...

Juan Miguel Jimenez

student•

¡Qué manera tan sencilla de entender los conceptos básicos de la programación reactiva! Gran profesor

Kevin Moreno Jaimes

student•

Les comparto 2 enlaces a articulos que explican muy bien y con ejemplos estos patrones al igual que muchos otros :)

https://refactoring.guru/es/design-patterns/observer https://refactoring.guru/es/design-patterns/iterator

import {interval} from rxjs;

const observable = interval(1000); //emite un evento por segundo

const subscription = observable.subscribe( 
    x => console.log(x) //es el imprime cada evento
);

setTimeout( () => {
    subscription.unsubscribe()
},4000); //cancel Stream

//output 1 valor cada segundo   0, 1, 2, 3,

La idea de la reactividad

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas