Cómo funciona RxJS con metáfora de oficina

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:09

Cómo funciona RxJS con metáfora de oficina

Curso de Angular 4

Clase 66 de 80

Clase 66 / 80

Recursos

Comprende RxJS y los observables con una metáfora simple y potente: una oficina con recepción, una asistente que filtra y prioriza, y un alto ejecutivo que solo recibe lo importante. Verás cómo un stream de clientes equivale a un flujo de datos al que puedes suscribirte y procesar con operadores para obtener justo lo que necesitas.

¿Cómo funciona la metáfora de la oficina para RxJS?

En la recepción llegan personas una a una y la asistente intercepta, organiza y decide qué pasa a la oficina del alto ejecutivo. Atiende paquetes, reportes y solicitudes urgentes. Resume el informe de Recursos Humanos, entrega la agenda del día y prioriza lo crítico. El ejecutivo trabaja en lo suyo y recibe solo lo relevante.

La asistente atiende sin saber cuántos clientes llegarán, de forma inmediata.
Resume reportes y entrega solo cifras de interés al ejecutivo.
Prioriza paquetes e información según su importancia.
Agenda citas cuando el alto ejecutivo está ocupado.
Mantiene una lista de tareas pendientes por organizar.

¿Por qué la asistente es un filtro?

Porque decide qué entra, cuándo entra y en qué formato. Toma datos sin estructura (personas que llegan con distintos asuntos) y los transforma: resume, prioriza, da formato y entrega al destinatario correcto. Así, todo fluye ordenadamente.

¿Qué significan stream y suscripción en RxJS?

Cuando llegan “varios clientes” de forma continua, eso es un flujo o stream. Cada cliente representa un dato. Podemos suscribirnos a ese stream para reaccionar cada vez que llegue un nuevo dato. No hace falta saber cuántos llegarán: simplemente los atendemos conforme aparecen.

Un stream es una secuencia de eventos que llegan con el tiempo.
Cada evento equivale a un dato que podemos usar al instante.
Suscribirse es escuchar y actuar en cada llegada del dato.
La urgencia o prioridad cambia el orden y el tratamiento de la información.

¿Cómo se procesan los datos que llegan?

Al suscribirnos, podemos usar el dato “tal cual” o transformarlo antes de pasarlo al “ejecutivo” (nuestro código que decide). Igual que la asistente, podemos decidir si se entrega completo, resumido o con otro formato.

¿Qué papel cumplen los operadores en RxJS?

Los operadores permiten dar un “tratamiento especial” a los datos del stream. En la metáfora, la asistente filtra, resume, prioriza y da formato. En RxJS, ese rol lo cumplen los operadores sobre los observables: transforman, seleccionan o reordenan antes de entregar.

Operadores: herramientas para transformar y priorizar datos.
Filtro: decide qué pasa y qué se descarta.
Resumen: reduce la información a lo esencial.
Prioridad: organiza la entrega según importancia u oportunidad.

¿Tienes una duda o quieres compartir cómo aplicas esta metáfora en tu código con streams y observables? Escribe tu comentario y seguimos la conversación.

Comentarios (16)16 comentarios

jeisson Andrade

Hace 9 años

Interesante forma de explicar!

Juan Carlos Rueda Diaz

Muy ingenioso 😄

Sergio Alexander Florez Galeano

Genial! más videos así por favor 😄

Jovanny Hernandez

Hace 7 años

Yo no entendí bien la película, la policía sabia que asuntos internos les tendía una trampa?

JCesar Mourinho

Hace 5 años

Jajajajajaja que buen video.

Pedro Ramón Sánchez Chacón

Jaja me encanto, gracias por el ingenio, pasión y tiempo invertido en cada clase.

Rodolfo Sáenz

Hace 8 años

¿Porqué usa "cada que" en vez de "cada vez que"?

Omar Solarte

Magnifica manera de explicar el concepto!!! 😄

Usuario anónimo

User

Una forma muy dinámica para dar a entender RxJS.

Carlos Uriel de Jesus Sánchez González

ingeniosa forma de explicar

13/02/2019 Usando Angular 7:

const URL = 'https://maps.google.com/maps/api/geocode/json?key=<GOOGLE_KEY>';
    this.searchField = new FormControl();
    this.results$ = this.searchField.valueChanges
      .pipe(
        switchMap( query => this.http.get(`${URL}&address=${query}`)),
        // map( response => response.json()), // <- ya viene en json
        map( response => {
          console.log(response);
          return response['results'] ? response['results'] : {};
        })
      );

Más info:

José Alfonso Vargas Cruz

Muy rebuscado, he visto mejores ejemplos de Rx.

Enrique Tecayehuatl

¿Que es un Stream en RxJs?

LUIS CAIZA

la la la la … estuvo chevere… gg

Juan Antonio Baracat

jajaja excelente forma de explicar Eduardo. Gracias!

Carlos Enrique Ramírez Flores

que chingona forma de explicar los problemas que vamos a resolver con RxJS

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina