1
00:00:03,609 --> 00:00:09,108
Permítanme ahora darles una breve descripción general de las aplicaciones de una sola página.

2
00:00:09,108 --> 00:00:11,415
¿Qué son las aplicaciones de una sola página?

3
00:00:11,415 --> 00:00:16,080
¿En qué se diferencian de los sitios web que usted podría haber desarrollado anteriormente?

4
00:00:16,080 --> 00:00:21,405
Por ejemplo, el sitio web que desarrollaste en el curso anterior de esta especialización,

5
00:00:21,405 --> 00:00:26,854
donde tenías varias páginas - ¿por qué son interesantes las Aplicaciones de una sola página

6
00:00:26,854 --> 00:00:29,300
y qué es lo que debes tener en cuenta

7
00:00:29,300 --> 00:00:32,548
cuando diseñas Aplicaciones de una sola página?

8
00:00:32,548 --> 00:00:37,606
Esta conferencia no pretende ser un tratado completo sobre Aplicaciones de una sola página,

9
00:00:37,606 --> 00:00:40,159
pero realmente, darle suficiente introducción

10
00:00:40,159 --> 00:00:44,375
para empezar a pensar en Aplicaciones de una sola página,

11
00:00:44,375 --> 00:00:47,509
especialmente en el contexto de Angular.

12
00:00:47,509 --> 00:00:53,409
Antes de entender las aplicaciones de una sola página, demos un paso atrás

13
00:00:53,409 --> 00:00:56,335
y veamos cómo funcionan los sitios web tradicionales.

14
00:00:56,335 --> 00:00:59,695
En los sitios web tradicionales, hasta ahora - si visita un sitio web,

15
00:00:59,695 --> 00:01:02,774
puede que esté solicitando acceso a una página en particular.

16
00:01:02,774 --> 00:01:06,691
Por ejemplo, solicitará una página index.html

17
00:01:06,691 --> 00:01:10,600
cuando navegue al sitio web,

18
00:01:10,600 --> 00:01:12,879
haciendo clic en un enlace

19
00:01:12,879 --> 00:01:19,855
o escribiendo la dirección del sitio web en la barra de direcciones de su navegador.

20
00:01:19,855 --> 00:01:23,950
Por lo general, la página index.html es la primera

21
00:01:23,950 --> 00:01:27,140
que se obtiene cuando visita un sitio web.

22
00:01:27,140 --> 00:01:30,894
Y cuando la página se descargue del servidor a su navegador -

23
00:01:30,894 --> 00:01:33,989
y luego esto se mostrará en su navegador.

24
00:01:33,989 --> 00:01:39,109
Ahora esto puede incluir no sólo la página index.html, sino también otros recursos

25
00:01:39,109 --> 00:01:44,224
que pueden ser necesarios para ser descargados con el fin de construir la página index.html.

26
00:01:44,224 --> 00:01:49,239
En este caso, la página index.html puede requerir recursos adicionales,

27
00:01:49,239 --> 00:01:57,935
como imágenes o datos, para ser descargados antes de que se pueda construir la página de índice.

28
00:01:57,935 --> 00:02:02,980
Pero ahora, posteriormente, si navegas a otra página en tu sitio web

29
00:02:02,980 --> 00:02:07,073
- digamos, por ejemplo, otra página como contactus.html,

30
00:02:07,073 --> 00:02:14,259
esto resultará en que tu navegador envíe otra solicitud al servidor

31
00:02:14,259 --> 00:02:16,930
para buscar esa segunda página.

32
00:02:16,930 --> 00:02:19,960
Así que iniciará una solicitud completa al servidor

33
00:02:19,960 --> 00:02:22,479
y todos los recursos necesarios para construir

34
00:02:22,479 --> 00:02:27,560
la segunda página tendrán que ser descargados del servidor.

35
00:02:27,560 --> 00:02:30,745
Así que a medida que se mueve de una página a otra,

36
00:02:30,745 --> 00:02:34,819
implicará cada nueva página que se cargue desde el servidor

37
00:02:34,819 --> 00:02:37,705
y esto implicaría un tiempo de ida y vuelta al servidor

38
00:02:37,705 --> 00:02:42,099
para obtener todos los recursos necesarios para construir esas páginas.

39
00:02:42,099 --> 00:02:45,025
Ahora imagine que su sitio web tiene muchas páginas.

40
00:02:45,025 --> 00:02:48,310
Entonces, obviamente, cada pieza que su página web

