Single Page Applications – Parte 1 – Definición y Arquitectura

En esta serie de posts veremos los conceptos detrás de las SPAs y como implementar una de estas aplicaciones.

¿Qué son las Single Page Applications?

SPAs son aplicaciones o sitios web que se ejecutan persistentemente sobre la misma página sin necesidad de recargar sin importar como el usuario interactúe.

Son aplicaciones ricas y responsivas que combinan lo mejor de la web y el escritorio, implementadas con Javascript y HTML5.

¿Qué beneficios tienen?

Por qué deberíamos considerar este tipo de aplicaciones:

  • Buena experiencia de usuario.
  • Reducen la carga en el servidor.
  • Similares a las aplicaciones nativas.
  • Pueden trabajar offline.
  • Pueden desplegarse en App-Stores

¿Cuál es su arquitectura?

Una aplicación “multi-page” tradicional usualmente sigue una arquitectura similar a la siguiente:

image 

  • Web UI: Contiene la lógica de negocio y a su vez se encarga de servir recursos HTML, JS, CSS desde el servidor.
  • Visible UI: Renderiza en el navegador la página web.
  • Application Layer: Código Javascript para manipular el comportamiento de la página dentro del navegador.

En cambio una aplicación SPA tiene una arquitectura similar a la siguiente:

image

  • Web UI: Contiene la lógica de negocio y a su vez se encarga de servir recursos HTML, JS, CSS desde el servidor.
  • Data Services: Provee datos en formato JSON o XML desde el servidor.
  • Data Access Layer: Se encarga de solicitar datos al servidor para que estos sean mostrados, enviar datos para que sean procesados.
  • Application Layer: También contiene mucha otra lógica relacionada a Navegación, Binding, etc.
  • Visible UI: También hace uso de templates para renderizar los datos.

¿Cómo implementar una SPA?

En los posts sucesivos veremos detalladamente como implementar una de estas aplicaciones. Como ejemplo utilizaremos el “Bakery Template” que es uno de los templates para construir aplicaciones web que viene por defecto dentro de WebMatrix.

Reutilizaremos su layout y estilos pero reharemos por completo toda la funcionalidad para que funcione como un SPA.

Hasta el siguiente post.
Saludos.