Cargar una web es un factor clave en la satisfacción del usuario y influye tanto en la tasa de conversión, experiencia de usuario como en el abandono de la página.
Es algo que se entiende y damos por hecho. Tenemos muy asimilado y no prestamos tanta atención porque es la expectativa que tenemos para cualquier web. Pero, si nos fijamos bien, notaremos que en páginas o redes tan famosas como Gmail, Google Maps, LinkedIn, Trello o Twitter la carga entre vistas es extremadamente rápida. Esto se debe a que son ejemplos de single-page application.
En este artículo, te explicamos en qué consisten las SPA, sus características, sus tecnologías y los casos de uso recomendados.
¿Qué es una Single-Page Application?
Una Single-Page Application (SPA) es un tipo de aplicación web que ejecuta todo su contenido en una sola página.
Funciona cargando el contenido HTML, CSS y JavaScript por completo al abrir la web. Al ir pasando de una sección a otra, solo necesita cargar el contenido nuevo de forma dinámica si este lo requiere, pero no hace falta cargar la página por completo. Esto mejora los tiempos de respuesta y agiliza mucho la navegación, favoreciendo así a la experiencia de usuario.
Que sea una única página no significa que tenga un scroll eterno o que el contenido no esté estructurado. La realidad es que, dentro de esa propia página, podemos obtener distintas vistas para cada apartado de la web. Estas serían equivalentes a las diferentes páginas de las que se compone una MPA (Multi Page Application).
Respecto a las URLs del navegador, existe la posibilidad de que se vayan modificando en la barra de direcciones a medida que intercambiamos las vistas. Como hemos dicho, no se cambia la página, pero sí el contenido. Otorgar una URL propia a cada pantalla es muy útil de cara a aspectos como la navegabilidad (por ejemplo, para utilizar el botón de retroceder o avanzar una página en el navegador y para que constate en el historial) o para compartirla o guardarla en marcadores, por ejemplo. Con su URL única, podremos acceder directamente a la pantalla a la que hace referencia, sin necesidad de realizar el recorrido desde la home.
Características de las SPA: Ventajas e Inconvenientes
Está claro que la característica más destacada de las SPA es la navegación ágil y fluida. Todo el contenido inicial se carga una única vez, por lo que el tiempo de espera en el paso de una sección a otra es prácticamente inexistente. Estas utilizan menos recursos del servidor, lo que, además de aumentar la velocidad, es beneficioso también para conexiones de Internet lentas. En definitiva, el single-page resuelve uno de los puntos clave de la experiencia de usuario.
Este tipo de páginas encuentran menos trabas tanto en su creación y diseño como en su actualización. Además, existe una amplia variedad de frameworks y librerías JavaScript útiles para su desarrollo.
También se suele destacar lo convenientes que resultan para landing pages o incluso para crear aplicaciones similares. El motivo es que se hace más sencillo replicar o reutilizar el código existente, por lo que introduciendo algunas modificaciones se logran resultados profesionales en menos tiempo.
Por último, debemos mencionar el menor coste generado por el servidor (al haber menos requests) y que, al tomarse en cuenta una sola página, se simplifica la analítica web.
Sin embargo, las SPA también tienen sus inconvenientes. Por ejemplo, si hablamos de un sitio web relativamente grande, la primera carga podría ser más lenta (al tener que preparar tal cantidad de contenido para su visualización a la vez) y también se complicará el mantenimiento. Sin embargo, esto se puede evitar haciendo un estudio previo de cada proyecto para determinar si una SPA es la mejor alternativa.
Por otro lado, debemos prestar especial atención a la seguridad, pues podría verse comprometida al estar el código fuente en el lado del cliente, en el propio navegador.
Finalmente, el inconveniente más sonado es el referente al SEO de las single-page apps, que resulta más complicado de optimizar. Para los motores de búsqueda, se dificulta la indexación al haber contenido en “segundo plano”, esto es, en otras vistas que no son la principal.
Tecnologías que utiliza una Single-Page App
La arquitectura de una SPA se sustenta en la carga de una sola página de forma inicial, a la que se van agregando los contenidos necesarios de forma dinámica al cambiar de vista o interactuar. Para esas “cargas”, se va solicitando el contenido al servidor utilizando Ajax o WebSocket.
Como se ejecutan en el navegador, los sitios single page utilizan el lenguaje JavaScript para su frontend, complementado con tecnologías HTML y CSS. Lo más habitual es utilizar librerías y frameworks, entre los que debemos destacar React, Angular, Ember.js, Vue.js y Polymer.
Respecto al backend, se puede utilizar cualquier lenguaje porque es independiente del frontend. Lo importante será crear una API REST que devuelva el JSON, de forma que aporte el contenido necesario para la Single Page Application.
Este tipo de aplicaciones se puede lograr con Angular y por esto tenemos un gran contenido educativo y gratis, sobre curso de angular, curso de node y aprender a programar desde cero.
Curso de Angular para principiantes ⭐⭐⭐⭐⭐
Más de 19.000 estudiantes que ya están aprendiendo Angular de manera divertida y sobre todo con el objetivo de crear un proyecto funcional que les sirve para adquirir el conocimiento básico fundamental. Por otra parte nuestro ejercicio se basa en crear un clon de Spotify por lo cual es un excelente portafolio para conseguir tu trabajo como programador junior en angular. Cada mes estoy generando cupones para brindar la oportunidad a todos los que forman parte de la comunidad de Leifer Mendez y angular en general. (Canjear cupón)
¿Cuándo conviene desarrollar una SPA?
Las SPA tienen muchas ventajas, pero un análisis previo del negocio es fundamental para reducir al mínimo las dificultades o inconvenientes que también presentan.
Una single-page application suele ser más recomendable para webs más pequeñas, es decir, sin una carga de contenido demasiado extensa. También para pymes o startups que buscan un sitio funcional y bien diseñado para iniciar su presencia online. Sin embargo, si el sitio es más completo, la decisión se complica un poco más. Cuando hay muchas secciones diferenciadas y una jerarquía más compleja, limitarlas a simples vistas puede resultar contraproducente.
De igual forma, tenemos que estudiar los objetivos del site. Por ejemplo, si buscamos lograr un posicionamiento orgánico óptimo, consideraremos que, por lo general, es mucho más sencillo de conseguir con una MPA. Lo mismo ocurre con los e-commerce, donde, tanto por la cantidad de productos mostrados como por la conveniencia de posicionar cada uno de ellos en el buscador, lo más adecuado es una multi-page application.
De cualquier modo, también se puede decantar por un modelo híbrido, que conste de un sitio web tradicional desde el cual se pueda acceder a single-page apps a modo de subaplicaciones.
Las Single-Page Applications, ¿tendencia de futuro?
Que sitios tan reconocidos como los que mencionamos al inicio se sustenten sobre una SPA es un indicador positivo para su crecimiento. De hecho, muchas empresas están optando últimamente por este desarrollo y diversas consultoras lo consideran una tendencia tecnológica para este año.
En resumen, si nuestro sitio web no es muy complejo y buscamos una navegación sencilla, fácil de actualizar y, sobre todo, muy rápida, debemos contar con una SPA entre las opciones a valorar.