1
00:00:01,110 --> 00:00:03,600
Ahora, antes de comenzar a aprender sobre React,

2
00:00:03,600 --> 00:00:07,620
De hecho, hagámonos una pregunta muy importante.

3
00:00:07,620 --> 00:00:10,380
¿Por qué los frameworks front-end, como React,

4
00:00:10,380 --> 00:00:12,990
¿Existe realmente en primer lugar?

5
00:00:12,990 --> 00:00:17,160
¿Por qué no simplemente utilizar Vanilla JavaScript para crear nuestras aplicaciones?

6
00:00:17,160 --> 00:00:20,553
Bueno, respondamos esa pregunta en esta conferencia.

7
00:00:21,900 --> 00:00:24,180
Y vamos a empezar desde el principio.

8
00:00:24,180 --> 00:00:27,990
revisando cómo se construía el sitio web en el pasado,

9
00:00:27,990 --> 00:00:30,210
cómo hicimos la transición a una nueva forma

10
00:00:30,210 --> 00:00:34,530
y cómo eso conduce al surgimiento de los frameworks front-end.

11
00:00:34,530 --> 00:00:38,610
Entonces, en el pasado, antes de 2010,

12
00:00:38,610 --> 00:00:42,360
Todos los sitios web siempre se representaron en el servidor.

13
00:00:42,360 --> 00:00:44,130
Entonces, en la renderización del lado del servidor

14
00:00:44,130 --> 00:00:47,580
un sitio web básicamente se ensambla en el backend.

15
00:00:47,580 --> 00:00:52,020
Entonces en un servidor web, basado en datos y plantillas.

16
00:00:52,020 --> 00:00:55,530
El código HTML, CSS y JavaScript resultante.

17
00:00:55,530 --> 00:00:59,430
luego se envía al lado del cliente, por lo que al navegador web

18
00:00:59,430 --> 00:01:01,620
que solicitó la página.

19
00:01:01,620 --> 00:01:04,530
El navegador simplemente toma este código.

20
00:01:04,530 --> 00:01:07,590
y básicamente lo pinta en la pantalla.

21
00:01:07,590 --> 00:01:10,830
Y un ejemplo típico de sitios web renderizados del lado del servidor.

22
00:01:10,830 --> 00:01:14,400
son todos sitios web creados con WordPress.

23
00:01:14,400 --> 00:01:16,950
Ahora, el JavaScript que solía incluirse

24
00:01:16,950 --> 00:01:19,710
en estos sitios web fue inicialmente sólo para

25
00:01:19,710 --> 00:01:22,290
agregar algunas dinámicas simples a la página,

26
00:01:22,290 --> 00:01:24,960
como animaciones simples, efectos de desplazamiento,

27
00:01:24,960 --> 00:01:26,970
y otras cosas así.

28
00:01:26,970 --> 00:01:29,070
Y normalmente una biblioteca muy popular.

29
00:01:29,070 --> 00:01:32,550
en ese momento se usaba llamado jQuery para esto

30
00:01:32,550 --> 00:01:35,760
porque hizo que JavaScript funcionara exactamente de la misma manera

31
00:01:35,760 --> 00:01:38,640
en todos los navegadores en aquel entonces.

32
00:01:38,640 --> 00:01:42,180
Sin embargo, con el tiempo, los desarrolladores empezaron a escribir más

33
00:01:42,180 --> 00:01:45,480
y más código JavaScript para ser ejecutado por el navegador,

34
00:01:45,480 --> 00:01:47,370
hasta que en algún momento estos

35
00:01:47,370 --> 00:01:50,550
se convirtieron en aplicaciones web de pleno derecho,

36
00:01:50,550 --> 00:01:52,590
que luego condujo al ascenso

37
00:01:52,590 --> 00:01:56,100
de las llamadas aplicaciones de una sola página.

38
00:01:56,100 --> 00:01:58,680
Estas son básicamente páginas web que se representan

39
00:01:58,680 --> 00:02:01,710
en el cliente, no en el servidor.

