Saltar la navegación

Aplicaciones Web de Página Única (SPA)

Single Page Applications (SPAs)

Una aplicación Web de una única página o Single-page Applications (SPA), en inglés, es un tipo de aplicación Web en la que toda la aplicación encaja en una sola página.

El ciclo de vida de estas aplicaciones contiene 2 pasos:

  1. Carga inicial.- En esta etapa, la página inicial, en la que se desarrolla toda la aplicación Web, se carga por completo. Esto incluye todas las librerías necesarias para su funcionamiento.
  2. Actualización de regiones.- Una vez cargada la aplicación por completo, el usuario interactúa con la aplicación solicitando y recibiendo información. Las páginas no se actualizan por completo, sino por partes. Es decir, la página actualiza únicamente las regiones de la página que están involucradas con la solicitud del usuario. Esta estrategia hace que tú mires una única página, pero tras telones, esta única página se forma con fragmentos de información de otras páginas que son enviados por el servidor y cargados en las regiones actualizables de la página.

Ya que este tipo de aplicaciones necesita cargar todas las librerías y frameworks necesarios para funcionar, la velocidad de carga inicial es más lenta que en una aplicación Web tradicional. En una App Web tradicional, la página web que se carga se limita únicamente a recuperar del servidor, el código de la página y los recursos como imágenes, videos. La construcción de las app Web tradicionales no considera el uso de frameworks o librerías de terceros, por lo tanto, en la carga no es necesario recuperar una cantidad representativa de librerías; es por eso que el tiempo de carga es más rápido en las app Web tradicionales.

Técnicas

Existen varias técnicas para crear este tipo de aplicaciones, es decir, para que la aplicación Web funciones sobre una misma página. Aquí se detalla algunas:

Ajax 

Ajax que significa XML y Javascript asíncrono. La magia de Ajax es permitir las llamadas asíncronas del cliente al servidor. Por ejemplo, asumamos que tenemos la página con sus sectores. Cuando el usuario realiza una petición de información que involucra cambiar una región de la página, en lugar de refrescar o actualizar toda la página, mediante ajax se puede realizar una llamada al servidor y traer únicamente el contenido del sector que debe ser cambiado. De esta manera, el efecto de parpadeo de carga de la página no existe y la página se mantiene actualizada.

Una librería bastante utilizada que facilita el uso de Ajax es JQuery. Una herramienta bastante fácil de usar con la que se pueden conseguir sitios muy profesionales.

Iframe

Otra técnica que también se la cosidera aplicable para crear SPAs es el uso de iframes. Un ifrma es una etiqueta de HTML que permite incrustar, en una página WEB, el contenido de otra página Web.

Frameworks de JS

Los frameworks de Javascript son otra técnica para crear SPAs. Los frameworks traen todo listo para crear un sitio completo en una sola página. Generalmente, los frameworks abstraen la complejidad de las llamadas asíncronas, haciendo que la programación sea fácil para el desarrollador. Ejemplos de estos frameworks son Anjular,ls, ExtJS, REact entre otros.

Websockets

Los websockets son una tecnología que permite establecer una comunicación cliente-servidor en tiempo real.

Plugins de navegadores

Los plugins de navegadores, aunque ya es una técnica bastante antigua y está en desuso, permiten incrustar animaciones y dinamismo en un una sola página. Es como tener un programa incrustado y ejecutándose dentro de la página Web. Ejemplos de plugins son las animaciones realizadas en Flash ( que en Google Chrome serán desabilitadas a partir de diciembre del 2020), Silverlight o Applets de Java. La vulnerabilidad en la seguridad y la velocidad de carga son algunas de las principales razones por las que los plugins están en desuso.