Se habla mucho de ello y casi siempre va asociado a los frameworks Javascript que sirven para crear este tipo de aplicaciones: Angular, React o Vue. Pero, ¿qué es realmente una SPA?
Antes de definir qué es SPA habría que diferenciar entre página web, sitio web y aplicación web. Una página web es simple y llanamente un documento que el navegador interpreta para traducir su código en texto e imágenes que mostrar en pantalla. Los sitios web se componen de varias páginas web, por lo que a lo que, normalmente nos referimos como página web, es generalmente un sitio web. El objetivo principal de páginas y sitios web es mostrar información.
Una aplicación web es un programa informático que se utiliza desde el navegador. En amplios rasgos podríamos decir que es un híbrido entre un sitio web, ya que usa Internet para llegar a sus usuarios, y un programa de escritorio, ya que ejecuta tareas complejas en base a la información que introduce el usuario. El objetivo de una aplicación web no es solo mostrar información, sino que el usuario realice una tarea.
Normalmente nos referimos a cualquier contenido web como página web sin ser conscientes de la diferente complejidad que puede existir entre unas y otras. Nada tienen que ver el sitio web de un bufete de abogados, el cual previsiblemente mostrará información de la firma y, quizá, un formulario de contacto; y la aplicación web de una aerolínea que vende billetes de avión a través de Internet. El primero implica mucha menos complejidad técnica. No es más que un conjunto de páginas estáticas y un formulario de contacto que, aun solicitando la interacción del usuario, no es más que una pequeñísima parte de todo lo que implica una aplicación web.
Una aerolínea que vende billetes de avión a través de su plataforma, además de exigir contenido en HTML, CSS y Javascript (tecnologías nativas de la web e interpretadas por los navegadores), implica todo un stack tecnológico de backend; o lo que es lo mismo, tecnología que permita comunicar al usuario con un servidor, el cual procesará las peticiones y consultará a una base de datos para actualizar información sensible. Estamos hablando de un programa informático que utiliza el navegador como “ventana” para mostrar información al usuario y recoger los inputs que este introduzca.
Y entonces… ¿Qué es una SPA (Single Page Application)?
Teniendo clara la diferencia entre sitio web y aplicación web, ya podemos definir lo qué es una SPA. Como su nombre indica, una SPA es una aplicación web de una sola página. Significa que para mostrar la información en el navegador, una SPA solo utiliza un archivo HTML (normalmente index.html) y ejecuta a través de Javascript diferentes vistas. Es decir, con un solo archivo HTML muestra al usuario diferente contenido en base a su interacción.
Una de las ventajas de las SPA es que en ellas no existe recarga de página, sino que solo se actualiza el contenido concreto que debe actualizarse en base a la interacción del usuario. Esto cobra especial importancia teniendo en cuenta que una aplicación web está intercambiando constantemente información con un servidor. Al no haber recarga de página y solo actualizarse una pequeña parte de la aplicación web, el programa corre más fluido y la experiencia de usuario mejora notablemente.
Para el usuario la navegación es igual que en un sitio web, con links que aparentemente te llevan a otras páginas (ya que cambia la URL al acceder a ellos), la posibilidad de volver atrás a la página anterior… A través de funciones propias (o de terceros) de frameworks como Angular o librerías como React, se consigue una experiencia de navegación idéntica a la de un sitio web, aunque internamente el funcionamiento sea totalmente distinto; ya que nunca hay recarga de página, no hay tiempos de carga para renderizar una vista.
Quizá en frío resulte complicado dar con una ventaja destacable de las SPA frente a otro tipo de aplicaciones web, pero pensad en un dashboard en el que hay un montón de secciones, con decenas de gráficas, tablas, inputs de texto… Un sinfín de datos que mostrar en función de la interacción del usuario. El dashboard de Google Analytics, por ejemplo. O el propio Gmail es una SPA. Toda esa comunicación entre usuario y aplicación supone un gran número de llamadas a un servidor y actualizaciones constantes del contenido. En una SPA solo se actualiza el contenido concreto que está implicado en la interacción del usuario, por lo que el flujo de datos a intercambiar será menor y no sacrificará el rendimiento general de toda la aplicación. Además, ese flujo de datos es en “crudo”, es decir, no se mezclan datos con HTML u otro tipo de lenguaje para su presentación.
En definitiva, como los datos que se intercambian pesan muy poco, la comunicación entre navegador y servidor es muy fluida y la velocidad de ejecución de la aplicación es muy rápida.
¿Necesito una SPA?
Para contestar a esto primero deberías preguntarte… ¿Necesito un sitio web o una aplicación web?
El desarrollo de un sitio web estático implica mucho menos tanto a nivel de programación como de recursos técnicos, por lo que también te supondrá un menor desembolso económico.
Si lo que realmente necesitas es una plataforma en la que requerirás la interacción del usuario (como pueden ser dashboard de datos, paneles de control, ecommerce, reserva de entradas, marketplace… ) realmente necesitas algo más que un sitio web: una aplicación web. Y nada te va a ofrecer una mejor experiencia de usuario en una aplicación web que las ventajas de una Single Page Application.
Un comentario