Articles

Angular Single Page Applications (SPA): ¿Cuáles son los beneficios?

octubre 13, 2020 by admin

en este post, vamos a cubrir los principales beneficios de adoptar una arquitectura de SPA mientras construimos nuestras aplicaciones angulares, y responder algunas preguntas muy comunes con respecto a los SPAs en general.

este post es parte de la serie en curso Angular para principiantes, aquí está la serie completa:

Guía Angular para principiantes – Introducción (entorno de Configuración)
Guía Angular para principiantes: ¿Por qué Angular?, Los principales beneficios
Guía Angular para principiantes-componentes vs directivas
¿Por qué una aplicación de una sola página, Cuáles son los beneficios? ¿Qué es un SPA?

¿por qué la arquitectura del SPA?

comencemos con la primera pregunta: ¿por qué las aplicaciones de una sola página (SPAs)? Este tipo de aplicaciones han existido durante años, pero aún no se han generalizado en la Internet pública.

¿Y por qué es eso?

hay una buena razón para eso y una razón aún mejor de por qué eso podría cambiar en el futuro cercano.,

los SPAs se adoptaron mucho en los últimos años para construir la parte privada del panel de control de las plataformas SaaS (Software as a Service) o los servicios de Internet en general, así como para construir aplicaciones empresariales basadas en datos y que requieren un uso intensivo de formularios.

pero, ¿Angular impone la construcción de nuestras aplicaciones como SPAs?

la respuesta es no, No lo hace, pero esa es una posibilidad interesante que trae, dados los muchos beneficios de construir una aplicación de esa manera. Lo que nos lleva a una pregunta clave:

¿por qué querría construir una aplicación como SPA?,

esto es algo que a menudo se da por sentado. Todo el mundo está construyendo aplicaciones de esta manera, pero ¿cuál es la gran ventaja de eso? Tiene que haber al menos un par de características asesinas, ¿verdad?

comencemos con una característica que no se menciona muy a menudo: implementación de producción.

comprender las ventajas del uso del SPA en la producción también responderá a la pregunta clave:

¿qué es una aplicación de una sola página?

a veces los nombres en el desarrollo de Software no son bien elegidos, y eso puede llevar a mucha confusión., Ciertamente no es el caso con el término SPA: una aplicación de una sola página literalmente tiene solo una página !!

Si desea ver una aplicación de una sola página en acción, lo invito a dirigirse a AngularUniv https://angular-university.io y comenzar a hacer clic en la página de inicio en la lista de últimos cursos, y en el menú superior.

si comienza a navegar, verá que la página no se recarga completamente – solo se envían nuevos datos a través del cable a medida que el usuario navega a través de la aplicación – que es un ejemplo de una aplicación de una sola página.,

permítanme darles una explicación de cuál es la ventaja de construir una aplicación como esa y cómo funciona.

Usando las herramientas de desarrollo de Chrome, vamos a inspeccionar el índice.html del Sitio Web AngularUniv que se descarga en la página de Inicio (o cualquier otra página, si navega y pulsa Actualizar).

la página que se descarga es la primera solicitud que verá en el Panel de la pestaña de red de Chrome, que es literalmente la única página de nuestra aplicación.

notemos una cosa-esta página está casi vacía! Excepto por la etiqueta, no hay mucho que hacer aquí.,

nota: en el sitio web real la página descargada también tiene HTML que fue pre-renderizado en el servidor usando Angular Universal

observe los nombres de los paquetes CSS y Javascript: todo el CSS e incluso todo el Javascript de la aplicación (que incluye Angular) ni siquiera proviene del mismo servidor que el index.html – esto proviene de un servidor estático completamente diferente:

en este caso, los dos paquetes provienen de un bucket de Amazon S3.,

además, tenga en cuenta que el nombre de los paquetes está versionado: contiene la marca de tiempo en la que se ejecutó la compilación de implementación que implementó esta versión particular de la aplicación.

las ventajas de implementación de producción de las aplicaciones de una sola página

el escenario que hemos visto anteriormente es en realidad una ventaja bastante genial de las aplicaciones de una sola página:

Las aplicaciones de una sola página son súper fáciles de implementar en producción, e incluso,

una aplicación de una sola página es súper fácil de implementar en comparación con las aplicaciones renderizadas del lado del servidor más tradicionales: en realidad es solo un archivo index.html, con un paquete CSS y un paquete Javascript.

estos 3 archivos estáticos se pueden cargar en cualquier servidor de contenido estático como Apache, Nginx, Amazon S3 o Firebase Hosting.