40
00:02:01,710 --> 00:02:04,710
Entonces, en el renderizado del lado del cliente, básicamente el trabajo

41
00:02:04,710 --> 00:02:07,140
de renderizar una página web se desplaza

42
00:02:07,140 --> 00:02:09,990
del servidor al cliente.

43
00:02:09,990 --> 00:02:13,200
Y ahora ya no llamamos a estas páginas web

44
00:02:13,200 --> 00:02:15,480
sino aplicaciones web.

45
00:02:15,480 --> 00:02:19,500
Ahora una aplicación web todavía necesita datos, que normalmente vienen

46
00:02:19,500 --> 00:02:22,950
desde el backend en forma de API.

47
00:02:22,950 --> 00:02:24,750
Y seguro que ya has trabajado

48
00:02:24,750 --> 00:02:27,780
con API como esa, ¿verdad?

49
00:02:27,780 --> 00:02:31,350
Entonces la aplicación consume estos datos API.

50
00:02:31,350 --> 00:02:35,250
y muestra una pantalla para cada vista de la aplicación.

51
00:02:35,250 --> 00:02:38,820
Y estas aplicaciones de una sola página esencialmente se sienten como

52
00:02:38,820 --> 00:02:42,900
si estuviera utilizando una aplicación nativa de escritorio o teléfono.

53
00:02:42,900 --> 00:02:45,840
Para que pueda hacer clic en enlaces o enviar formularios

54
00:02:45,840 --> 00:02:48,360
sin que la página se vuelva a cargar.

55
00:02:48,360 --> 00:02:50,790
Así que técnicamente siempre estás en la misma página.

56
00:02:50,790 --> 00:02:53,313
y de ahí el nombre de aplicación de una sola página.

57
00:02:54,150 --> 00:02:56,580
Ahora, justo antes de dejar esta diapositiva,

58
00:02:56,580 --> 00:02:59,520
Quiero mencionar rápidamente que el renderizado del lado del servidor

59
00:02:59,520 --> 00:03:02,280
en realidad está regresando ahora mismo.

60
00:03:02,280 --> 00:03:04,560
Así que poco a poco se está volviendo moderno, otra vez.

61
00:03:04,560 --> 00:03:07,740
impulsado por marcos que se construyen sobre

62
00:03:07,740 --> 00:03:10,500
de marcos de renderizado del lado del cliente modernos

63
00:03:10,500 --> 00:03:14,730
como Next.js, Remix y muchos otros.

64
00:03:14,730 --> 00:03:17,700
Pero en cualquier caso, todavía tenemos que aprender cómo

65
00:03:17,700 --> 00:03:20,790
para crear aplicaciones de una sola página, por supuesto,

66
00:03:20,790 --> 00:03:24,063
pero ¿queremos hacerlo con Vanilla JavaScript?

67
00:03:25,020 --> 00:03:28,470
Bueno, en realidad no, no queremos eso.

68
00:03:28,470 --> 00:03:31,080
porque en realidad hay varios problemas

69
00:03:31,080 --> 00:03:32,940
con el uso de JavaScript vainilla

70
00:03:32,940 --> 00:03:35,280
para construir aplicaciones a gran escala,

71
00:03:35,280 --> 00:03:37,410
como veremos en un momento.

72
00:03:37,410 --> 00:03:39,840
Pero primero, establezcamos ese edificio.

73
00:03:39,840 --> 00:03:44,310
cualquier aplicación front-end realmente tiene que ver con el manejo de datos

74
00:03:44,310 --> 00:03:48,750
y luego mostrar esos datos en una agradable interfaz de usuario.

75
00:03:48,750 --> 00:03:51,450
Eso es básicamente todo lo que hace una aplicación web.

76
00:03:51,450 --> 00:03:52,980
si tú lo piensas.

77
00:03:52,980 --> 00:03:54,540
Entonces recibe datos,

78
00:03:54,540 --> 00:03:57,630
cambia los datos a medida que el usuario usa la aplicación,

79
00:03:57,630 --> 00:04:01,200
y siempre muestra los datos actuales en la pantalla.

