Una aplicación de página única (SPA) es una aplicación web que se presenta al usuario a través de una sola página HTML para que responda mejor y reproduzca más fielmente una aplicación de escritorio o una aplicación nativa.
Un SPA viene a veces defiinterfaz de página única (SPI).
Una aplicación de una sola página puede obtener todo el HTML, JavaScript y CSS de la aplicación durante la carga inicial, o puede cargar recursos dinámicamente para actualizarlos en respuesta a la interacción del usuario u otros eventos.
Otras aplicaciones web presentan al usuario una página de inicio vinculada a partes de la aplicación en páginas HTML separadas, lo que significa que el usuario tiene que esperar a que se cargue una nueva página cada vez que realiza una nueva solicitud.
tecnologías
Los SPA utilizan HTML5 y Ajax (JavaScript asíncrono y XML) para permitir respuestas fluidas y dinámicas a las solicitudes de los usuarios, lo que permite que el contenido se actualice inmediatamente cuando un usuario realiza una acción. Una vez que la página se ha cargado, las interacciones con el servidor tienen lugar a través de llamadas Ajax y los datos se devuelven, detectados en formato JSON (Notación de objetos de JavaScript), para actualizar la página sin necesidad de recargas.
SPA en detalle
Las aplicaciones de una sola página se destacan por su capacidad para rediseñar cualquier parte de la interfaz de usuario sin necesidad de un servidor de ida y vuelta para obtener el HTML. Esto se logra separando los datos de la presentación de datos con una capa de modelo que administra los datos y una capa de vista que lee los modelos.
Un buen código proviene de resolver el mismo problema varias veces o de refactorizarlo. Por lo general, este proceso evoluciona en patrones recurrentes, con un mecanismo que hace lo mismo de manera constante.
Para escribir código mantenible, debe escribir código de una manera simple. Esta es una lucha constante, de hecho, es fácil agregar complejidad (enlaces/dependencias) al escribir código para resolver un problema; y es fácil resolver un problema de una manera que no reduce la complejidad.
Los espacios de nombres son un ejemplo de esto.
Aplicaciones de una sola página (SPA) Aplicaciones de varias páginas (MPA) comparadas
Las aplicaciones de varias páginas (MPA) contienen varias páginas con datos estáticos y enlaces a otros sitios. HTML y CSS son las principales tecnologías utilizadas para desarrollar sitios web de MPA. Pueden usar JavaScript para reducir la carga y aumentar la velocidad. Las organizaciones que ofrecen una amplia gama de servicios, como tiendas en línea, deberían considerar el uso de MPA, ya que facilita la conexión a diferentes bases de datos de usuarios.
Las aplicaciones de una sola página se diferencian de las aplicaciones de varias páginas en los siguientes aspectos:
- Proceso de desarrollo: Al crear MPA, no necesita conocimientos de JavaScript, a diferencia de los SPA. Sin embargo, el acoplamiento de front-end y back-end en las AMP significa que estos sitios requieren tiempos de construcción relativamente más largos que las ZEPA.
- Velocidad: las MPA se ejecutan relativamente más lentamente, lo que requiere que cada nueva página se cargue desde cero. Sin embargo, los SPA se cargan mucho más rápido después de la descarga inicial, ya que almacenan datos en caché para su uso posterior.
- Optimización de motores de búsqueda: Los motores de búsqueda pueden indexar fácilmente sitios web con MPA. Las AMP tienen más páginas rastreadas por los motores de búsqueda para generar mejores clasificaciones de SEO. El contenido de cada página también es estático, haciéndolo más accesible. Por el contrario, los SPA tienen una página con una sola URL única (Localizador Uniforme de Recursos). También utilizan JavaScript, que la mayoría de los motores de búsqueda no indexan correctamente. Esto hace que las clasificaciones de SEO para SPA sean más desafiantes.
- Seguridad: En MPA, debe proteger cada página en línea individualmente. Sin embargo, los SPA son más propensos a los ataques de piratas informáticos. Pero con el enfoque correcto, los equipos de desarrollo pueden mejorar la seguridad de las aplicaciones.
A medida que más empresas migran para usar SPA, los rastreadores y los motores de búsqueda evolucionarán para indexarlos mejor. Dada su velocidad, solo es una cuestión de cuándo los SPA se convertirán en la opción preferida para el desarrollo de aplicaciones web. Entonces las ventajas de MPA sobre SPA comenzarán a desvanecerse.
¿Cuándo usar aplicaciones de una sola página?
Hay cinco escenarios donde tales aplicaciones son más relevantes:
- Los usuarios que quieran desarrollar un sitio web con una plataforma dinámica y volúmenes de datos más bajos pueden usar SPA.
- Los usuarios que planean crear una aplicación móvil para su sitio web también pueden considerar usar SPA. Pueden usar la API de backend (interfaz de programación de aplicaciones) para el sitio y la aplicación móvil.
- La arquitectura SPA es adecuada para construir redes sociales como Facebook, plataformas SaaS y comunidades cerradas, ya que requieren menos SEO.
- Los usuarios que deseen ofrecer a sus consumidores una interacción fluida también deben utilizar los SPA. Los consumidores también pueden acceder a actualizaciones en vivo para datos y gráficos de transmisión en vivo.
- Usuarios que desean brindar una experiencia de usuario uniforme, nativa y dinámica en todos los dispositivos, sistemas operativos y navegadores.
Un buen equipo debe tener el presupuesto, las herramientas y el tiempo para crear una aplicación de una sola página de alta calidad. Esto asegurará un SPA confiable y eficiente que no experimente tiempo de inactividad relacionado con el tráfico.
Arquitectura de aplicación de una sola página
Las aplicaciones de una sola página interactúan con los visitantes al cargar y trabajar en la página actual, lo que elimina la necesidad de cargar varias páginas web desde el servidor.
Los sitios web con SPA consisten en un solo enlace URL. El contenido se descarga y los componentes específicos de la interfaz de usuario (UI) se actualizan cuando se hace clic en ellos. La experiencia del usuario mejora ya que el usuario puede interactuar con la página actual a medida que se obtiene contenido nuevo del servidor. Cuando se produce una actualización, partes de la página actual se actualizan con el nuevo contenido.
La solicitud inicial del cliente en SPA carga la aplicación y todos sus activos relevantes, como HTML, CSS y JavaScript. El archivo de carga inicial puede ser importante para aplicaciones complejas y dar como resultado un tiempo de carga más lento. Una interfaz de programación de aplicaciones (API) obtiene nuevos datos a medida que el usuario navega a través de un SPA. el servidor solo responde con datos en formato JSON (JavaScript Object Notation). Al recibir estos datos, el navegador actualiza la vista de la aplicación que ve el usuario sin recargar una página.
La arquitectura de aplicaciones de una sola página incluye tecnologías de representación del lado del servidor y del lado del cliente. El sitio se muestra y se presenta al usuario a través de la Representación del lado del cliente (CSR), la Representación del lado del servidor (SSR) o el Generador de sitios estáticos (SSG).
- Representación del lado del cliente (CSR)
Con la representación del lado del cliente, el navegador solicita al servidor un archivo HTML y recibe un archivo HTML básico con secuencias de comandos y estilos adjuntos. Mientras ejecuta JavaScript, el usuario ve una página en blanco o una imagen del cargador. El SPA obtiene los datos, produce visualizaciones y envía los datos al Modelo de objetos del documento (DOM). A continuación, el SPA se prepara para su uso. La CSR suele ser la más larga de las tres alternativas y, en ocasiones, puede abrumar al navegador debido al gran uso que hace de los recursos del dispositivo al ver el contenido. Además, CSR es una excelente alternativa para sitios web de alto tráfico, ya que presenta información a los consumidores sin una comunicación excesiva con el servidor, lo que resulta en una experiencia de usuario más rápida.
- Representación del lado del servidor (SSR)
Durante la representación del lado del servidor, los navegadores solicitan un archivo HTML del servidor, que obtiene los datos solicitados, presenta el SPA y crea el archivo HTML para la aplicación sobre la marcha. El material accesible se presenta entonces al usuario. La arquitectura SPA es necesaria para adjuntar eventos, producir un DOM virtual y realizar más operaciones. A continuación, el SPA se prepara para su uso. SSR hace que el programa sea rápido ya que combina la velocidad de un SPA con no sobrecargar el navegador del usuario.
- Generador de sitios estáticos (SSG)
Dentro del creador de sitios estáticos, los navegadores solicitan inmediatamente al servidor un archivo HTML. La página se muestra al usuario. El SPA obtiene los datos, genera vistas y completa el modelo de objeto del documento (DOM). Entonces, el SPA está listo para su uso. Deduciendo del nombre, los SSG son principalmente adecuados para páginas estáticas. Proporcionan páginas estáticas con una opción buena y rápida. Para sitios web con contenido dinámico, se recomienda a los usuarios que elijan una de las otras dos opciones de representación de información.
Ventajas de las aplicaciones de una sola página
Grandes empresas como Meta, YouTube y Netflix han pasado de aplicaciones de varias páginas a aplicaciones de una sola página. Los SPA ofrecen una experiencia de usuario más fluida, mayor rendimiento y capacidad de respuesta. A continuación se muestran los beneficios de usar aplicaciones de una sola página.
- Función de almacenamiento en caché
Una aplicación de una sola página realiza una sola solicitud al servidor en la descarga inicial y guarda todos los datos que recibe. Los consumidores pueden usar los datos recibidos para trabajar sin conexión si es necesario, lo que lo hace más conveniente para los usuarios, ya que les permite consumir menos recursos de datos. Además, cuando un cliente tiene una mala conexión a Internet, los datos locales se pueden sincronizar con el servidor si la conexión LAN lo permite.
- Rápido y receptivo
El uso de SPA puede mejorar la velocidad de un sitio web, ya que actualiza solo el contenido solicitado en lugar de actualizar toda la página. Los SPA cargan un archivo JSON menor en lugar de una página nueva. El archivo JSON garantiza una mayor velocidad de carga y eficiencia. Da como resultado un acceso instantáneo a todas las características y funciones de una página sin demoras. Esta es una gran ventaja, ya que el tiempo de carga de un sitio web puede afectar significativamente los ingresos y las ventas.
Los SPA permiten transiciones suaves al proporcionar toda la información en la página al instante. El sitio web no necesita actualizarse, por lo que sus procesos son más eficientes que las típicas aplicaciones en línea.
Además, con SPA, activos como HTML, CSS y scripts Java se obtendrán solo una vez en la vida útil de una aplicación. Solo los datos necesarios se intercambian de ida y vuelta.
Las páginas con SPA también permiten a los usuarios navegar más rápido gracias al almacenamiento en caché y volúmenes de datos reducidos. Solo se transmiten los datos necesarios de un lado a otro y solo se descargan las partes que faltan del contenido actualizado.
- Depuración con Chrome
La depuración detecta y elimina fallas, errores y vulnerabilidades de seguridad de aplicaciones web que ralentizan el rendimiento. La depuración de SPA se simplifica con las herramientas para desarrolladores de Chrome. Los desarrolladores pueden controlar la representación del código JS desde el navegador, depurar SPA sin examinar muchas líneas de código.
Los SPA se crean sobre marcos de JavaScript como AngularJS y las herramientas de desarrollo de React, lo que facilita su depuración con los navegadores Chrome.
Las herramientas para desarrolladores permiten a los desarrolladores comprender cómo el navegador solicitará datos de los servidores, los almacenará en caché y cómo mostrará los elementos de la página. Además, estas herramientas permiten a los desarrolladores monitorear y analizar elementos de página, operaciones de red y datos asociados.
- Desarrollo rápido
Durante el proceso de desarrollo, el front-end y el back-end de un SPA se pueden separar, lo que permite que dos o más desarrolladores trabajen en paralelo. Cambiar el frontend o el backend no afecta al otro extremo, lo que promueve un desarrollo más rápido.
Los desarrolladores pueden reutilizar el código del lado del servidor y separar los SPA de la interfaz de usuario del front-end. La arquitectura desacoplada en los SPA separa las pantallas de front-end y los servicios de back-end. Esto permite a los desarrolladores cambiar de perspectiva, crear y experimentar sin afectar el contenido ni preocuparse por la tecnología de back-end. Los clientes pueden tener una experiencia consistente usando estas aplicaciones.
- Experiencia de usuario mejorada
Con los SPA, los usuarios obtienen acceso a las páginas vistas al instante con todo el contenido a la vez. Esto es más conveniente ya que los usuarios pueden desplazarse cómodamente y sin problemas. Se siente como usar una aplicación nativa de escritorio o móvil.
Los SPA proporcionan una UX positiva con un comienzo, un medio y un final distintos. Además, los usuarios pueden llegar al contenido deseado sin hacer clic en varios enlaces, como en las MPA. Experimenta tasas de rebote más bajas cuando los usuarios obtienen acceso instantáneo a la información, a diferencia de las MPA, donde los usuarios se frustran porque las páginas tardan una cantidad significativa de tiempo en cargarse. La navegación también es más rápida porque los elementos de la página se reutilizan.
- Conversión a aplicaciones IOS y Android
Los desarrolladores que busquen hacer la transición a aplicaciones de iOS y Android deben usar SPA, ya que son relativamente más fáciles de convertir. Pueden usar el mismo código para cambiar de SPA a aplicaciones móviles. Debido a que el código completo se proporciona en una sola instancia, los SPA son fáciles de navegar, lo que los hace ideales para aplicaciones móviles.
- Compatibilidad multiplataforma
Los desarrolladores pueden usar una única base de código para crear aplicaciones que se pueden ejecutar en cualquier dispositivo, navegador y sistema operativo. Esto mejora la experiencia del consumidor, ya que puede usar el SPA en cualquier lugar. También permite a los desarrolladores e ingenieros de DevOps crear aplicaciones ricas en funciones, incluidos análisis en tiempo real, mientras desarrollan aplicaciones de edición de contenido.
Aspectos negativos
A pesar de todas las ventajas de las aplicaciones de una sola página, surgen algunas desventajas cuando se utilizan marcos SPA. Afortunadamente, se está trabajando para superar estos problemas con los SPA. A continuación se presentan algunas desventajas;
- Optimización de motores de búsqueda (SEO)
Se cree ampliamente que las aplicaciones de una sola página no son adecuadas para el SEO. La mayoría de los motores de búsqueda, como Google o Yahoo, no han podido rastrear sitios web de SPA en función de las interacciones de Ajax con los servidores durante un tiempo. Como resultado, la mayoría de estos sitios SPA permanecieron sin indexar. Actualmente, a los bots de Google se les ha enseñado cómo usar JavaScript en lugar de HTML normal para indexar sitios web de SPA, lo que perjudica las clasificaciones.
Tratar de adaptar el SEO a un sitio SPA listo para usar es un desafío y costoso. Los desarrolladores tienen que construir un sitio web separado, representado por el servidor del motor de búsqueda, lo cual es ineficiente e implica una gran cantidad de código adicional. También se pueden utilizar otras técnicas, como la detección de características y la renderización previa. En las instalaciones de SPA, una sola URL para cada página limita las capacidades de SEO para SPA.
- Navegación con botones de avance y retroceso
Los navegadores guardan información para ayudar a que las páginas web se carguen rápidamente. Cuando los consumidores presionan el botón Atrás, la mayoría espera que la página esté en un estado similar a la última vez que la vieron, y que la transición ocurra rápidamente. Las arquitecturas web tradicionales permiten esto mediante el uso de copias en caché del sitio y los recursos relacionados. Sin embargo, en una implementación ingenua de un SPA, presionar el botón Atrás tiene el mismo efecto que hacer clic en un enlace. Provoca una solicitud del servidor, un mayor retraso y cambios de datos visibles.
Para cumplir con las expectativas de los usuarios y brindar una experiencia más rápida, los desarrolladores de SPA deben imitar la funcionalidad de los navegadores nativos mediante JavaScript.
- Ubicación de desplazamiento
Los navegadores almacenan información como la última posición de desplazamiento de las páginas visitadas. Sin embargo, es posible que los usuarios descubran que las posiciones de desplazamiento han cambiado al navegar por los SPA utilizando los botones de avance y retroceso del navegador. Por ejemplo, en Facebook, a veces los usuarios retroceden a sus últimas posiciones de desplazamiento, pero otras veces no. Esto da como resultado una experiencia de usuario subóptima, ya que tienen que reanudar manualmente el desplazamiento a la posición de desplazamiento anterior.
Para abordar este problema, los desarrolladores deben proporcionar un código que guarde, recupere y solicite la posición de desplazamiento correcta a medida que el usuario se desplaza hacia adelante y hacia atrás.
- Análisis del sitio web
Al agregar código analítico a una página, los usuarios pueden rastrear el tráfico a la página. Sin embargo, los SPA dificultan determinar qué páginas o contenido es más popular, ya que es solo una página. Debe proporcionar un código adicional para que el análisis rastree las pseudopáginas a medida que se visualizan.
- Problemas de seguridad
Los SPA son más propensos a verse comprometidos a través de secuencias de comandos entre sitios. Permiten a los consumidores descargar la aplicación completa, exponiéndolos a más oportunidades para encontrar vulnerabilidades a través de la ingeniería inversa. Para abordar este problema, los desarrolladores deben asegurarse de que toda la lógica del lado del cliente relacionada con la seguridad de la aplicación web, como la autenticación y la validación de entrada, se duplique en el servidor para su verificación. Además, los desarrolladores deben proporcionar acceso limitado basado en funciones.
Conclusión
Las aplicaciones de una sola página marcan el siguiente paso en la evolución de las experiencias de las aplicaciones. Son más rápidos, más intuitivos y se pueden integrar con funciones avanzadas como la personalización. Es por eso que las mejores empresas con muchos usuarios simultáneos, como Gmail, Netflix o las noticias de Facebook, confían en una arquitectura de página única. Al implementar esta tecnología, las empresas pueden obtener más valor de sus propiedades en línea y hacer nuevos avances como negocios digitales.
Ercole Palmeri
