Permítanme ahora darles una breve descripción general de las aplicaciones de una sola página.
¿Qué son las aplicaciones de una sola página?
¿En qué se diferencian de los sitios web que usted podría haber desarrollado anteriormente?
Por ejemplo, el sitio web que desarrollaste en el curso anterior de esta especialización,
donde tenías varias páginas - ¿por qué son interesantes las Aplicaciones de una sola página
y qué es lo que debes tener en cuenta
cuando diseñas Aplicaciones de una sola página?
Esta conferencia no pretende ser un tratado completo sobre Aplicaciones de una sola página,
pero realmente, darle suficiente introducción
para empezar a pensar en Aplicaciones de una sola página,
especialmente en el contexto de Angular.
Antes de entender las aplicaciones de una sola página, demos un paso atrás
y veamos cómo funcionan los sitios web tradicionales.
En los sitios web tradicionales, hasta ahora - si visita un sitio web,
puede que esté solicitando acceso a una página en particular.
Por ejemplo, solicitará una página index.html
cuando navegue al sitio web,
haciendo clic en un enlace
o escribiendo la dirección del sitio web en la barra de direcciones de su navegador.
Por lo general, la página index.html es la primera
que se obtiene cuando visita un sitio web.
Y cuando la página se descargue del servidor a su navegador -
y luego esto se mostrará en su navegador.
Ahora esto puede incluir no sólo la página index.html, sino también otros recursos
que pueden ser necesarios para ser descargados con el fin de construir la página index.html.
En este caso, la página index.html puede requerir recursos adicionales,
como imágenes o datos, para ser descargados antes de que se pueda construir la página de índice.
Pero ahora, posteriormente, si navegas a otra página en tu sitio web
- digamos, por ejemplo, otra página como contactus.html,
esto resultará en que tu navegador envíe otra solicitud al servidor
para buscar esa segunda página.
Así que iniciará una solicitud completa al servidor
y todos los recursos necesarios para construir
la segunda página tendrán que ser descargados del servidor.
Así que a medida que se mueve de una página a otra,
implicará cada nueva página que se cargue desde el servidor
y esto implicaría un tiempo de ida y vuelta al servidor
para obtener todos los recursos necesarios para construir esas páginas.
Ahora imagine que su sitio web tiene muchas páginas.
Entonces, obviamente, cada pieza que su página web
requiera para renderizar requerirá un tiempo completo de ida y vuelta a los servidores.
Lo que usted notaría es - a menudo es que muchas de estas páginas tienen mucho en común.
Tal vez, por ejemplo, el encabezado
y el pie de página y alguna otra información son comunes en todas estas páginas.
Pero aún así, cada nueva solicitud de página requerirá que
- para ir y buscar toda la página del servidor.
Ahora, con el uso del almacenamiento en caché en el sitio del navegador, puede mitigar algunos de estos problemas
reutilizando los recursos ya recuperados de su caché; pero aún así,
cada página nueva a la que navegue requerirá una página entera
para ser recargada desde el sitio del servidor.
Las aplicaciones de una sola página abordan este problema de una manera diferente.
En una aplicación de una sola página, normalmente hemos desarrollado una aplicación web
por lo que cuando el navegador navega al sitio web,
entonces esto solicitará que la aplicación web sea descargada desde el sitio del servidor.
Así que esto estará, por ejemplo, contenido en una página maestra como index.html,
que activará un conjunto completo de activos
que son necesarios para renderizar su aplicación web para ser descargada en su sitio cliente.
Ahora cómo se empaquetan estos activos depende de cómo diseñe su aplicación web
y también del marco que use para diseñar su aplicación web.
Sin embargo, tiene una sola descarga grande al inicio de su aplicación web.
Cambios posteriores al sitio del cliente, por ejemplo, iniciados con un clic en un enlace,
iniciará una nueva solicitud al sitio del servidor; pero en este caso,
muy a menudo, sólo está descargando algunos datos, tal vez en forma de datos JSON,
del sitio del servidor.
Entonces, en este caso, cada uno de estos puede requerir solo acceso al servidor
solo para descargar los datos JSON, por ejemplo,
que luego puede permitirle renderizar completamente la nueva vista
en su aplicación de una sola página.
Así que la descarga inicial de la página, la descarga inicial de la aplicación, por supuesto,
siempre está allí, pero la mayoría de las interacciones posteriores con el servidor
serán simplemente para descargar datos, típicamente en forma de JSON o XML,
dependiendo de cómo diseñe el formato de datos.
Y una vez que los datos se descargan,
esos datos se pueden usar para representar la nueva vista dentro de su aplicación.
Así que en estas circunstancias,
ahorrará mucho tiempo de ida y vuelta al servidor para descargar una gran cantidad de activos.
Por supuesto, la carga inicial de la página requiere cierta cantidad de trabajo por hacer,
pero las solicitudes posteriores pueden ser para cantidades muy pequeñas de datos.
Y esa, de hecho, es la característica significativa de las aplicaciones de una sola página.
Ahora, con la representación previa de algunas de sus vistas en el sitio del servidor en sí,
puede incluso mitigar parte del tiempo de descarga inicial para su aplicación web.
Así que incluso Angular, por ejemplo,
le permite pre-renderizar parte de su primera vista en el sitio del servidor
para permitir la visualización de información al cliente rápidamente,
mientras el resto de la aplicación web está siendo descargado por su navegador.
Así que podemos resumir que Single Page Applications
como una aplicación web en un sitio web que encaja en una sola página - otra vez,
dar o tomar - usted - usted sabe, no lo interprete demasiado literalmente.
Así que no es necesario volver a cargar una página completa.
Así que esa es la característica significativa de una aplicación de una sola página.
Además, las aplicaciones de una sola página le permiten ofrecer una experiencia de usuario
más cercana al trabajo que ven con aplicaciones de escritorio.
Una vez descargada la aplicación web inicial; a partir de entonces,
la mayoría de las otras interacciones parecerían que estás interactuando con una aplicación de escritorio.
Así que para resumir lo que acabamos de aprender, ¿qué es una aplicación de una sola página?
Una aplicación de una sola página es una aplicación web o un sitio web que encaja en una sola página.
No es necesario volver a cargar toda la página cada vez que un usuario interactúe
con la aplicación.
El UX es más como un escritorio o una aplicación nativa.
La mayoría de los recursos necesarios para su aplicación
se descargan en la primera instancia, con la carga de la primera página.
A partir de entonces, sólo se vuelven a dibujar partes de la página,
basado en cómo ocurre la interacción del usuario sin requerir un viaje completo de ida y vuelta al servidor,
para recuperar todos los recursos que necesita.
Por supuesto, esto no viene sin su propio conjunto de cuestiones que necesitan ser abordadas.
Así que cuando diseñas Aplicaciones de una sola página, una de las primeras cosas
que la gente suele cuestionar acerca de las Aplicaciones de una sola página
es que no están optimizadas para los motores de búsqueda.
Así que la optimización de motores de búsqueda es una parte importante que debe abordarse.
Así que si usted tiene motores de búsqueda
que rastrean su sitio web para extraer datos e información de índice,
entonces las aplicaciones de una sola página pueden no ser necesariamente cooperativas en este caso.
Pero incluso la optimización de motores de búsqueda con los marcos de datos actuales,
como Angular, han llegado lejos por el camino que incluso con la aplicación de una sola página,
motores de búsqueda pueden esencialmente indexar una gran cantidad de la información
que su aplicación web sirve.
El segundo problema que se debe abordar es cuánto de la construcción web debe descargarse
al sitio del cliente en lugar del sitio del servidor.
Por lo tanto, el servidor está actuando como una fuente de datos en Aplicaciones de una sola página
y gran parte del trabajo se descarga al sitio del cliente.
Desde una perspectiva,
esto le da una forma mucho más escalable de entregar su aplicación web
a su sitio cliente, porque gran parte del trabajo de renderizado se realiza en el sitio cliente.
Ahora puede optimizar esto en cierta medida para compensar la descarga inicial
de la aplicación web desde el sitio del servidor
haciendo parte de la representación en el sitio del servidor.
Como mencioné, Angular le brinda una oportunidad
para hacer eso con la representación parcial del sitio del servidor
de su vista inicial de su aplicación.
El tercer aspecto es cómo mantener el historial, así que cuando haces clic en un botón Atrás
o un botón Adelante, ¿a dónde llevarías al usuario?
¿Guarda suficiente información
para poder navegar entre las diferentes vistas de tu aplicación y así sucesivamente?
Así que eso es una cosa que debes tener en cuenta.
Por supuesto, debido a que el enrutador angular aprovecha la API de historial de cinco páginas html,
por lo que es capaz de abordar este problema en gran medida.
La última pregunta que tenemos es analítica.
¿Cómo admite el análisis en su página web?
¿Cómo se recopilan los datos analíticos, etc.?
Y también, como he mencionado anteriormente, acelerar la carga inicial de la página
es algo que preocupa cuando está diseñando su aplicación web.
Ahora con Angular, como dije,
haciendo representación parcial en el lado del servidor acelerará la carga inicial de la página
en su sitio cliente mientras que el resto de la aplicación web
se está descargando al sitio cliente.
Así que puede enmascarar un poco del tiempo de descarga inicial para la aplicación web
haciendo representación parcial desde el sitio del servidor.
Con estas ideas básicas en mente,
vamos ahora a explorar cómo Angular soporta Aplicaciones de una sola página.
Ya hemos incorporado el router angular
en nuestra aplicación Angular en el ejercicio anterior.
En los ejercicios posteriores de esta lección
y asignación, completaremos el desarrollo de la Solicitud de Página Única
en la que hemos estado trabajando hasta ahora en este curso.