Qué es una SPA

  • Por
Este artículo explica el concepto de SPA (Single Page Application), un tipo de aplicación web cada vez más usado por la agradable experiencia de usuario que aporta.

Este artículo viene motivado por la pregunta de un compañero de la comunidad. Básicamente su pregunta era la siguiente: ¿Me podrías indicar brevemente las principales características de SPA y qué tipo de lenguajes y tecnologías me sirven para realizar una?.

En pocas palabras, SPA son las siglas de Single Page Application. Es un tipo de aplicación web donde todas las pantallas las muestra en la misma página, sin recargar el navegador.

Técnicamente, una SPA es un sitio donde existe un único punto de entrada, generalmente el archivo index.html. En la aplicación no hay ningún otro archivo HTML al que se pueda acceder de manera separada y que nos muestre un contenido o parte de la aplicación, toda la acción se produce dentro del mismo index.html.

Nota: El nombre del archivo no es importante, solo que el documento predeterminado de los servidores suele ser index.html y por eso lo menciono.

Varias vistas, no varias páginas

Aunque solo tengamos una página, lo que sí tenemos en la aplicación son varias vistas, entendiendo por vista algo como lo que sería una pantalla en una aplicación de escritorio. En la misma página, por tanto, se irán intercambiando vistas distintas, produciendo el efecto de que tienes varias páginas, cuando realmente todo es la misma, intercambiando vistas.

Nota: Para quien sepa de lo que estoy hablando, el concepto de vista es similar a lo que se entiende de la "V" del patrón MVC: La capa de presentación de una sección de la aplicación.

Por ponerte un ejemplo, Gmail es una SPA, Hotmail imagino que también. Tiene una pantalla de login, pero una vez logueado haces lo que sea con los emails de tu cuenta sin salir de la misma página.

El efecto de las SPA es que cargan muy rápido sus pantallas. De hecho aunque parezcan páginas distintas, realmente es la misma página, por eso la respuesta es muchas veces instantánea para pasar de una página a otra. Otra característica es que suele comunicar con un servidor y éste le envía los datos que debe mostrar "en crudo". En crudo me refiero a que te manda los datos puros, no mezclados con HTML u otro lenguaje para definir su presentación.

Para aclarar posibles malentendidos, SPA no quiere decir que no cambie la dirección de la barra de direcciones, es decir, la URL a la que accedes con el navegador. De hecho, es normal que al interaccionar con una SPA la URL que se muestra en la barra de direcciones del navegador vaya cambiando también. La clave es que, aunque cambie esta URL, la página no se recarga nunca. El hecho de cambiar esa URL es algo importante, ya que el propio navegador mantiene un historial de pantallas entre las que el usuario se podría mover, pulsando el botón de "atrás" en el navegador o "adelante". Con todo ello, se consigue que el usuario pueda usar el historial como lo hace en una página normal, siendo que en una SPA la navegación entre la secuencia de páginas del historial se realiza realmente entre vistas de la aplicación.

Por qué una SPA ofrece una experiencia de usuario tan agradable

Al pesar muy poco los datos, mucho menos que si estuvieran mezclados dentro de un complejo código HTML y CSS para definir su presentación, las transmisiones son muy rápidas y las comunicaciones entre cliente y servidor se realizan muy fluidas. Nuevamente ayuda a que las páginas respondan muy velozmente al visitante, creando una experiencia de usuario muy agradable.

Nota: El lenguaje con el que habitualmente comunicas los datos crudos desde el servidor hacia el cliente es JSON. De todos modos, nada impide usar otro lenguaje como XML, también muy popular en los Web Services. Aunque JSON se ha establecido como un estándar y el preferido por la mayoría de los desarrolladores, debido a diversos motivos. Entre ellos está que JSON es una notación de objeto Javascript, por lo que es algo muy cercano a la web. Es ligero y tiene soporte en la totalidad de los lenguajes usados en la web.

Las páginas de gestión, o administración de cualquier tipo de servicio, paneles de control y cosas así son muy adecuadas para las SPA. El resultado es una aplicación web se comporta muy parecido a una aplicación de escritorio.

Seguro que habrás usado más de una SPA aunque no supieras que tenía ese nombre. Si conoces la página desde donde se descargan los manuales de desarrolloweb tienes ahí otro ejemplo de SPA, aunque el término con el que se conoce a este tipo de aplicación ya toma el nombre de PWA (Progressive Web App) que es otro tipo más especializado de SPA.

Lenguajes y tecnologías para producir una SPA

Esto es muy fácil de responder: Una SPA se realiza en Javascript. No existe ningún otro tipo de lenguaje en el que puedas realizar una SPA, ya que básicamente es una aplicación web que se ejecuta del lado del cliente.

