1
00:00:00,180 --> 00:00:06,480
Vamos a ver una pequeña introducción a los observables que parte del Happy reactive streams de JavaScript

2
00:00:06,600 --> 00:00:08,820
que también se le conoce como RX 10.

3
00:00:08,910 --> 00:00:14,270
Es una librería en JavaScript que nos permite implementar programación reactiva en Angular.

4
00:00:14,410 --> 00:00:20,340
Bueno, se integra y es para traja con datos con flujos que puede que vengan no de forma inmediata.

5
00:00:20,400 --> 00:00:22,980
Puede tener un deleite algún tiempo de espera.

6
00:00:23,070 --> 00:00:23,400
En fin.

7
00:00:23,520 --> 00:00:29,820
Entonces la idea trabajar con eventos, suscribirnos y estar pendiente escuchando cuando se emitan estos

8
00:00:29,820 --> 00:00:30,900
datos de flujo.

9
00:00:30,990 --> 00:00:31,770
Este streams.

10
00:00:31,890 --> 00:00:33,900
Entonces cuando se emite hay tema que implementar.

11
00:00:33,900 --> 00:00:40,680
Un código que se le conoce como un observador o centinela, que es un fragmento de código que está pendiente

12
00:00:40,770 --> 00:00:43,380
escuchando y se encarga de ejecutar algo.

13
00:00:43,470 --> 00:00:45,180
Realizar un proceso.

14
00:00:45,240 --> 00:00:46,500
Cuando se reciben los datos.

15
00:00:46,500 --> 00:00:48,990
Cuando llegan, entonces el observable es el evento.

16
00:00:49,050 --> 00:00:50,790
El observador es el centinela.

17
00:00:50,850 --> 00:00:56,490
Nuestro código que maneja estos datos, que lo recibe el observable, emite estos datos.

18
00:00:56,580 --> 00:01:02,490
Entonces, para resumir un observador, nuestro código reacciona a cualquier elemento de este flujo

19
00:01:02,580 --> 00:01:05,970
o secuencia de elementos que se esté metiendo en este observable.

20
00:01:06,090 --> 00:01:07,830
Y tenemos que suscribirnos.

21
00:01:08,870 --> 00:01:11,570
Pero bien, veamos las características de los observables.

22
00:01:11,630 --> 00:01:15,740
Primero es asíncrono, nos sirve para trabajar tareas que son asíncronas.

23
00:01:15,840 --> 00:01:16,940
Bueno, lo típico.

24
00:01:17,390 --> 00:01:21,680
Peticiones http consumo de api rest a un piquín, por ejemplo.

25
00:01:21,750 --> 00:01:23,300
Y esto podría tener un deeley.

26
00:01:23,390 --> 00:01:24,050
Podría tardar.

27
00:01:24,110 --> 00:01:29,480
Entonces, por eso lo manejamos de esta forma, de forma reactiva, con una suscripción y con un observador

28
00:01:29,570 --> 00:01:30,890
que básicamente es nuestro código.

29
00:01:31,010 --> 00:01:32,420
Ese es el escenario típico.

30
00:01:32,510 --> 00:01:34,760
Pero bueno, no necesariamente tiene que ser así.

31
00:01:34,850 --> 00:01:40,670
También podemos implementar estos observable para cualquier trabajo o tarea que queramos ejecutar y

32
00:01:40,670 --> 00:01:43,790
esperar una respuesta que no viene de forma inmediata.

33
00:01:43,910 --> 00:01:45,890
Es decir, que puede tener algún delay.

34
00:01:46,010 --> 00:01:51,350
O bien, por ejemplo, si en otra parte de nuestro código, de nuestra aplicación, en otro componente

35
00:01:51,470 --> 00:01:55,220
se realiza un cambio, en otros datos se gatilla un evento.

36
00:01:55,280 --> 00:02:00,740
Bueno, también podemos suscribirnos a este evento, a este observable y cuando se dispare, cuando

37
00:02:00,830 --> 00:02:06,560
lo recibamos ahí, manejar alguna tarea con este nuevo dato, con este nuevo cambio que se acaba de

38
00:02:06,560 --> 00:02:07,130
ejecutar.

39
00:02:07,250 --> 00:02:12,800
Entonces no solamente es para Pierrette, sino que también lo podemos utilizar dentro de nuestra aplicación

