¿Qué es una aplicación de página única?

Las aplicaciones web modernas también se denominan aplicaciones de página única. ¿Qué significa esto?

En el pasado, cuando los navegadores eran mucho menos capaces que hoy y el rendimiento de JavaScript era deficiente, cada página provenía de un servidor. Cada vez que hacías clic en algo, se realizaba una nueva solicitud al servidor y, posteriormente, el navegador cargaba la nueva página.

Sólo los productos muy innovadores funcionaron de forma diferente y experimentaron con nuevos enfoques.

Hoy en día, popularizado por los modernos frameworks frontend de JavaScript como React, una aplicación generalmente se construye como una aplicación de página única: solo carga el código de la aplicación (HTML, CSS , JavaScript ) una vez, y cuando interactúa con la aplicación, lo que generalmente sucede es que JavaScript intercepta los eventos del navegador y, en lugar de realizar una nueva solicitud al servidor que luego devuelve un nuevo documento, el cliente solicita algún JSON o realiza una acción en el servidor, pero la página que ve el usuario nunca se borra por completo y se comporta más como una aplicación de escritorio.

Las aplicaciones de una sola página están creadas en JavaScript (o al menos compiladas en JavaScript) y funcionan en el navegador.

La tecnología es siempre la misma, pero la filosofía y algunos componentes clave de cómo funciona la aplicación son diferentes.

Ejemplos de aplicaciones de una sola página

Algunos ejemplos notables:

Gmail
Mapas de Google
Facebook
Gorjeo
Unidad de Google

Pros y contras de los SPA

Una SPA parece mucho más rápida para el usuario, porque en lugar de esperar a que se produzca la comunicación entre el cliente y el servidor y a que el navegador vuelva a renderizar la página, ahora puede recibir una respuesta instantánea. Esto es responsabilidad del creador de la aplicación, pero puede tener transiciones y controles giratorios y cualquier tipo de mejora de la experiencia del usuario que sea sin duda mejor que el flujo de trabajo tradicional.

Además de hacer que la experiencia sea más rápida para el usuario, el servidor consumirá menos recursos porque podrá centrarse en proporcionar una API eficiente en lugar de crear los diseños del lado del servidor.

Esto lo hace ideal si también creas una aplicación móvil sobre la API, ya que puedes reutilizar completamente tu código existente del lado del servidor.

Las aplicaciones de página única son fáciles de transformar en aplicaciones web progresivas, lo que a su vez le permite proporcionar almacenamiento en caché local y admitir experiencias fuera de línea para sus servicios (o un mejor mensaje de error si sus usuarios necesitan estar en línea).

Las SPA se utilizan mejor cuando no hay necesidad de SEO (optimización de motores de búsqueda). Por ejemplo, para aplicaciones que funcionan detrás de un inicio de sesión.

Los motores de búsqueda, aunque mejoran cada día, aún tienen problemas para indexar sitios creados con un enfoque SPA en lugar de las páginas renderizadas en servidor tradicionales. Este es el caso de los blogs. Si va a confiar en los motores de búsqueda, ni se moleste en crear una aplicación de una sola página sin tener también una parte renderizada en servidor.Te recomendamos Trucos y guías de videojuegos

Al codificar una SPA, se debe escribir una gran cantidad de código JavaScript. Dado que la aplicación puede tener una larga duración, se debe prestar mucha más atención a posibles fugas de memoria: si en el pasado la vida útil de la página se contaba en minutos, ahora una SPA puede permanecer abierta durante horas y, si hay algún problema de memoria, esto aumentará mucho más el uso de memoria del navegador y provocará una experiencia desagradablemente lenta si no se soluciona.

Las API son excelentes para trabajar en equipo. Los desarrolladores de backend pueden concentrarse únicamente en la API, y los desarrolladores de frontend pueden concentrarse en crear la mejor experiencia de usuario, haciendo uso de la API incorporada en el backend.

Como desventaja, las aplicaciones de una sola página dependen en gran medida de JavaScript. Esto puede hacer que el uso de una aplicación que se ejecuta en dispositivos de bajo consumo sea una mala experiencia en términos de velocidad. Además, es posible que algunos de sus visitantes simplemente tengan JavaScript deshabilitado, y también debe considerar la accesibilidad para todo lo que cree.

Anulación de la navegación

Al eliminar la navegación predeterminada del navegador, las URL deben administrarse manualmente.

Esta parte de una aplicación se llama enrutador. Algunos frameworks ya se encargan de esto por ti (como Ember), otros requieren bibliotecas que hagan este trabajo (como React Router ).

¿Cuál es el problema? Al principio, esto era una idea de último momento para los desarrolladores que creaban aplicaciones de una sola página. Esto causaba el problema común del “botón de retroceso roto”: al navegar dentro de la aplicación, la URL no cambiaba (ya que la navegación predeterminada del navegador estaba secuestrada) y al presionar el botón de retroceso, una operación común que los usuarios realizan para ir a la pantalla anterior, se podía acceder a un sitio web que se visitó hace mucho tiempo.

Este problema ahora se puede resolver usando la API de historial que ofrecen los navegadores, pero la mayoría de las veces usarás una biblioteca que usa internamente esa API, como React Router .