41
00:02:48,310 --> 00:02:54,025
requiera para renderizar requerirá un tiempo completo de ida y vuelta a los servidores.

42
00:02:54,025 --> 00:02:58,685
Lo que usted notaría es - a menudo es que muchas de estas páginas tienen mucho en común.

43
00:02:58,685 --> 00:03:00,444
Tal vez, por ejemplo, el encabezado

44
00:03:00,444 --> 00:03:05,275
y el pie de página y alguna otra información son comunes en todas estas páginas.

45
00:03:05,275 --> 00:03:09,875
Pero aún así, cada nueva solicitud de página requerirá que

46
00:03:09,875 --> 00:03:15,051
- para ir y buscar toda la página del servidor.

47
00:03:15,051 --> 00:03:22,150
Ahora, con el uso del almacenamiento en caché en el sitio del navegador, puede mitigar algunos de estos problemas

48
00:03:22,150 --> 00:03:28,740
reutilizando los recursos ya recuperados de su caché; pero aún así,

49
00:03:28,740 --> 00:03:33,189
cada página nueva a la que navegue requerirá una página entera

50
00:03:33,189 --> 00:03:35,830
para ser recargada desde el sitio del servidor.

51
00:03:35,830 --> 00:03:40,240
Las aplicaciones de una sola página abordan este problema de una manera diferente.

52
00:03:40,240 --> 00:03:44,289
En una aplicación de una sola página, normalmente hemos desarrollado una aplicación web

53
00:03:44,289 --> 00:03:49,955
por lo que cuando el navegador navega al sitio web,

54
00:03:49,955 --> 00:03:55,384
entonces esto solicitará que la aplicación web sea descargada desde el sitio del servidor.

55
00:03:55,384 --> 00:03:59,472
Así que esto estará, por ejemplo, contenido en una página maestra como index.html,

56
00:03:59,472 --> 00:04:02,860
que activará un conjunto completo de activos

57
00:04:02,860 --> 00:04:09,553
que son necesarios para renderizar su aplicación web para ser descargada en su sitio cliente.

58
00:04:09,553 --> 00:04:14,199
Ahora cómo se empaquetan estos activos depende de cómo diseñe su aplicación web

59
00:04:14,199 --> 00:04:18,439
y también del marco que use para diseñar su aplicación web.

60
00:04:18,439 --> 00:04:26,805
Sin embargo, tiene una sola descarga grande al inicio de su aplicación web.

61
00:04:26,805 --> 00:04:32,020
Cambios posteriores al sitio del cliente, por ejemplo, iniciados con un clic en un enlace,

62
00:04:32,020 --> 00:04:36,160
iniciará una nueva solicitud al sitio del servidor; pero en este caso,

63
00:04:36,160 --> 00:04:42,550
muy a menudo, sólo está descargando algunos datos, tal vez en forma de datos JSON,

64
00:04:42,550 --> 00:04:45,745
del sitio del servidor.

65
00:04:45,745 --> 00:04:52,060
Entonces, en este caso, cada uno de estos puede requerir solo acceso al servidor

66
00:04:52,060 --> 00:04:54,839
solo para descargar los datos JSON, por ejemplo,

67
00:04:54,839 --> 00:05:00,009
que luego puede permitirle renderizar completamente la nueva vista

68
00:05:00,009 --> 00:05:03,240
en su aplicación de una sola página.

69
00:05:03,240 --> 00:05:07,329
Así que la descarga inicial de la página, la descarga inicial de la aplicación, por supuesto,

70
00:05:07,329 --> 00:05:11,218
siempre está allí, pero la mayoría de las interacciones posteriores con el servidor

71
00:05:11,218 --> 00:05:17,050
serán simplemente para descargar datos, típicamente en forma de JSON o XML,

72
00:05:17,050 --> 00:05:20,930
dependiendo de cómo diseñe el formato de datos.

73
00:05:20,930 --> 00:05:22,720
Y una vez que los datos se descargan,

74
00:05:22,720 --> 00:05:27,865
esos datos se pueden usar para representar la nueva vista dentro de su aplicación.

75
00:05:27,865 --> 00:05:29,259
Así que en estas circunstancias,

76
00:05:29,259 --> 00:05:33,870
ahorrará mucho tiempo de ida y vuelta al servidor para descargar una gran cantidad de activos.

77
00:05:33,870 --> 00:05:38,680
Por supuesto, la carga inicial de la página requiere cierta cantidad de trabajo por hacer,

78
00:05:38,680 --> 00:05:44,394
pero las solicitudes posteriores pueden ser para cantidades muy pequeñas de datos.