40
00:02:12,830 --> 00:02:18,350
para manejar cambios, para estar pendiente a estos cambios en nuestro código y ser notificado cuando

41
00:02:18,440 --> 00:02:19,400
algo suceda.

42
00:02:19,490 --> 00:02:23,720
Bueno, ejemplos hay muchos contadores, intervalos de tiempo.

43
00:02:23,850 --> 00:02:31,010
Bueno, un ejemplo típico cuando utilizamos Event Matter de Angular, podemos crear un observable a

44
00:02:31,010 --> 00:02:32,420
través de un evento.

45
00:02:32,540 --> 00:02:38,330
Evento que se dispara en otro componente y en otra parte de nuestra aplicación podemos estar pendiente

46
00:02:38,480 --> 00:02:39,110
a este cambio.

47
00:02:39,200 --> 00:02:42,290
Otra característica flujo de datos o stream.

48
00:02:42,440 --> 00:02:48,140
Cuando nos suscribimos podríamos estar escuchando o esperar que se emita una gran cantidad elementos,

49
00:02:48,260 --> 00:02:53,000
una secuencia o bien un solo dato que se emite finalmente como una corriente.

50
00:02:53,010 --> 00:02:55,820
También un ejemplo o una alegoría.

51
00:02:55,910 --> 00:03:01,100
Podría ser un típico proceso de fábrica donde tenemos una correa transportadora con varios productos.

52
00:03:01,370 --> 00:03:07,820
Bueno, cada uno tu producto es un item de algo y se puede manejar como un stream y tenemos distintas

53
00:03:07,880 --> 00:03:11,570
estaciones de trabajo que recibimos estos productos y lo empaquetamos.

54
00:03:11,810 --> 00:03:18,140
Realizamos una tarea con este producto en otra estación de trabajo, le ensamblamos otra cosa y a fin

55
00:03:18,380 --> 00:03:20,570
otra característica que son concurrentes.

56
00:03:20,600 --> 00:03:22,990
Por tanto, no bloquean otro proceso.

57
00:03:23,060 --> 00:03:29,150
Por lo tanto cada observable se ejecuta en su propio proceso y no interfiere no lo a los demás.

58
00:03:29,270 --> 00:03:34,310
Recordemos que cuando nos suscribimos a estos cereales que se emiten los datos, tenemos un centinela,

59
00:03:34,400 --> 00:03:41,150
un observador y el observador se encarga de reaccionar a cualquier elemento que se vaya emitiendo en

60
00:03:41,150 --> 00:03:45,620
este observable, y esa tarea se ejecuta en un proceso distinto al resto.

61
00:03:45,680 --> 00:03:49,670
Por lo tanto es concurrente, maneja concurrencia, no urquía las tareas.

62
00:03:49,760 --> 00:03:54,950
En otras palabras, no bloquea nuestra aplicación o nuestro componente o demás observable que se están

63
00:03:54,950 --> 00:03:55,610
ejecutando.

64
00:03:55,640 --> 00:04:00,860
Pues Troi pendiente escuchando atento pero en un proceso separado no interrumpe el resto.

65
00:04:01,820 --> 00:04:03,860
Un observable no se ejecuta.

66
00:04:03,950 --> 00:04:06,260
No pasa nada si no nos suscribimos.

67
00:04:06,350 --> 00:04:08,540
Es decir, podríamos invocar un observable.

68
00:04:08,570 --> 00:04:14,090
Pero mientras no invoquemos el método subscribe, mientras no implementemos nuestro código, nuestro

69
00:04:14,090 --> 00:04:17,340
observador o centinela, bueno, simplemente no hace nada.

70
00:04:17,450 --> 00:04:24,740
Entonces por eso muy importante siempre el método suscribe suscribirse a este flujo reactivo a este

71
00:04:24,740 --> 00:04:25,190
observable.

72
00:04:25,280 --> 00:04:29,690
Acá en el ejemplo tenemos varios elementos, cuatro elementos que se están emitiendo.

73
00:04:29,780 --> 00:04:34,580
Esto sucede cuando nos suscribimos, cuando no sufrimos, recién se comienzan a emitir estos elementos.