Por supuesto, la aplicación necesitará hacer llamadas al backend para obtener sus datos, pero ese es un servidor separado que se puede construir si es necesario con una tecnología completamente diferente: como Node, Java o PHP.,

en realidad, si construyéramos nuestra API REST u otro tipo de backend en Node, incluso podríamos construirlo en Typescript también, y así poder usar el mismo lenguaje tanto en el servidor como en el cliente, e incluso compartir algún código entre ellos.

control de versiones de aplicaciones de una sola página en producción

otra ventaja de implementar nuestro frontend como una aplicación de una sola página es el control de versiones y la reversión. Todo lo que tenemos que hacer es versionar nuestra salida de compilación (que produce los paquetes CSS y JS resaltados en amarillo arriba).,

podemos configurar el servidor que está sirviendo a nuestro SPA con un parámetro que especifica qué versión de la aplicación frontend construir: es tan simple como eso!

este tipo de implementación escala muy bien: los servidores de contenido estático como Nginx pueden escalar para un gran número de usuarios.

Por supuesto, este tipo de implementación y control de versiones solo es válido para la parte frontend de nuestra aplicación, esto no se aplica al servidor backend. Pero aún así, es una ventaja importante.

¿pero es la implementación de producción la única ventaja de las aplicaciones de una sola página?, Ciertamente no, aquí hay otra ventaja importante:

aplicaciones de una sola página y experiencia de usuario

si alguna vez ha utilizado una aplicación web que está constantemente recargando todo desde el servidor en casi todas las interacciones del usuario, sabrá que ese tipo de aplicación da una mala experiencia de usuario debido a:

la constante carga de la página completa
también debido a los viajes de ida y vuelta de la red al servidor para recuperar todo ese HTML.,

en una aplicación de una sola página, hemos resuelto este problema, utilizando un enfoque arquitectónico fundamentalmente diferente:

en un SPA, después de la carga inicial de la página, no se envía más HTML a través de la red. En su lugar, solo se solicitan datos del servidor (o se envían al servidor).

por lo tanto, mientras se ejecuta un SPA, solo se envían datos a través del cable, lo que lleva mucho menos tiempo y ancho de banda que el envío constante de HTML. Echemos un vistazo al tipo de carga útil que pasa por encima del cable típicamente en un SPA.,

por ejemplo, en el spa AngularUniv, si hace clic en un curso, no se enviará HTML por cable. En su lugar, obtenemos una solicitud Ajax que recibe una carga JSON con todos los datos del curso:

como podemos ver, la versión HTML de un curso sería mucho más grande en tamaño en comparación con un objeto JSON simple debido a todas las etiquetas de apertura y cierre, pero también hay una gran cantidad de HTML duplicado si cargamos constantemente Páginas similares una y otra vez.

por ejemplo, cosas como los encabezados y los pies de Página de una página se envían constantemente al navegador, pero realmente no han cambiado.,

así que con esto, tenemos aquí una segunda gran ventaja de una aplicación de una sola página: una experiencia de usuario mucho mejor debido a menos recargas de página completa y un mejor rendimiento general porque se necesita menos ancho de banda.

entonces, ¿por qué no usamos SPAs en todas partes?

si los SPAs tienen tantas ventajas, ¿Por qué no se han adoptado a mayor escala en la internet pública? Hay una buena razón para ello.

hasta hace relativamente poco, los motores de búsqueda como Google tenían dificultades para indexar correctamente una aplicación de una sola página. ¿Pero qué hay de hoy?,

en el pasado, hubo algunas recomendaciones para usar un esquema de Rastreo Ajax especial que ha sido obsoleto. Entonces, ¿Google Ahora puede renderizar Ajax por completo?

en un anuncio oficial, tenemos la información de que Google search es ahora generalmente capaz de rastrear Ajax, pero hay algunos informes de que todavía no es completamente capaz de hacerlo.

y la recomendación es utilizar la mejora progresiva en su lugar. Entonces, ¿qué significa eso, en esta etapa es posible usar SPAs en el Internet público o no todavía?

¿SPAs amigables con los motores de búsqueda?,

es posible tener el rendimiento y la experiencia de usuario de un SPA junto con buenas propiedades SEO: el uso del motor de pre-renderizado Angular Universal nos permite:

pre-renderizar una aplicación en el backend
enviar el HTML al navegador junto con Angular
y tener Angular bootstrap en el lado del cliente y hacerse cargo de la página un SPA

¿los SPAs serán más frecuentes en el futuro?,