79
00:05:44,394 --> 00:05:52,037
Y esa, de hecho, es la característica significativa de las aplicaciones de una sola página.

80
00:05:52,037 --> 00:05:58,310
Ahora, con la representación previa de algunas de sus vistas en el sitio del servidor en sí,

81
00:05:58,310 --> 00:06:05,925
puede incluso mitigar parte del tiempo de descarga inicial para su aplicación web.

82
00:06:05,925 --> 00:06:07,730
Así que incluso Angular, por ejemplo,

83
00:06:07,730 --> 00:06:13,853
le permite pre-renderizar parte de su primera vista en el sitio del servidor

84
00:06:13,853 --> 00:06:20,783
para permitir la visualización de información al cliente rápidamente,

85
00:06:20,783 --> 00:06:26,995
mientras el resto de la aplicación web está siendo descargado por su navegador.

86
00:06:26,995 --> 00:06:31,314
Así que podemos resumir que Single Page Applications

87
00:06:31,314 --> 00:06:35,060
como una aplicación web en un sitio web que encaja en una sola página - otra vez,

88
00:06:35,060 --> 00:06:40,805
dar o tomar - usted - usted sabe, no lo interprete demasiado literalmente.

89
00:06:40,805 --> 00:06:44,389
Así que no es necesario volver a cargar una página completa.

90
00:06:44,389 --> 00:06:49,620
Así que esa es la característica significativa de una aplicación de una sola página.

91
00:06:49,620 --> 00:06:54,139
Además, las aplicaciones de una sola página le permiten ofrecer una experiencia de usuario

92
00:06:54,139 --> 00:06:59,435
más cercana al trabajo que ven con aplicaciones de escritorio.

93
00:06:59,435 --> 00:07:02,930
Una vez descargada la aplicación web inicial; a partir de entonces,

94
00:07:02,930 --> 00:07:11,475
la mayoría de las otras interacciones parecerían que estás interactuando con una aplicación de escritorio.

95
00:07:11,475 --> 00:07:15,959
Así que para resumir lo que acabamos de aprender, ¿qué es una aplicación de una sola página?

96
00:07:15,959 --> 00:07:21,069
Una aplicación de una sola página es una aplicación web o un sitio web que encaja en una sola página.

97
00:07:21,069 --> 00:07:26,670
No es necesario volver a cargar toda la página cada vez que un usuario interactúe

98
00:07:26,670 --> 00:07:28,362
con la aplicación.

99
00:07:28,362 --> 00:07:34,574
El UX es más como un escritorio o una aplicación nativa.

100
00:07:34,574 --> 00:07:37,199
La mayoría de los recursos necesarios para su aplicación

101
00:07:37,199 --> 00:07:42,699
se descargan en la primera instancia, con la carga de la primera página.

102
00:07:42,699 --> 00:07:45,720
A partir de entonces, sólo se vuelven a dibujar partes de la página,

103
00:07:45,720 --> 00:07:53,540
basado en cómo ocurre la interacción del usuario sin requerir un viaje completo de ida y vuelta al servidor,

104
00:07:53,540 --> 00:07:58,889
para recuperar todos los recursos que necesita.

105
00:07:58,889 --> 00:08:04,644
Por supuesto, esto no viene sin su propio conjunto de cuestiones que necesitan ser abordadas.

106
00:08:04,644 --> 00:08:07,740
Así que cuando diseñas Aplicaciones de una sola página, una de las primeras cosas

107
00:08:07,740 --> 00:08:11,609
que la gente suele cuestionar acerca de las Aplicaciones de una sola página

108
00:08:11,609 --> 00:08:14,444
es que no están optimizadas para los motores de búsqueda.

109
00:08:14,444 --> 00:08:19,225
Así que la optimización de motores de búsqueda es una parte importante que debe abordarse.

110
00:08:19,225 --> 00:08:20,579
Así que si usted tiene motores de búsqueda

111
00:08:20,579 --> 00:08:24,795
que rastrean su sitio web para extraer datos e información de índice,

112
00:08:24,795 --> 00:08:28,889
entonces las aplicaciones de una sola página pueden no ser necesariamente cooperativas en este caso.

113
00:08:28,889 --> 00:08:33,230
Pero incluso la optimización de motores de búsqueda con los marcos de datos actuales,

114
00:08:33,230 --> 00:08:40,680
como Angular, han llegado lejos por el camino que incluso con la aplicación de una sola página,