74
00:04:35,530 --> 00:04:41,140
Pero también podemos aplicar operadores en nuestro flujo, en nuestros datos, por ejemplo, realizar

75
00:04:41,200 --> 00:04:43,450
algún cambio, modificar el flujo.

76
00:04:43,510 --> 00:04:47,110
Por ejemplo, se están emitiendo círculos, varios círculos.

77
00:04:47,200 --> 00:04:53,380
Obtenemos cada círculo y mediante el operador map pueden convertir este círculo a un stream de rombos.

78
00:04:53,410 --> 00:04:56,230
Perdón Pentagono y esto se aplica también a los objetos.

79
00:04:56,350 --> 00:05:02,380
Es decir, podríamos tener un stream, por ejemplo del tipo string, un string por ejemplo, con nombre

80
00:05:02,440 --> 00:05:04,900
y podríamos convertir esto en otro tipo dato.

81
00:05:04,960 --> 00:05:09,670
Por ejemplo, en objetos del tipo usuario ya con un tipo más específico.

82
00:05:09,790 --> 00:05:10,900
Entonces podemos convertir.

83
00:05:10,990 --> 00:05:12,070
Ya sea de tipo dato.

84
00:05:12,160 --> 00:05:17,440
O bien podemos tomar un objeto y le podemos asignar valores, realizar cálculos, guardar información

85
00:05:17,530 --> 00:05:20,620
extra en atributos o modificar atributos.

86
00:05:20,710 --> 00:05:25,990
EFFI Pero así como tenemos el MAP para convertir datos, también tenemos muchos operadores.

87
00:05:26,020 --> 00:05:28,570
Por ejemplo, el filter para filtrar, por ejemplo.

88
00:05:28,570 --> 00:05:32,040
Acá quiero filtrar solamente lo pentágonos pero de color naranja.

89
00:05:32,170 --> 00:05:35,290
Recordemos que convertimos los círculo en pentágonos.

90
00:05:35,380 --> 00:05:40,300
Yo requiero filtrar solamente aquellos que sean de color naranja y el resto lo omitimos.

91
00:05:40,360 --> 00:05:45,310
En el flujo se modifica el flujo, pero filtrando los datos y así tenemos un montón de operadores.

92
00:05:45,340 --> 00:05:51,430
Por ejemplo, el retri que para intentar por ejemplo ocurre un error en nuestra comunicación o en el

93
00:05:51,430 --> 00:05:54,550
flujo y quiero volver a intentar ejecutar estos cerval.

94
00:05:54,640 --> 00:05:58,780
Pero también podría ser un error de comunicación de delay que está bien.

95
00:05:58,870 --> 00:06:03,040
El rey otroy lo podríamos resolver, pero también podría ser un error mucho más complicado.

96
00:06:03,130 --> 00:06:08,580
Un error 500 en nuestra aplicación en nuestro Aiken, que puede ser a nivel de código o lo que sea.

97
00:06:08,680 --> 00:06:09,580
No nota levantada.

98
00:06:09,670 --> 00:06:09,970
En fin.

99
00:06:10,060 --> 00:06:12,730
Entonces vamos a estar intentando una y otra vez.

100
00:06:12,790 --> 00:06:16,430
Podríamos tener un límite, por ejemplo, que intente hasta cinco veces.

101
00:06:16,450 --> 00:06:21,040
Por ejemplo, también tenemos otro operadores que son muchos para trabajar con intervalo de tiempo,

102
00:06:21,100 --> 00:06:22,390
con cálculo matemático.

103
00:06:22,420 --> 00:06:28,780
Por ejemplo, si se emiten números, calcular el máximo, el mínimo, el count para contar, el zum

104
00:06:28,840 --> 00:06:29,500
para sumar.

105
00:06:29,550 --> 00:06:36,040
Bueno, siempre cuando se trata de numéricos un flujo con tipo numérico, pero también puedo concatenar,

106
00:06:36,130 --> 00:06:37,870
es decir, combinar dos flujos.

107
00:06:37,930 --> 00:06:41,440
También podemos repetir dos o varias veces el mismo flujo.

108
00:06:41,540 --> 00:06:45,280
En fin, hay muchas operadores que podemos trabajar para manejo de error también.

109
00:06:45,340 --> 00:06:47,080
Por ejemplo, el catch error.