80
00:04:01,200 --> 00:04:03,900
Lo que esto significa es que la tarea más importante

81
00:04:03,900 --> 00:04:07,710
de una aplicación de una sola página y realmente de cualquier aplicación

82
00:04:07,710 --> 00:04:10,830
y el sitio web es para mantener la interfaz de usuario

83
00:04:10,830 --> 00:04:15,330
sincronizado con los datos, o en otras palabras, es asegurarse de

84
00:04:15,330 --> 00:04:20,070
que la interfaz de usuario siempre muestre el estado actual de los datos.

85
00:04:20,070 --> 00:04:23,460
Ahora resulta que mostrar los datos correctos

86
00:04:23,460 --> 00:04:26,160
y asegurándose de que se mantenga correcto

87
00:04:26,160 --> 00:04:30,810
con el tiempo es en realidad un problema realmente difícil de resolver.

88
00:04:30,810 --> 00:04:32,610
Y para entender por qué es eso

89
00:04:32,610 --> 00:04:36,540
echemos un vistazo a esta aplicación de Airbnb.

90
00:04:36,540 --> 00:04:41,370
Entonces, en esta interfaz, podemos identificar algunos datos.

91
00:04:41,370 --> 00:04:44,640
Primero, tenemos esta lista de apartamentos,

92
00:04:44,640 --> 00:04:46,830
luego tenemos una barra de búsqueda.

93
00:04:46,830 --> 00:04:50,760
Tenemos algunos datos sobre los filtros que se están aplicando.

94
00:04:50,760 --> 00:04:53,310
Y también tenemos este dato aquí,

95
00:04:53,310 --> 00:04:56,400
que indica si la búsqueda debe actualizarse

96
00:04:56,400 --> 00:04:58,620
a medida que el usuario elimina el mapa.

97
00:04:58,620 --> 00:05:03,240
Y todo esto son datos de los que depende el up, ¿no?

98
00:05:03,240 --> 00:05:06,900
Y, de hecho, en la aplicación Airbnb del mundo real.

99
00:05:06,900 --> 00:05:09,450
hay tantos datos.

100
00:05:09,450 --> 00:05:13,110
Entonces esta lista aquí ni siquiera es toda.

101
00:05:13,110 --> 00:05:17,760
Pero de todos modos, como sabemos, todos estos datos deben estar siempre

102
00:05:17,760 --> 00:05:20,490
mantenido sincronizado con la interfaz de usuario

103
00:05:20,490 --> 00:05:23,160
y también con los demás datos,

104
00:05:23,160 --> 00:05:26,700
porque están todos interconectados.

105
00:05:26,700 --> 00:05:29,700
Por ejemplo, cuando cambiamos los datos sobre la ubicación.

106
00:05:29,700 --> 00:05:33,960
o fechas, entonces la interfaz de usuario debe mostrar esas nuevas fechas

107
00:05:33,960 --> 00:05:37,710
y también es necesario actualizar la lista de apartamentos.

108
00:05:37,710 --> 00:05:41,280
U otro ejemplo, el mapa necesita mostrar la ubicación.

109
00:05:41,280 --> 00:05:42,630
de los apartamentos.

110
00:05:42,630 --> 00:05:44,970
Y por tanto, cuando los apartamentos cambian.

111
00:05:44,970 --> 00:05:47,100
el mapa también debe cambiar.

112
00:05:47,100 --> 00:05:49,710
Y lo mismo debería ocurrir al revés.

113
00:05:49,710 --> 00:05:52,560
Entonces, cuando se mueve el mapa, la lista de apartamentos

114
00:05:52,560 --> 00:05:56,670
debería cambiar también, pero sólo cuando el usuario haya

115
00:05:56,670 --> 00:05:59,940
previamente hizo clic en la casilla de verificación verde.

116
00:05:59,940 --> 00:06:03,540
Entonces estos datos aquí están aún más interconectados.

117
00:06:03,540 --> 00:06:06,120
y puede convertirse en un verdadero desastre.

