Una web SPA o single page application se refiere a una forma de desarrollo web en la que la página web está contenida en un único archivo. De esta forma, se carga todo en HTML y, mientras naveguemos por la página, irá solicitando el contenido al servidor via ajax. Es decir, todo el contenido html, css y javascript de la página web al completo se carga una primera vez y nada más. De esta forma se mejoran los tiempos de respuesta y, por consiguiente, la experiencia de usuario.

Hasta ahora, lo normal a la hora de desarrollar una web, era diseñarla como una multipage application (MPA o también conocido como page redraw).

Vamos a ver las diferencias que hay entre una multipage vs una single page. Una MPA consiste en que cada vez que visitemos una página específica de una web se cargará desde cero. Mientras que en las SPA, al visitar la página por primera vez se cargará completamente su estructura y, cada vez que pinchemos en el enlace, sólo solicitaremos al servidor el contenido ya que html, css y javascript están ya cargados.

La gran diferencia, entonces, entre una multipage application y una single page application es a la hora de navegar por la página web. Mientras que con una SPA, por cada enlace dentro de la web solo se cargará el contenido, que es lo que nos envía el servidor vía ajax; con una MPA se cargará todo desde cero.

En una SPA tenemos una única página pero contaremos con diferentes vistas. Cuando hablamos de vistas, nos referimos a los distintos apartados de nuestra web, es decir, como una pantalla en una aplicación de escritorio. Así que, en esta misma página, se irán intercambiando distintas vistas, dando la sensación de que visitamos varias páginas, aunque en realidad estemos todo el rato ante la misma página pero con diferente vista. Un ejemplo sencillo sería nuestro servidor de correo, que cuenta con una página de login pero una vez dentro, cada vez que cargamos un correo distinto será distinta vista pero la misma página.

De todos modos, aunque sea la misma página, la url podrá cambiar sin problemas según cambiemos de vista/página, ya que la clave para que sea una SPA es que esta vista/página nunca se recargará. Es más, es muy importante, de cara a tener una estructura clara de la web, que las url cambien también aunque se haya desarrollado con una SPA, para poder navegar de forma más eficiente por la misma.

Una SPA se creará siempre en Javascript. Ya que, al ser una aplicación web ejecutada del lado del cliente, no hay otro lenguaje que pueda hacer eso. A esto habrá que sumarle, lógicamente, el HTML y CSS.

Dentro de Javascript, contaremos con multitud de librerías y frameworks que nos facilitarán el desarrollo de las SPA. Algunas de las más usadas son:

  • AngularJS

  • Angular

  • VUE

  • React

  • EmberJS

  • Polymer

Este listado son las librerías y frameworks más comunes, aunque hay muchos otros. Escoger una librería y un framework dependerá, básicamente, de tus gustos, la experiencia que tengas con los mismos, el tamaño de la aplicación a desarrollar…

De todos modos, esto sólo aplica al front-end. Si queremos ampliar la pregunta al lado del back-end, es decir, del servidor, nos valdría cualquier lenguaje de back-end para producir la parte del servidor. Lo que tendríamos que hacer es crear un API REST que devuelva el JSON necesario para alimentar de datos a la SPA. Es decir, la SPA nos dara igual cómo esté desarrollada del lado del back-end, es totalmente independiente a este.

En Incentro, por ejemplo, solemos utilizar SPA con Bloomreach que es un CMS del que somos partners.

Desarrollar una página web SPA tiene muchas ventajas frente al MPA. Algunas de ellas son:

  • Se tratan de aplicaciones fáciles de desarrollar, desplegar y depurar. Al contar con infinitos frameworks y librerías, será muy sencillo de desarrollar.

  • Nos muestran el contenido de forma sencilla y elegante al cargar todo el contenido en una única página.

  • Además, ejecutando la lógica del lado del navegador, hace que las interacciones del usuario se ejecuten más rápido.

  • La analítica de la web es mucho mas sencilla puesto que solo analiza una única página.

  • También facilitará el SEM puesto que todas las llamadas y posibilidades de interacción se realizarán en una única página.

  • Muy útiles para la creación de páginas de aterrizaje. ¿Sabes qué es una landing page?

  • El SEO no es tan fácil como en una MPA, aunque esto es cada vez más sencillo de optimizar y no supone tanto problema como hace un tiempo.

  • En sitios muy grandes, el mantenimiento del código puede ser algo complicado y hay que tener desde el principio muy clara la estructura de la página.

  • Al tener el código fuente directamente en el navegador, si no seguimos buenas prácticas, la seguridad del sitio se podría ver expuesta.

  • Aunque las SPA son muy rápidas, al cargar la página por primera vez de forma completa, esto hace que esta carga sea algo lenta, lo que puede ahuyentar posibles clientes. De todos modos, actualmente, hay métodos para mejorar esta velocidad de carga, que veremos en otro post.

Como hemos visto, las SPA tienen muchas ventajas y también algunos inconvenientes a tener en cuenta. Según como sea tu proyecto, tendrás que valorar que tipo de desarrollo es mejor para el negocio. Si se trata de una web pequeña, sin mucho contenido, una SPA es perfecta para ello. Ahora bien, si se trata de una web compleja, tendremos que analizar en profundidad cuales son los pros y los contras de usar una u otra forma de programación.