Operadores de tiempo

Clase 20 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

Marcelo Arias

teacher•

⏰ Los operadores de tiempo nos ayudan a gestionar cómo y con qué frecuencia entregamos valores.

Hay muchos operadores de esta clase en RxJS, en esta clase te introduzco 4 de ellos:

throttleTime
sampleTime
auditTime
debounceTime

¿Por qué son importantes los operadores de tiempo? 🔃 Imagina que necesitamos consultar a una API por unos valores que tenemos. Si son muchos valores corremos el riesgo de utilizar muchos recursos o generar muchas peticiones y llegar a un límite establecido.

✅ Pero a través de un operador como sampleTime, sólo hacemos una petición a una API cada 1 minuto, o cada 10 minutos por los valores emitidos, disminuimos la frecuencia de peticiones y el riesgo de llegar a un límite.

Wilmer David Cedeño Mendoza

student•

el operador thottleTime se puede usar para usar para los botones para mejorar la experiencia de usuario, ya que muchas personas estan acostumbradas a dar doble click para hacer una sola accion

Víctor Andrés Córdova Poma

student•

Un ejemplo práctico es ver en tiktok como al dar un like a un vídeo solo se puede hacer cada cierto tiempo, y no al instante en que se haga cada click. Porque ello colapsaría al servidor por la cantidad de peticiones que se le hagan.

Jesus David Mejia

student•

Los operadores de tiempo son muy interesantes, pero yo creo que muchos entendemos los conceptos del profesor, pero a su vez no encontramos como esas situaciones a la hora del desarrollo donde podemos aplicar este tipo de operadores, por lo cual quiero compartir con ustedes un pequeño ejemplo real de desarrollo en donde se aplica los operadores de tiempo.

Un caso bastante común para usar el debounceTime(500) es cuando estamos utilizando un input de tipo texto para filtrar datos, me explico imagínate que tienes una tabla con una cantidad de valores y quieres filtrar por el nombre pero el usuario tiene que escribir el termino por el cual quiere filtrar, entonces si tu conectas los eventos emitidos al presionar teclas dentro del input con un API vamos a tener un problema de rendimiento porque cada tecla que presione el usuario va generar una petición HTTP. Como podemos solucionar esto usando el debounceTime(500), ¿Esto como nos va ayudar? Sencillo cuando el usuario empieza a escribir se inicia el conteo del debounceTime y cuando el termine de escribir y pasen 500ms sin recibir eventos se dispara la API, esto es muy común en este tipo de casos.

Explicación:

[Input]: Pera

[Observable sin debounceTime]:

P: Simulación del HTTP GET: “https://api/frutas?search=p” e: Simulación del HTTP GET: “https://api/frutas?search=pe” r: Simulación del HTTP GET: “https://api/frutas?search=per” a: Simulación del HTTP GET: “https://api/frutas?search=pera”

[Observable con debounceTime(500)]: P: El usuario no puede dejar de escribir más de 500ms sino se dispara el HTTP GET e: El usuario no puede dejar de escribir más de 500ms sino se dispara el HTTP GET r: El usuario no puede dejar de escribir más de 500ms sino se dispara el HTTP GET a: Simulación del HTTP GET: “https://api/frutas?search=pera”

Operadores de tiempo

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

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción