Bienvenidos.
Vamos a modificar nuestra clase cliente servis para que las peticiones sean más reactivas y también
después cuando trabajemos con el API Rest sean asíncrona.
Por ahora, si realizamos la clase cliente servis actualmente como la dejamos?
La última clase es un método psicrono, está sincronizado y no podría funcionar correctamente en un
contexto real con un API, ya que se requiere manejar peticiones asíncrona que no bloquee nuestra aplicación
cliente nuestra aplicación angular mientras espera la respuesta del servidor.
Y además, la idea es que en el servidor se puedan realizar varias peticiones al mismo tiempo que no
estén sincronizadas entre sí y por supuesto que se manejen de forma paralela al mismo tiempo y en tiempo
real.
Y justamente eso, que el concepto reactivo que reaccioné en tiempo real y a través de flujo de datos
con stream de entrada y de salida.
Por lo tanto, tenemos que modificar nuestro código para que el arreglo de cliente lo transformemos
a un tipo stream y para eso utilizamos el API observable.
Vamos a comenzar importando esta clase
observable from RX 10 Reactive Extensions Perfecto, pero esto sería si estamos utilizando Angular 5,
pero en Angular 6 esto cambia completamente.
Reactive Streams o Stetson tiene una importante estructuración.
Va a cambiar los import.
Por ejemplo, en Angular 6 sería muy parecido, pero en el front, en el RX 10 es el larch observable.
No va solo mentiría él era x 10.
Para resumir sería import las llaves observable from rx 10 nada más.
Eso sería en la nueva versión de Angular 6, que por supuesto utiliza recti este Echolls versión 6.
Bien, continuemos.
Entonces lo que retorna al método del cliente tiene que ser un stream.
Por lo tanto, un observable de clientes.
Y también tenemos que convertir este arreglo de clientes en un observable para que sea del mismo tipo
que estamos retornando.
Entonces también tenemos que importar.
Vamos a importar el método off.
Es un operador from también del Happy Reactive Estrechen.
Acá sería observable en minúscula.
Larch, el nombre del operador off y acá pasa lo mismo para la versión de Angular 6.
Muy parecido al observable.
Hay un cambio también en el import del off.
Por lo tanto sería el import la llaves.
Coma observable from here que iez.
Eso sería todo.
Significa tanto el off como el observable.
Ambos se importan desde el mismo paquete.
El paquete RX 10 y vamos a tener un solo import tanto para off como para observable off.
Sería este método de construcción para crear el objeto observable y por supuesto, el observable sería
el tipo de dato, la clase observada que representa nuestro flujo reactivo.
Bien, continuamos.
Llega.
Utilizamos el método off el operador Omero y ahí convertimos nuestro listado de clientes en un observable.
Por lo tanto, en un stream, en un flujo de datos.
Y justamente la idea es que se puede manejar grandes flujo de datos de cualquier tipo, ya sea un listado
de objetos, clientes, un stream de audio, video, imágenes, cualquier tipo de cosa.
También importante entender el concepto observable está basado en el patrón de diseño observador, es
decir, que tenemos un sujeto que es observable.
En este caso sería el cliente y tenemos también observadores que están atentos escuchando un posible
cambio en el sujeto.
En este caso en el cliente.
Estos observadores se suscriben al sujeto que sería el observable y cuando cambia su estado se notifica
a los observadores y se gatilla algún tipo de proceso, un tipo tarea, algún tipo de evento.
Ese es el patrón de diseño.
Y esto llevado a Angular.
Tenemos el lado bikeinn del servidor con el API Rest y tenemos el cliente con Angular, el frontend.
Entonces, cuando cambia algún dato en el servidor, los clientes automáticamente notifique ese cambio
y se actualiza de forma automática y en tiempo real en el cliente, en el cliente angular, sin necesidad
de tener que recargar la página, lo haga de forma transparente solamente cuando cambie la información,
cuando cambie el estado de los clientes, ya sea cuando se registra o no al cliente, cuando se edita,
cuando se elimina.
Tienes que estar comunicado el cliente con el servidor y siempre notificar, avisar.
Ante cualquier cambio nos vamos a cliente component y acá tenemos que cambiar, tenemos que modificar
y acá tenemos que suscribir o registrar el observador a nuestros clientes, que sería el observable.
Bien, entonces esto ya no va, se tiene que mover, se tienen que quitar de acá.
Y qué clientes es un observable?
Va a ser observado por observadores.
Entonces la idea es subscribir, acá tenemos que suscribir y dentro de este método el observador justamente
sería asignar en el atributo clientes el valor que se está recibiendo desde el cliente service, que
sería el listado de clientes con los cambios.
Entonces acá tenemos una función anónima nuestro Salvador, que se encarga de asignar el valor al cliente
componente clientes, que sería nuestro argumento el resultado del stream.
Vamos a asignar este parámetro clientes a 10 clientes, clientes y eso sería todo.
Este sería nuestro observador, por lo tanto, actualiza el listado de clientes del cliente componen
y eso se pasa a la plantilla a la vista con los posibles cambios.
Esto es una función anónima.
Esto es una forma que tiene de script para simplificar las funciones.
Anónima o arrow o de flecha.
Entonces, justamente esto son los argumentos.
Acá se podría incluso pasar con. con paréntesis.
Y acá se puede pasar la función anónima con las llaves.
Se fijan exactamente lo mismo.
Incluso podríamos quitar esto.
Y que colocamos Funchal, exactamente lo mismo Antxón estábamos pasando los clientes, que sería el
resultado del streams convertido a un listado de cliente y seleccionamos al atributo clientes.
Entonces esto mismo se puede simplificar en ti scrip de esta forma y usamos la llave cuando tenemos
más de una línea código.
Pero en este caso, como es una sola línea de código, la podemos omitir y quería simplemente de esa
forma.
Usemos paréntesis cuando tiene más de un argumento cuando estamos pasando más de un parámetro al método
o a la función anónima.
En este caso es uno solo.
Por lo tanto, también se puede omitir y queda muy simplificado que muy fácil de entender.
Entonces, esto sería el concepto de los herbales que sería nuestro cliente, el observador que se suscribe
y actualiza el listado de cliente en nuestra aplicación angular.
Eso sería todo.
Vamos a guardar y también guardamos el cliente servis y vamos a levantar el servidor.
Ok, y acá tenemos el ejemplo funcionando igual que siempre, pero de una forma más reactiva.
A pesar de que estamos utilizando datos falsos que no provienen de una API Rest, sino que están dentro
de un archivo en clientes.
Yeison Ejemplos de pruebas son datos estáticos, falsos.
Pero estamos preparando nuestra aplicación para que después, cuando la modifiquemos y realmente tengamos
el API Rest implementado con Spring, ya tengamos gran parte avanzada en nuestro cliente con Angular
y esté trabajando de forma reactiva y asíncrona.
Bien, espero que haya quedado un poco más claro el concepto de programación reactiva dentro de Angular
y su implementación utilizando el API observable.
Quedamos hasta acá y cualquier duda que tengan la revisamos.
Hasta la próxima.