118
00:06:06,120 --> 00:06:09,510
Ahora, como nota al margen, en una aplicación del mundo real,

119
00:06:09,510 --> 00:06:14,280
A cada uno de estos datos lo llamamos parte de estado.

120
00:06:14,280 --> 00:06:16,980
Entonces, basándome en estos ejemplos, les mostré

121
00:06:16,980 --> 00:06:19,410
Yo diría que sin un marco.

122
00:06:19,410 --> 00:06:22,050
sería prácticamente imposible mantener

123
00:06:22,050 --> 00:06:27,050
esta enorme cantidad de datos sincronizados con esta interfaz de usuario súper compleja.

124
00:06:27,480 --> 00:06:30,600
Pero aún así, quizás te preguntes, ¿por qué?

125
00:06:30,600 --> 00:06:32,880
¿Por qué sería tan difícil construir algo?

126
00:06:32,880 --> 00:06:35,133
¿Te gusta esto con Vanilla JavaScript?

127
00:06:36,840 --> 00:06:40,620
Bueno, todo se reduce a dos grandes aspectos.

128
00:06:40,620 --> 00:06:43,350
La primera es que construir una interfaz compleja

129
00:06:43,350 --> 00:06:46,980
con JavaScript básico solo se requieren grandes cantidades

130
00:06:46,980 --> 00:06:50,460
de recorrido y manipulación DOM directo.

131
00:06:50,460 --> 00:06:53,010
Como en este código aquí, donde tenemos

132
00:06:53,010 --> 00:06:57,870
selección manual de elementos, cambio de clases, recorrido DOM

133
00:06:57,870 --> 00:07:01,860
e incluso manipulación de texto y estilos CSS.

134
00:07:01,860 --> 00:07:05,760
y esto está garantizado que se convertirá en una absoluta pesadilla.

135
00:07:05,760 --> 00:07:08,280
en una aplicación compleja como Airbnb,

136
00:07:08,280 --> 00:07:11,520
porque nuestro código sería extremadamente complejo

137
00:07:11,520 --> 00:07:15,240
y muy difícil de entender, y probablemente simplemente terminemos

138
00:07:15,240 --> 00:07:19,053
con un enorme lío de código de espagueti enredado.

139
00:07:19,890 --> 00:07:22,830
Entonces este es el primer problema.

140
00:07:22,830 --> 00:07:24,210
El segundo gran problema es

141
00:07:24,210 --> 00:07:27,300
que en las aplicaciones típicas de Vanilla JavaScript,

142
00:07:27,300 --> 00:07:30,690
estado como texto simple o números

143
00:07:30,690 --> 00:07:34,410
a menudo simplemente se almacenan directamente en el DOM.

144
00:07:34,410 --> 00:07:37,620
Entonces, directamente en los propios elementos HTML,

145
00:07:37,620 --> 00:07:41,280
en lugar de en un lugar central de la aplicación.

146
00:07:41,280 --> 00:07:44,160
El resultado es que terminamos con muchas partes.

147
00:07:44,160 --> 00:07:48,240
de que la aplicación acceda y cambie ese estado DOM directamente,

148
00:07:48,240 --> 00:07:51,900
lo que hace que el código espagueti sea aún más difícil de entender.

149
00:07:51,900 --> 00:07:56,280
Y lo que es peor, seguramente introducirá muchos errores.

150
00:07:56,280 --> 00:07:57,753
en nuestra aplicación.

151
00:07:58,963 --> 00:08:01,053
Y nadie quiere errores, ¿verdad?

152
00:08:02,070 --> 00:08:05,040
Ahora, por supuesto, podrías intentar resolver estos problemas.

153
00:08:05,040 --> 00:08:08,100
por tu cuenta, pero luego terminarás creando

154
00:08:08,100 --> 00:08:11,550
su propio marco, que muy probablemente

155
00:08:11,550 --> 00:08:14,580
ser mucho peor que todos los marcos bien establecidos

156
00:08:14,580 --> 00:08:16,590
que ya existen.

