Single-Page Application: Web Apps modernas

Single-Page Applications (SPAs) son aplicaciones web que cargan una única página de HTML y la actualizan de forma dinámica en función de las interacciones del usuario con esa página.

SPAs utiliza HTML5, CSS y AJAX para crear aplicaciones fluida sin recargar la página de forma constante. Básicamente, toda la carga de la página y toda su interacción se encuentra en el lado del cliente mediante JavaScript.

En una página tradicional, cada vez que se hace una navegación del cliente al servidor este renderiza una nueva página de HTML. Esto, ejecuta un refresco de la página en el navegador del cliente.

En una página SPA, después de que la página sea cargada por primera vez, todas las interacciones con el servidor suceden a través de llamadas AJAX. Este devuelve datos, no tags en HTML, normalmente en un formato JSON. La aplicación web usa los datos devueltos en JSON para actualizar la página de forma dinámica, sin tener que recargar la página completa.

Cómo podéis observar, el ciclo de vida de las páginas SPA ofrecerán un rendimiento más fluido sin tener que volver a hacer que la página se recargue al completo.

Uno de los aspectos más cambiantes es la arquitectura de nuestra aplicación web. El envío de peticiones mediante AJAX y recepción de resultados mediante JSON crea una separación entre la capa de presentación y la lógica de la aplicación.

Esta separación hace que sea más fácil diseñar y mejorar cada una de las capas por separado. Si implementamos nuestra arquitectura correctamente, podremos cambiar el código HTML sin tocar el código que implementa la lógica de la aplicaciones, haciendo nuestra solución la ideal.

En esta arquitectura, toda la interacción del usuario con la UI sucede en el cliente (browser) a través de JavaScript y CSS dejando al servidor cómo una capa de servicio, es decir, que el servidor encapsulará una Web Api para dar respuesta a las peticiones HTTP de la SPA.

Con esta arquitectura, el cliente y el servicio son independientes pudiendo reemplazar al completo todo nuestro back end siempre y cuándo las cabeceras de la API se conserven para que el cliente pueda ejecutar las llamadas HTTP sin modificación. Por supuesto, lo contrario, también sería completamente posible. Podríamos escribir una aplicación móvil nativa o cualquier otra aplicación que consumiera la API al completo.

Para hacer SPAs existen diferentes Frameworks de JavaScript que podemos usar. En próximos articulos veremos frameworks cómo KnockoutJs, AngularJs y Ember.Js para el lado del cliente sobre ASP.NET, y ASP.NET Web Api para nuestro back-end.

Un saludo!!