Imagine una versión SEO friendly de Amazon que no se actualizaría en cada recarga de Página y con un rendimiento y una experiencia de usuario mucho mejores: ¡eso probablemente tendría un gran impacto positivo en el tiempo que los clientes pasan en el sitio!

así que los beneficios técnicos de los SPAs SEO-friendly son significativos y aún más en dispositivos móviles, y esperaríamos que este tipo de aplicaciones SEO-friendly SPA se vuelvan más frecuentes en el futuro también en internet público.

pero esto deja la última pregunta de esta sección todavía sin respuesta., Debe estar pensando en esta etapa después de leer las últimas secciones:

si solo se carga un HTML mínimo desde el servidor en el momento del inicio, ¿cómo sigue cambiando la página con el tiempo?

lo que nos lleva a la última pregunta de esta sección, y tal vez la más importante:

¿cómo funciona la aplicación de una sola página?

de hecho, ¿cómo pueden funcionar porque solo cargamos muy poco HTML desde el servidor? Una vez que se inicia la aplicación, solo los datos pasan por el cable. Entonces, ¿de dónde viene el nuevo HTML?,

porque tiene que haber un nuevo HTML generado en algún lugar, ya que es la única manera de que el navegador cambie lo que está mostrando, ¿verdad?

la respuesta es simple, y tiene que ver con la forma en que las aplicaciones de una sola página realmente funcionan en comparación con las aplicaciones tradicionales basadas en servidores.

en una aplicación tradicional (que incluye la gran mayoría de la Internet pública actual), la transformación de datos a HTML (o renderizado) se realiza en el lado del servidor.,

por otro lado, las aplicaciones de una sola página lo hacen de una manera muy diferente:

en un SPA después del inicio de la aplicación, el proceso de transformación de datos a HTML se ha movido del servidor al cliente – los SPAs tienen el equivalente de un motor de plantillas que se ejecuta en su navegador!

y así con esta información en la mano, terminemos esta sección resumiendo los puntos clave sobre las aplicaciones de una sola página.,-Ventajas de los SPAs y el concepto clave sobre cómo funcionan

construir nuestra aplicación como SPA nos dará un número significativo de beneficios:

podremos brindar una experiencia mucho mejor al usuario
la aplicación se sentirá más rápida porque se utiliza menos ancho de banda y no se producen actualizaciones de página completa a medida que el usuario navega por la aplicación
la aplicación será mucho más fácil de implementar en producción, al menos ciertamente la parte del cliente: todo lo que necesitamos es un servidor estático para servir un mínimo de 3 archivos: nuestro índice de una sola página.,html, un paquete CSS y un paquete Javascript.
también podemos dividir los paquetes en varias partes si es necesario usando División de código.
la parte del frontend de la aplicación es muy simple de versión en producción, lo que permite una implementación simplificada y reversiones a la versión anterior del frontend si es necesario

y este es solo un posible escenario de implementación de SPAs en producción.,

otros escenarios de producción

otros escenarios incluyen pre-renderizar grandes partes de la aplicación y cargar todo a un servidor de alojamiento estático, almacenamiento en caché en memoria en el servidor de solo ciertas páginas, hacer versionado utilizando DNS, etc.

hoy en día es más sencillo que nunca hacer SPAs amigables con el SEO, por lo que es probable que tengan una mayor adopción en el futuro, en escenarios donde los SPAs no se han utilizado con frecuencia.,

la forma en que funcionan los SPAs

la forma en que las aplicaciones de una sola página brindan estos beneficios está vinculada a la forma en que funcionan internamente:

después del inicio, solo los datos se envían a través del cable como una carga útil JSON o algún otro formato. Pero ningún HTML o CSS se envía más a través del cable después de que la aplicación se está ejecutando.,

el punto clave para entender cómo funcionan las aplicaciones de una sola página es el siguiente:

en lugar de convertir datos a HTML en el servidor y luego enviarlos por cable, en un SPA ahora hemos movido ese proceso de conversión del servidor al cliente.

la conversión ocurre el último segundo en el lado del cliente, lo que nos permite dar una experiencia de usuario mucho mejor al usuario.

espero que esto te convenza de las ventajas de los SPAs., Si no, por favor, hágamelo saber y por qué no es el caso para que pueda desarrollar mejor algunos de los puntos.

además, en esta etapa quiero mostrarte algo de código de inmediato. Construyamos un pequeño Hello World SPA en Angular, y empecemos desde allí. Vamos a ver cómo los conceptos que hemos introducido mapa a la pequeña aplicación que vamos a construir.

espero que este post haya ayudado a entender los beneficios clave de los SPAs, y que lo hayan disfrutado!,