Operadores de tiempo

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:28

Operadores de tiempo

Curso de Programación Reactiva con RxJS

Clase 20 de 36

Clase 20 / 36

Jesus David Mejia

Hace 3 años

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”

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

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS

Operadores de tiempo