Single-Page Applications (SPA)

angular-durandal AngularJS, DurandalJS, EmberJS,… son algunos de los muchos Frameworks JavaScript sobre los que últimamente los desarrolladores web no paran de leer u oír hablar de ellos. ¿Para qué sirven estos Frameworks? Nos ayudan a desarrollar aplicaciones web o web sites utilizando una arquitectura Single Page Application (SPA).

¿Qué ha provocado el crecimiento de este tipo de arquitectura? Los navegadores actuales interpretan HTML5 de una forma eficiente y el creciente uso de servicios REST, permite que la lógica, o una gran parte de ella, se pueda llevar del lado servidor al lado cliente.

Las SPA únicamente se componen de HTML, CSS y JavaScript. Su arquitectura se basa en cargar todo lo necesario en una única página, e ir actualizándola dinámicamente con los recursos necesarios y/o añadiéndolos si hicieran falta, a medida que el usuario interactúa con la aplicación o site. Como resultado, la experiencia del usuario es mucho más rápida y fluida.

En las siguientes figuras podemos ver las diferencias en el ciclo de vida de una página ente las aplicaciones web tradicionales y las aplicaciones web con arquitectura SPA:

Como se puede observar, en las aplicaciones web tradicionales, cada vez que es necesario cargar una página, la aplicación llama al servidor, éste obtiene el html necesario, lo envía al navegador y éste se refresca para mostrar los nuevos datos.

En contraposición, las SPA’s, después de la primera llamada, ya no vuelve a interactuar directamente con el servidor, a partir de ese momento todas las interacciones con el servidor se producen mediante llamadas AJAX, las cuales devuelven los datos necesarios y el navegador no necesita refrescar la página, sino que está se refresca dinámicamente con los datos devueltos de la llamada.

Entonces, ¿qué papel juega el servidor en una SPA? El servidor en este caso únicamente se utiliza como Service Layer. Seguramente éste es el punto más sorprendente y que más cuesta asimilar para los desarrolladores web tradicionales, acostumbrados a que sea la parte servidor la que tenga más peso y tenga el rol principal.

Las SPA’s basan su arquitectura en las siguientes características:

Chunking: la página web es construida por partes, cargando fragmentos de HTML y datos JSON.
Controllers: todo el código JavaScript, la manipulación de datos y las llamadas AJAX, son reemplazados por controladores que separan las vistas de los modelos usando los patrones MVC o MVVM.
Templating: el código HTML y toda la manipulación del DOM, es reemplazado por el “binding” de los datos en “templates” HTML.
Routing: consiste en la selección de las vistas y la navegación, sin recargar la página, manteniendo el estado, elementos y datos.
Real-Time Communication: SPA’s realiza una comunicación “two-way”.
Local Storage: permite el funcionamiento y acceso sin conexión gracias a poder guardar datos en el navegador.

En la siguiente tabla se resumen algunos de los Pros y Contras de las SPA’s:

Gracias a todas las virtudes de las SPA’s, éstas están ganando terreno a pasos agigantados a las aplicaciones tradicionales, la pregunta es: ¿también podrán destronar a las Mobile Apps nativas?

Si quieres obtener más información acerca de cómo Sogeti puede ayudarte en el desarrollo de aplicaciones web, haga clic aquí.

Más información:

Roberto Bermejo