110
00:06:48,020 --> 00:06:50,120
Justamente manejo, error y reintentar.

111
00:06:50,210 --> 00:06:55,820
Bueno, con el catch error puedo manejar los errores, podemos hacer algo, por ejemplo, ocurre algo,

112
00:06:55,910 --> 00:07:01,490
capturamos esta sección y lo manejamos en vez de que se interrumpa este componente que se comunica con

113
00:07:01,490 --> 00:07:02,210
un observable.

114
00:07:02,240 --> 00:07:08,870
Podríamos dar un mensaje al usuario, un mensaje de advertencia o de alerta y que ese componente continúe

115
00:07:08,870 --> 00:07:10,250
con la ejecución normal.

116
00:07:10,310 --> 00:07:14,930
Solamente muestro mensaje de error al usuario, pero todo lo demás puede seguir funcionando sin ningún

117
00:07:14,930 --> 00:07:15,290
problema.

118
00:07:15,380 --> 00:07:19,400
Y acá es cuando podemos aplicar, por ejemplo, el retrate reintentar.

119
00:07:20,450 --> 00:07:27,050
Entonces ocurre el error y podemos volver a intentar o insistir en ejecutar este observable bien.

120
00:07:27,270 --> 00:07:29,090
Y también pueden ser infinitos.

121
00:07:29,180 --> 00:07:32,960
Bueno, lo típico es que hagan finito comunicara con el Wacken.

122
00:07:33,080 --> 00:07:38,030
El Wacken nos retorna, por ejemplo, un listado de algo o el detalle de algo.

123
00:07:38,120 --> 00:07:43,910
Bueno, cuando se resuelve todo retorna a la lista y se completa el observable e termina el proceso.

124
00:07:43,940 --> 00:07:45,770
Está molesto, pero también podría ser infinito.

125
00:07:45,860 --> 00:07:52,490
Nos podríamos suscribir a un evento que esté emitiendo mensaje de alerta de forma indeterminada y así

126
00:07:52,490 --> 00:07:55,520
como traja en la mayoría de las redes sociales Instagram, Facebook.

127
00:07:55,580 --> 00:08:02,060
Cada vez que alguien publica algo bueno, nosotros estamos recibiendo notificaciones y eso es siempre,

128
00:08:02,120 --> 00:08:02,450
siempre.

129
00:08:02,450 --> 00:08:07,800
La aplicación está escuchando notificaciones del usuario y la vamos recibiendo, pero muchas veces y

130
00:08:07,820 --> 00:08:14,270
la gran mayoría son finitos, es decir, un proceso que realiza alguna tarea, se emite algún dato o

131
00:08:14,270 --> 00:08:18,650
una secuencia y finaliza, se completa y ahí se invoca por debajo.

132
00:08:18,770 --> 00:08:23,030
El método complet del observable y finaliza todo, todo correctamente.

133
00:08:23,150 --> 00:08:28,370
Otra característica súper importante de los observable que se pueden cancelar en cualquier momento invocando

134
00:08:28,370 --> 00:08:30,770
el método aun suscribe y finaliza.

135
00:08:30,890 --> 00:08:34,280
El observable no se sigue ejecutando y tal vez son inmutable.

136
00:08:34,280 --> 00:08:37,970
Cada observable, cada flujo es inmutable en sí mismo.

137
00:08:38,050 --> 00:08:41,300
Esto quiere decir que cree que modificamos el flujo con un operador.

138
00:08:41,390 --> 00:08:43,940
Lo que hace es no modificar el flujo original.

139
00:08:44,030 --> 00:08:50,540
El flujo original no cambia lo que hace retornar un nuevo flujo, un nuevo observable con los nuevos

140
00:08:50,540 --> 00:08:54,710
datos, con los datos modificados, ya sea con el MAPP, con el filter, con el con Catt, en fin,

141
00:08:54,740 --> 00:08:57,020
con cualquier operador que modifique los datos.

142
00:08:57,140 --> 00:09:01,340
Siempre retorna un nuevo observable con estos cambios y el anterior se mantiene tal cual.

143
00:09:01,430 --> 00:09:06,140
Siempre podemos volver a los datos originales y esto sería la catalítica más importante.

144
00:09:06,260 --> 00:09:08,150
Y continuamos la siguiente clase.