115
00:08:40,680 --> 00:08:47,940
motores de búsqueda pueden esencialmente indexar una gran cantidad de la información

116
00:08:47,940 --> 00:08:50,621
que su aplicación web sirve.

117
00:08:50,621 --> 00:08:59,009
El segundo problema que se debe abordar es cuánto de la construcción web debe descargarse

118
00:08:59,009 --> 00:09:02,750
al sitio del cliente en lugar del sitio del servidor.

119
00:09:02,750 --> 00:09:07,500
Por lo tanto, el servidor está actuando como una fuente de datos en Aplicaciones de una sola página

120
00:09:07,500 --> 00:09:10,644
y gran parte del trabajo se descarga al sitio del cliente.

121
00:09:10,644 --> 00:09:11,840
Desde una perspectiva,

122
00:09:11,840 --> 00:09:18,782
esto le da una forma mucho más escalable de entregar su aplicación web

123
00:09:18,782 --> 00:09:24,037
a su sitio cliente, porque gran parte del trabajo de renderizado se realiza en el sitio cliente.

124
00:09:24,037 --> 00:09:31,649
Ahora puede optimizar esto en cierta medida para compensar la descarga inicial

125
00:09:31,649 --> 00:09:34,399
de la aplicación web desde el sitio del servidor

126
00:09:34,399 --> 00:09:37,034
haciendo parte de la representación en el sitio del servidor.

127
00:09:37,034 --> 00:09:40,559
Como mencioné, Angular le brinda una oportunidad

128
00:09:40,559 --> 00:09:45,120
para hacer eso con la representación parcial del sitio del servidor

129
00:09:45,120 --> 00:09:48,889
de su vista inicial de su aplicación.

130
00:09:48,889 --> 00:09:53,460
El tercer aspecto es cómo mantener el historial, así que cuando haces clic en un botón Atrás

131
00:09:53,460 --> 00:09:56,789
o un botón Adelante, ¿a dónde llevarías al usuario?

132
00:09:56,789 --> 00:09:59,759
¿Guarda suficiente información

133
00:09:59,759 --> 00:10:06,083
para poder navegar entre las diferentes vistas de tu aplicación y así sucesivamente?

134
00:10:06,083 --> 00:10:08,985
Así que eso es una cosa que debes tener en cuenta.

135
00:10:08,985 --> 00:10:16,975
Por supuesto, debido a que el enrutador angular aprovecha la API de historial de cinco páginas html,

136
00:10:16,975 --> 00:10:21,649
por lo que es capaz de abordar este problema en gran medida.

137
00:10:21,649 --> 00:10:25,139
La última pregunta que tenemos es analítica.

138
00:10:25,139 --> 00:10:29,804
¿Cómo admite el análisis en su página web?

139
00:10:29,804 --> 00:10:33,850
¿Cómo se recopilan los datos analíticos, etc.?

140
00:10:33,850 --> 00:10:39,235
Y también, como he mencionado anteriormente, acelerar la carga inicial de la página

141
00:10:39,235 --> 00:10:44,924
es algo que preocupa cuando está diseñando su aplicación web.

142
00:10:44,924 --> 00:10:46,764
Ahora con Angular, como dije,

143
00:10:46,764 --> 00:10:52,449
haciendo representación parcial en el lado del servidor acelerará la carga inicial de la página

144
00:10:52,449 --> 00:10:57,610
en su sitio cliente mientras que el resto de la aplicación web

145
00:10:57,610 --> 00:11:00,735
se está descargando al sitio cliente.

146
00:11:00,735 --> 00:11:07,120
Así que puede enmascarar un poco del tiempo de descarga inicial para la aplicación web

147
00:11:07,120 --> 00:11:10,730
haciendo representación parcial desde el sitio del servidor.

148
00:11:10,730 --> 00:11:13,701
Con estas ideas básicas en mente,

149
00:11:13,701 --> 00:11:19,120
vamos ahora a explorar cómo Angular soporta Aplicaciones de una sola página.

150
00:11:19,120 --> 00:11:22,450
Ya hemos incorporado el router angular

151
00:11:22,450 --> 00:11:25,375
en nuestra aplicación Angular en el ejercicio anterior.

152
00:11:25,375 --> 00:11:28,879
En los ejercicios posteriores de esta lección

153
00:11:28,879 --> 00:11:34,315
y asignación, completaremos el desarrollo de la Solicitud de Página Única

154
00:11:34,315 --> 00:11:41,139
en la que hemos estado trabajando hasta ahora en este curso.