[MUSIC]
Permítanme ahora darles una visión general rápida de Angular y
su relación con el programa reactivo,
cómo Angular hace uso de la programación reactiva.
En particular, la biblioteca RxJS y cómo es aprovechada por
Angular para proporcionar una forma reactiva de escribir aplicaciones Angular.
Ahora lo que presentamos en esta conferencia es una visión muy rápida de
el concepto general de programación reactiva, observables,
el patrón observado y cómo se aplica en Angular.
La programación reactiva por sí misma es un tema
muy vasto que no se puede cubrir en diez minutos.
La programación reactiva,
si necesito cubrirla con todo detalle se convertirá en un curso completo por derecho propio.
Y desafortunadamente,
no tenemos tiempo para incrustar un curso completo en este curso en particular.
Así que dado el hecho de que estamos interesados principalmente en cómo Angular aprovecha la programación reactiva
para permitirnos duplicar aplicaciones Angular,
por lo que nos concentraremos en ese aspecto.
Pero en el camino,
les daré una rápida introducción a los diversos conceptos en esta área general.
Si usted se interesa en la programación reactiva,
le aconsejo encarecidamente que busque algunos de los enlaces que he proporcionado y
recursos adicionales para esta lección en particular.
Usted tiene acceso a una gran cantidad de material por ahí, pero
le daremos una fuerte conexión a tierra en la programación reactiva.
Pero en este curso, a partir de este punto,
veremos cómo Angular aprovecha el paradigma de programación reactiva para
diseñar aplicaciones Angular.
No sólo vamos a restringir sólo a esta lección, pero
todas las lecciones posteriores también verán Usado de lo observable y
el patrón de observación y cómo escribimos aplicaciones reactivas en angular.
Toda la discusión sobre la programación reactiva gira en torno a
este patrón particular de ingeniería de software llamado como patrón observable.
Recordáis la pandilla de cuatro que os mencioné en una de las anteriores conferencias
donde discutimos sobre el marco del controlador de vista modelo y
el marco del modelo de vista modelo.
La misma banda de cuatro libros contiene algunos del patrón que
ha sido utilizado con bastante éxito en el patrón de programación reactiva.
El patrón de observador gira en torno a observables.
Así que tienes observables, cuyo comportamiento puede ser observado por observadores.
Así que es por eso que esto se llama el patrón de observador.
Declaras ciertos objetos como observables o sujetos y
estos observables serán observados por observadores.
Ahora, los propios observadores se registrarán en
observar los cambios en lo observable y
el observable notificará a los observadores cada vez que ocurran cambios.
Así que en este patrón de observador, la forma en que estos observadores suscribirán
a lo observable o se registrarán con lo observable.
Entonces, así es como el observable sabe qué observadores están interesados en
cualquier cambio en su estado.
Así pues, cada vez que un observador observable diga,
cambio en su estado, notificará inmediatamente a todos los observadores
sobre el cambio de estado y los observadores posteriormente podrán tomar
acción basada en esta notificación del cambio en lo observable.
El patrón de observador se ha utilizado muy eficazmente en muchas circunstancias
diferentes.
Y de hecho, el paradigma de programación reactiva se basa en él.
Entonces, la pregunta que viene a tu mente inmediatamente es
¿por qué hablamos de los observables?
¿Cuál es el interés especial sobre los observables?
El patrón de observador es una forma de escribir aplicaciones de software.
Entonces, esto se basa en Streams.
Por lo tanto, usted tiene datos que fluyen su aplicación.
Estos datos se pueden ver como una secuencia de valores que fluye a través de su aplicación
.
Entonces, la corriente es el canal principal alrededor del cual se diseña observables y
patrón observable.
Entonces, qué transmisiones puedes suscribirte a estas transmisiones.
Y cada vez que un valor aparece en la secuencia, recoges ese valor y
entonces puedes reaccionar a ese valor.
Así que para poder reaccionar a ese valor, necesitas suscribirte a esa transmisión o
necesitas suscribirte al observable.
El observable con frecuencia mantendrá los valores emisores.
Y cuando ves esos valores, el observador puede reaccionar a ellos.
Ahora esto también significa que cuando ya no estás interesado,
puedes darte de baja de un observable.
Puedes decir, ya no estoy interesado en verte y luego desaparecer.
Así que el patrón observable le permite observar periódicamente cambios,
si quieres y luego deja de observar cuando ya no estás interesado.
Así que ese tipo de paradigma le permite diseñar sus aplicaciones de software
de una manera muy interesante, de una manera muy intuitiva.
Pero para poder usar este enfoque,
necesitas tener la cabeza alrededor de este enfoque.
Al igual que vimos con el patrón de devolución de llamada o vimos con el uso de promesas.
Observables es otra forma de diseñar aplicaciones.
Entonces, un observable por sí mismo será muy perezoso y se quedará por ahí.
Por lo tanto, puede crear un observable y luego simplemente dejarlo allí.
El observable se activa o
se pone caliente cuando alguien comienza a suscribirse al observador.
Así que en ese momento, el observador entra en acción y comienza a editar valores.
Así que si al menos un observador es confiado en lo observable,
entonces el observable comenzará a emitir valores.
Si nadie es confiado, observable volverá a su caparazón y permanecerá allí.
Así que puedes pensar en ello de esa manera.
Así que si esa imagen mental te ayuda a entender
cómo funciona la patente del observador, entonces que así sea.
Por lo tanto, eso le ayudará a mirar la forma en que diseñamos nuestras aplicaciones
en los ejercicios que siguen y luego las lecciones posteriores
donde examinamos HTTP soportado Angular con más detalle.
Otro aspecto de los observables es el hecho de que cancelar una solicitud anterior y
luego volver a intentarlo es muy sencillo con observables.
La promesa que viste antes, una vez que empiezas a esperar una promesa,
no puedes cancelar, estás esperando.
La promesa eventualmente se resolverá o fallará y
entonces usted tiene que reaccionar sin importar lo que incluso si ya no está interesado.
Pero con un observable, si usted puede vender su suscripción,
entonces que lo que sucede con lo observable no es ninguna preocupación para usted en absoluto.
Y así no necesitas hacer nada, si cancelas tu suscripción.
Por lo tanto, cancelar y volver a intentarlo en caso de que la prueba anterior no tenga éxito
es muy sencillo con observables.
Veremos algunos de estos comportamientos con más detalle en los ejercicios que siguen.
Esto nos lleva a ese concepto de programación reactiva.
La programación reactiva se basa en el patrón de observador y
también en un patrón iterado.
Pero de todos modos,
el patrón de observador es la característica dominante de una programación reactiva.
Así que en la programación reactiva, estamos interesados en los flujos de datos.
Cómo fluyen los datos a través de su aplicación.
Cualquier flujo de datos se puede tratar como una secuencia.
Por lo tanto, este flujo de datos puede propagar cambios a través de su aplicación.
Y mientras los cambios se propagan a través de la aplicación,
en etapas intermedias puede incluso tomar un flujo en particular,
modificarlo y crear otro flujo saliendo desde allí.
Así que eso es lo que un patrón observable nos permite dibujar.
Para que todo el paradigma de programación se construya alrededor de flujos o flujos de datos.
Así que esta es otra forma de tratar de resolver tu problema.
Y es por eso que estoy enfatizando el hecho de que usted necesita para dar vueltas a
entender cómo el patrón reactivo o cómo la programación reactiva se hace en la práctica.
Ahora, a menudo escuchas a la gente hablando de algo llamado programación funcional
reactiva.
Si está familiarizado con el paradigma de programación funcional.
Pero además de la programación reactiva
es lo que la gente a menudo se refiere como programación reactiva funcional.
Así que el matrimonio entre estos dos enfoques.
Ahora, verá el uso de algunos de estos con Angular
a medida que vaya a través de este curso en particular.
Finalmente, ¿qué pasa con RxJS?
¿Qué papel juega en todo este ecosistema?
RxJS es una implementación de JavaScript del patrón observable y
también soporte para programación reactiva.
Entonces, si hicieras programación reactiva en JavaScript,
entonces aprovechas la biblioteca RxJS para hacerlo.
RxJS solo una de esas implementaciones.
Hay algunos otros pero la razón por la que estamos interesados en RxJS en particular
en este curso es porque Angular aprovecha RxJS para
su soporte para la programación reactiva.
Entonces el RxJS es una biblioteca.
Es una biblioteca separada que está por ahí.
También puede usar RxJS para otros fines, no necesariamente relacionados con Angular.
Ha habido aplicaciones que se han desarrollado usando RxJS per se
no relacionadas con Angular.
Pero en este curso, estamos interesados en cómo RxJS se une con
el Angular para apoyar la programación reactiva en Angular.
Así que RxJS es una biblioteca que le permite hacer programación asíncrona.
Hemos hablado de programación asíncrona que promete antes.
Veremos programación asíncrona con devoluciones de llamada en el curso del nodo.
Y observables es otra forma de mirar la programación asíncrona
, junto con el programador impulsado por eventos.
Así que si está familiarizado con el paradigma de programación impulsado por eventos,
RxJS encaja bien dentro de ese entorno.
Todo está construido alrededor de secuencias Observables.
Y la biblioteca RxJS le proporciona un tipo de núcleo llamado como Observable.
Y alrededor de este tipo de núcleo, usted tiene algunos tipos de satélite
que se construyen llamados como observadores, planificadores y sujetos.
Todo esto le permite hacer programación reactiva.
Además, RxJS también admite un montón de operadores.
Soporta operadores, separadores, lo siento.
Eso fue un resbalón de mi lengua.
RxJS soporta operadores, operadores
que se inspiran en los operadores de matriz JavaScript.
Si está familiarizado con los operadores de matrices JavaScript como el mapa, entonces
los operadores RxJS se verán muy familiares para usted.
Puede tratar un observable y
los valores que una imagen observable como una matriz, por lo que es por eso que muchos de
los operadores de matriz encuentran su camino en RxJS y programación reactiva también.
Así que los usuarios mapear, filtrar, reducir y
otros operadores de array también encontrarán un lugar en RxJS y programación reactiva.
Y esto es lo que le permite manejar eventos asincrónicos como colecciones.
Entonces, cuando quiera esperar a
un evento asincrónico, será similar a suscribirse a un observable.
Así que cuando ese observable emite el valor, estás listo para capturar el valor y
luego actuar en consecuencia.
Usted sabe cuándo va a tener lugar esa emisión.
Entonces esa es la parte asíncrona que entra en juego con el uso de RxJS.
Y como ya mencioné, la razón por la que estamos interesados en RxJS es porque
Angular aprovecha la biblioteca RxJS para
haciendo su soporte para la programación reactiva.
Angular en sí tiene un número de observables construidos,
como veremos en poco tiempo.
Cuando usted entra en el mundo de la programación reactiva, a menudo escuchará a la gente hablando
sobre observables, luego escuchará a la gente hablando de operadores y
entonces también escuchará a la gente hablando de diagramas de mármol.
Ahora, los diagramas de mármol son una forma de representar
la programación reactiva usando observables.
Así que si tienes un observable,
entonces si ves este observable como una función del tiempo,
por lo que si este eje representa una función del tiempo, el
observable emitirá periódicamente valores como este, uno tras otro.
Así que si organizas estos valores a lo largo de una secuencia,
como una función del tiempo, por lo que verías los valores que se emiten de esta manera.
También existe la posibilidad de que encuentre un error.
En cuyo caso, debe manejar el error apropiadamente.
Si maneja el error correctamente,
puede continuar o puede detenerse en ese punto.
Del mismo modo, cuando un observable completa todas sus iteraciones,
entonces se marcará como la finalización de lo observable.
Por lo tanto, debe ser capaz de manejar incluso el evento de finalización en un observable.
Dado este tiempo el comportamiento anotado de lo observable, puede tomar
los valores que la imagen observable y aplicar operadores en esos observables.
Ahora estos valores se pueden ver como una matriz.
Si eso te ayuda a comprender mejor, puedes verlo como una matriz de valores.
Ahora, estos valores pueden ser operados usando varios operadores.
Así que ahí es donde soporta su mapa, su filtro, su reducción y varios operadores que
cualquier biblioteca de programas reactivos típicos como RxJS.
Le permite transformar
un conjunto de valores que obtiene de un observable en otro conjunto de valores.
De este modo, terminas creando un nuevo observable.
Y este nuevo observable consistirá en
valores transformados desde el observable original.
Así que esa es la razón por la que muestro estos valores transformados como rectángulos aquí.
Sólo para darle una impresión visual de lo que es lo que estamos tratando de hacer con
un operador.
Así que estás tomando un valor y luego transformándolo en un valor diferente.
Y esa secuencia de esos diferentes valores que
Usted obtiene transformando los valores emitidos por un observable.
se convertirá en otra cadena de valores, y en consecuencia,
se convertirá en otra observable.
Entonces puedes derivar uno observable de otro observable.
Pero este segundo observable depende del primero, por lo que depende.
Su comportamiento se tipeó, el primero mediante el uso de este operador.
Veremos ejemplos de estos a medida que pasamos por algunos de los ejercicios
en esta lección y lecciones posteriores.
¿Qué pasa con Angular y RxJS, cómo se unen?
Angular, como mencionamos anteriormente, admite una serie de observables por sí mismo.
Y este soporte de observables en Angular le permite hacer una programación reactiva
dentro de su aplicación Angular.
Así, por ejemplo, formas en Angular,
vimos formas reactivas ya en una de las lecciones anteriores.
En ese momento, nunca mencioné la palabra observable explícitamente allí.
Pero ahora que sabemos observable, volveremos a la forma reactiva, y
luego haremos alguna transformación a la forma reactiva.
Las formas mismas se convierten en observables en Angular.
Y cualquier cambio en los valores de cualquiera de los elementos del formulario,
puede ser producido, y observado suscribiéndose a
lo observable que el marco Angular proporciona para nosotros.
Del mismo modo, HTTP, que encontraremos en el siguiente módulo de este curso,
también estará basado en observables.
Entonces, cuando su servicio va y recupera datos de un servidor, la biblioteca HTTP,
o el módulo HTTP en Angular, admite observables.
Así que cada vez que realice cualquiera de los métodos, get, put, post o
delete, usando HTTP, le darán un
observable que luego puede suscribirse dentro de su servicio.
Y luego transformarlo, y luego dárselo a sus componentes, y
los componentes pueden suscribirse a los observables.
El servicio se proporciona mediante la transformación de las secuencias HTTP.
Y ahí es donde la programación reactiva y el flujo
de datos a través de su aplicación Angular se vuelven muy sencillos.
Del mismo modo, hay un AsyncPipe, que encontrará más adelante en este curso.
Y también la detección de cambios construida alrededor de observables en Angular.
Verá algunos ejemplos de esto en el resto de este curso.
Ahora, volviendo a la pregunta que vimos en la diapositiva anterior.
¿Cómo se toma un observable y lo transforma en otro observable?
He aquí un ejemplo que se encontrará en el ejercicio que sigue a esta conferencia.
Así que aquí, tenemos el parámetro de ruta
dentro de nuestro componente de menú, que utiliza el parámetro de ruta para
proporcionar el valor del plato seleccionado al componente de detalle del plato.
Entonces, el parámetro de ruta se convierte en un observable.
El módulo de enrutador de Angular tiene un servicio ActivatedRoute de actividad que
admite un montón de observables y uno de ellos es los parámetros observables.
Los parámetros observables están vinculados a los parámetros de ruta.
Y así cualquier cambio en los parámetros,
en la URL que encuentre se emitirá como observable.
Ahora, entonces cuando obtienes el observable, para que como puedes ver,
puedes obtener acceso a este observable diciendo que esta ruta params en tu código.
Entonces los parámetros en sí son observables aquí.
Ahora, a este parámetro observable,
puede aplicar un operador como un operador aquí llamado switchmap.
Veremos el uso de esto en el ejercicio.
El operador switchmap toma los parámetros observables.
Y luego transforma los parámetros observables en otro observable que es un plato.
Toma el valor de params, y luego extrae el valor de ID de los params,
que le da acceso al parámetro de ruta, el id, o
el parámetro que ha especificado, y luego lo usa para ir y buscar el plato.
Así que cada vez que cambie el parámetro, resultará en una recuperación de un nuevo plato.
Y así cada vez que cambia el parámetro,
que es equivalente a emitir un nuevo valor por sus parámetros observables.
Que se transforma en buscar el nuevo plato para
que es el ID correspondiente.
Así que el plato se convertirá en otro observable.
Ahora, cuando este plato observable esté disponible, puedes suscribirte a este plato
observable aquí, y obtener el valor del plato.
Y cuando obtengas el valor del plato, entonces puedes tomar el valor del plato, y luego
crea tu variable de plato dentro de tu componente de detalle del plato a ese valor del plato.
Así pues, cualquier cambio en el parámetro de ruta se propaga a través de este operador
switchmap en un observable,
que cuando se observa a través del suscrito,
le permitirá transformar eso y asignarlo a otro plato.
Y cuando esto sucede, tu vista puede actualizarse con
el nuevo plato que se ha obtenido del servicio.
Así que ahora, verá cómo los datos fluyen a través del parámetro de ruta,
a través del operador switchmap, y
en el resultado del cambio de la vista de su componente de detalle de plato.
Esa es la razón por la cual la programación basada observable o la programación reactiva
en Angular se vuelve muy útil para
implementar ciertas características dentro de su aplicación Angular.
Este es uno de esos ejemplos.
Veremos el uso de este ejemplo particular en
el ejercicio que sigue a esta conferencia.
Pensé que haría que sea fácil para
recordar todo esto simplemente cantando esta Oda a Observables.
[MÚSICA]
Deberías cantar esto a la melodía de,
You Can Call Me Al por Paul Simon de la fama de Simon y Garfunkel.
Si te estás dando la vuelta y diciendo, ¿quién es Paul Simon?
Lo siento, generación diferente.
[MÚSICA]