Share on FacebookTweet about this on TwitterShare on Google+

Por SPA se conocen las aplicaciones de una sola página o Single Page Applications. La aplicación se envía al navegador y la página no se recarga durante el uso de la aplicación.
Una aplicación con esta arquitectura podría realizar cualquier función que desarrolle una aplicación tradicional de escritorio ya que el tiempo de respuesta es mucho más rápido que el de una aplicación web tradicional.

lifecycle_spa

En cuanto a la arquitectura de la aplicación, la mayor parte de la funcionalidad se lleva al cliente. Lo podríamos ver como un fat-client que se carga desde un servidor web. El código en servidor se usa básicamente para proveer de una API RESTful a nuestro código cliente usando Ajax.

Comparativa web multi página con un SPA

Ventajas de JavaScript

Las tres plataformas de SPA más utilizadas son Java applets, Flash/Flex y JavaScript.
La mejor elección es JavaScript por las siguientes razones:

  • No necesita ningún plugin ni ninguna configuración de seguridad adicional.
  • Utiliza menos recursos que introducir otro entorno de ejecución adicional.
  • Una página más fluida e interactiva: la interfaz de la aplicación es la ventana completa del navegador

Por contra JavaScript ha tardado en ser competitivo principalmente por las inconsistencias entre los distintos navegadores.
Si comparamos un SPA con desarrollos de aplicaciones de escritorio tradicionales, podemos ver como también hay numerosos puntos a favor de JavaScript:

  • El navegador es la aplicación más utilizada del mundo, ejecutar un SPA es tan sencillo como hacer un clic en una entrada en la barra de favoritos. El despliegue de la aplicación también es trivial
  • Es una solución multiplataforma
  • JavaScript se ha vuelto extremadamente rápido gracias a la competencia entre los distintos navegadores
  • La propia evolución de JavaScript con el uso de JSON, jQuery, AJAX y muchas librerías actuales y potentes.
  • Podemos utilizar JavaScript tanto en servidor como en cliente mediante Node.js.
  • Existen bases de datos que pueden comunicarse directamente en JSON como CouchDB o MongoDB

Dadas las ventajas inherentes a JavaScript hay herramientas para trabajar en otros lenguajes de programación y que generan posteriormente JavaScript. Un ejemplo es Google Web Toolkit (GWT) que genera JavaScript desde Java o Cappuccino que utiliza Objective-C.

Inconvenientes de un SPA mediante JavaScript

Dada la naturaleza de un SPA nos vamos a encontrar con los siguientes inconvenientes que deberemos solucionar:

Código JavaScript extenso

El código JavaScript aumenta considerablemente. Debemos usar namespaces y su uso en JavaScript no es del todo evidente. Si no tienes claro su uso, echa un vistazo a este post sobre variables, funciones y objetos en JavaScript.

Enrutamiento en cliente

En una aplicación web tradicional hay varias páginas, cada una en su correspondiente URL. En este caso tenemos una sola URL, por lo que se debe guardar un histórico de algún modo de lo que va pasando para poder hacer bookmarks y poder utilizar los botones de retroceso y avance del historial del navegador.
Algunas librerías que podemos utilizar para el control del estado de la aplicación son Sammy.js y history.js.

Código html extenso

Una posible solución para nuestro SPA podría ser crear las pantallas de nuestra aplicación en el body del html encerradas mediante etiquetas div. En función de determinados eventos podríamos ocultar un div y mostrar otro, pero las páginas quedarían muy extensas.
Lo evitaremos dejando vacío el body y generando el contenido del mismo de forma dinámica mediante JavaScript. Para que el JavaScript genere el código html con facilidad, realizaremos las vistas o views mediante templates. Puedes ver algún ejemplo de uso mediante handlebars.

Frameworks de JavaScript

Para solucionar todos los problemas anteriores y muchos otros lo mejor es utilizar librerías o frameworks de JavaScript.
Algunos de los frameworks más conocidos son AngularJS, Backbone, Knockout y Ember.
Algunas de las ventajas de usar frameworks pueden ser:

  • UI Bindings: Se debe actualizar la vista cuando el modelo cambie, de forma automática.
  • Vistas compuestas: nuestro código se vuelve modular y reusable

El framework no debe gestionar la apariencia y el layout, ya que podría limitarnos. Para eso css y html son suficientemente potentes.

Presentación

Dejo un enlace a una presentación sobre arquitectura de SPAs para móviles basado en presentaciones similares de gente de Adobe.

Leave a Reply

Your email address will not be published. Required fields are marked *