Nota: Obviamente, también se realiza usando HTML + CSS, para la presentación, ya que son los lenguajes que entiene el navegador.

Ya luego, dentro de Javascript, existen diversas librerías y frameworks que facilitan mucho el desarrollo de una SPA, entre los que podemos mencionar:

Estos son los más habituales, pero también existen otros muchos que nos podrían servir. La elección es básicamente por gustos, experiencia previa, tamaño de la aplicación, etc. Lo ideal es explorarlos para poder decidir y en DesarrolloWeb.com tienes mucha literatura para adentrarte en cualquiera de ellos.

Ahora bien, si quieres también expandir esta pregunta y abarcar la parte del lado del servidor, el backend, ahí tienes un nuevo abanico de posibilidades. Aunque creo que no hace falta ni entrar en ello porque realmente cualquier lenguaje backend te serviría para producir la parte del servidor, creando lo que sería un API REST que devuelve el JSON necesario para alimentar de datos a una SPA. Lo que debe quedar claro es que, cualquier SPA es agnóstica a cómo se desarrolle en el backend. Son dos proyectos independientes. Dicho de otra forma, en el lado del cliente resulta totalmente indiferente cómo se contruyen del lado del servidor los datos recibidos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jagarsoft

01/12/2016
Dudas respecto a SPA
Hola Miguel Angel. Muchas gracias por el articulo. Ha sido muy interesante.
Me surgen dos dudas:
1. Yo matizaría las similitudes del historial. Si el historial sigue funcionando, y la ultima accion, digamos ha sido borrar un item, al pulsar atras, no hace que se recupere el item...
2. Si la pagina solo obtiene datos puros y los muestra, gran parte, si no toda, la lógica de seguridad de quién puede ver algo y cuándo, se traslada al frontend. ¿cómo se mantiene la seguridad en una SPA cuando esta al alcance del usuario?
Un saludo!

midesweb

01/12/2016
Respondiendo comentarios sobre las SPA
1.- El tema del historial es totalmente cierto, no todo tipo de acciones se almacenan en el historial. Si pulsas un botón para borrar algún dato generalmente eso no se almacena en el historial, sino en la base de datos. El historial se suele usar más para almacenar los cambios de pantallas, en la navegación dentro de la aplicación. Pero esto es un poco igual que las aplicaciones web tradicionales.
2.- El tema de la seguridad no lo puedes dejar del lado del frontend. Es igual que en las aplicaciones tradicionales. El proceso de Login lo realizas en el servidor, a no ser que uses algo como Firebase. En el caso que te loguees contra un API generalmente gestionarás devolviendo un token, que usarás en los siguientes accesos a información restringida dentro de ese API. Tenemos varios artículos que explican el procedimiento que se suele seguir en estos casos. Por ejemplo http://www.desarrolloweb.com/articulos/mismo-backend-diferentes-frontales.html

Apolo13

01/12/2016
Sabe lo que es SPA
Todo el mundo sabe lo que es un SPA, pero no se que tiene que ver esta pagina con la hidroterapia.
Aparte del cachondeo, usamos los mismos anacronismos para muchas cosas y esta costumbre nos puede conllevar muchos líos. No hace mucho, haciendo turismo, me encontré en la Parroquia de Santiago de Montilla (Córdoba) una inscripción encabezada con DOM (Deo Optimo Maximo).
Si es que para entender estas cosas, hay que saber hasta Latín.

Leandro

02/12/2016
SEO en SPA
El único problema de las SPA es el SEO, o ya se ha solucionado de alguna manera y Google lo interpreta bien.

midesweb

08/12/2016
SEO en SPA
Es la cuestión de siempre. Si haces un producto donde tu primera intención es generar contenido para conseguir posicionamiento en buscadores, SEO, pensar en una SPA no sería el camino más directo. El motivo es que proyectos tradicionales, con páginas de contenido con un CMS como WordPress posicionan mucho mejor, y son más fáciles y rápidas de desarrollar.
Pero respondiendo a tu pregunta, el SEO en SPA ya es posible, dado que Google interpreta el contenido que te viene desde un JSON que puedas estar trayendo con AJax. Paralelamente existen ya varios frameworks que permiten renderización en el lado del servidor en una SPA, como pueden ser Angular 2 o la librería React, por lo que puedes construir una web con el mismo código que es capaz de funcionar como una SPA y cuando llega Google renderizar el contenido del lado del servidor (con el mismo código), con lo que entregarías al buscador justamente lo que él quiere.
En resumen, hoy una SPA sí posiciona, pero da algo, o bastante, más de trabajo que un sitio tradicional.