157
00:08:16,590 --> 00:08:19,450
Entonces, en este punto, también podrías usar

158
00:08:20,379 --> 00:08:22,860
un marco probado en batalla como React.

159
00:08:22,860 --> 00:08:26,670
Ahora bien, ahora que sabemos por qué es tan difícil escribir

160
00:08:26,670 --> 00:08:29,790
una aplicación de una sola página con solo JavaScript,

161
00:08:29,790 --> 00:08:32,130
podemos responder la pregunta fundamental

162
00:08:32,130 --> 00:08:34,740
que preguntamos al principio.

163
00:08:34,740 --> 00:08:39,240
Entonces, ¿por qué existen realmente los frameworks front-end?

164
00:08:39,240 --> 00:08:42,090
Bueno, ya respondimos esa pregunta.

165
00:08:42,090 --> 00:08:44,700
a lo largo de esta conferencia.

166
00:08:44,700 --> 00:08:48,930
Entonces, la gran razón fundamental por la que existen estos marcos es

167
00:08:48,930 --> 00:08:51,030
porque mantener una interfaz de usuario

168
00:08:51,030 --> 00:08:54,300
sincronizar los datos es muy difícil,

169
00:08:54,300 --> 00:08:56,640
y también es mucho trabajo.

170
00:08:56,640 --> 00:09:01,260
Básicamente, marcos como Angular, React o View.

171
00:09:01,260 --> 00:09:04,290
tome este arduo trabajo de sincronizar datos

172
00:09:04,290 --> 00:09:08,220
con la interfaz de usuario lejos de nosotros los desarrolladores.

173
00:09:08,220 --> 00:09:10,770
Entonces resuelven este problema realmente difícil.

174
00:09:10,770 --> 00:09:14,280
para que los desarrolladores podamos centrarnos sólo en los datos

175
00:09:14,280 --> 00:09:18,060
y en la construcción de nuestras propias interfaces de usuario.

176
00:09:18,060 --> 00:09:20,640
Ahora bien, diferentes marcos tienen diferentes enfoques.

177
00:09:20,640 --> 00:09:22,950
para hacer esto, pero todos son similares

178
00:09:22,950 --> 00:09:27,750
en el hecho de que mantienen la interfaz de usuario y los datos sincronizados a lo largo del tiempo.

179
00:09:27,750 --> 00:09:31,020
Ahora, otra cosa extremadamente valiosa que los marcos

180
00:09:31,020 --> 00:09:34,620
nos dan, es el hecho de que básicamente hacen cumplir

181
00:09:34,620 --> 00:09:38,880
una forma correcta de estructurar y escribir código.

182
00:09:38,880 --> 00:09:42,870
Básicamente, los autores de cada uno de estos marcos

183
00:09:42,870 --> 00:09:46,500
se le ocurrió una buena manera de estructurar aplicaciones,

184
00:09:46,500 --> 00:09:49,260
para que otros desarrolladores puedan seguir estos

185
00:09:49,260 --> 00:09:52,590
convenciones también, para construir mejores aplicaciones

186
00:09:52,590 --> 00:09:56,760
Con suerte, con mucho menos código espagueti.

187
00:09:56,760 --> 00:10:01,170
Finalmente, los frameworks brindan a los desarrolladores, y especialmente a los equipos

188
00:10:01,170 --> 00:10:04,680
una forma coherente de crear aplicaciones web.

189
00:10:04,680 --> 00:10:08,370
De esta manera, todos en el equipo aportarán su parte.

190
00:10:08,370 --> 00:10:12,000
de la aplicación con el mismo estilo que todos los demás,

191
00:10:12,000 --> 00:10:13,800
que al final creará

192
00:10:13,800 --> 00:10:17,370
una base de código y un producto más consistentes.

193
00:10:17,370 --> 00:10:18,840
Y ahí tienes,

194
00:10:18,840 --> 00:10:21,630
Esta es la razón por la que el desarrollo web moderno lo es todo.

195
00:10:21,630 --> 00:10:23,583
sobre los marcos de JavaScript.