Los sitios web del tipo estáticas o dinámico, pueden tener una o varias páginas. El usuario navega por las páginas haciendo clic en enlaces o botones dispuestos en la página que está mirando. En este tipo de aplicaciones, puedes detectar la navegación entre páginas a través del efecto “parpadeo” del navegador, ese efecto generado cuando el usuario selecciona (o pincha) un botón o un link y por un lapso de tiempo minúsculo (milisegundos) la página se queda en blanco y rápidamente se refresca totalmente el navegador con la nueva página enviada por el servidor web.
A diferencia de las aplicaciones del tipo estático o dinámico, las aplicaciones SPA se caracteriza porque toda la aplicación encaja en una sola página, de ahí su nombre en inglés: Single-page Applications (SPA). En las SPA, el efecto parpadeo desaparece porque no se refresca toda la página, sino sus partes. Es decir, la navegación no se hace entre páginas sino que, la única página existente y mostrada al usuario, actualiza cada una de sus partes, dando la ilusión de que se muestra una nueva página cada vez que el usuario realiza una interacción de solicitud de datos.
Piensa en una página como un conjunto de partes (encabezado, tabla con datos, carrusel de imágenes, etc) donde cada una de las partes puede ser actualizada con contenido proveniente del servidor web. De esta manera, en la misma página van cambiando sus partes dando la ilusión de que estás navegando por las diferentes páginas de un sitio web. Es claro entonces pensar que, para lograr que varias páginas de un sitio web encajen en una sola página, se requiere a) presentar una sola página y b) un mecanismo de actualización de las partes que conforman la página. Este mecanismo consite en realizar una petición de datos al servidor y cuando éste responda con la información solicitada, el navegador unicamente actualiza la parte de la página con la información enviada por el servidor. Así, solo es actualizada una parte de la página en lugar de toda la página ( donde se produce el efecto parpadeo).
El ciclo de vida de estas aplicaciones contiene 2 pasos:
- 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.
- 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. Mientras que en una App Web tradicional el navegador web recupera del servidor el código y todos los recursos (imágenes, videos,etc) necesarios para visualizar una página, en las SPA existe una sola carga inicial de todos los recursos (principalmente código JavaScript) para mostrar el contenido de todas las páginas.
Además, 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 de cada página 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.
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 significa XML y Javascript asíncrono. La magia de Ajax es permitir las llamadas asíncronas del cliente al servidor que son necesarias para refrescar partes de una página. Por ejemplo, asumamos que tenemos la página con sus partes. Cuando el usuario realiza una petición de información que involucra cambiar una parte ( o 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 de la parte 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 considera aplicable para crear SPAs es el uso de iframes. Un iframe es una etiqueta de HTML que permite incrustar, en una página WEB, el contenido de otra página Web. De esta manera, una página puede ser concebida como la reunión de partes, las cuales provienen de otras páginas web.
Frameworks de JS
Los frameworks de Javascript son otra técnica para crear SPAs. Los frameworks traen todo listo para crear un sitio SPA. Generalmente, los frameworks abstraen la complejidad de las llamadas asíncronas (de Ajax), 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 bidireccional cliente-servidor, y en tiempo real. A través de esta comunicación, es posible lograr que el servidor envié unicamente el contenido de una cierta parte de la página.
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 fueron 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.