Backbone.js – MVC del lado del cliente – Javascript
Con el pasar de los años, Javascript se ha convertido en una herramienta indespensable para el desarrollo Web, esto debido a los cada vez más poderosos motores/interpretes que incorporan los nuevos navegadores, permitiendo que se puedan desarrollar grandes aplicaciones con distintas capacidades, todas ellas, implementadas con el flexible Javascript.
Esto ha generado que muchos desarrolladores creen sus propias librerías, frameworks, etc y que muchos otros comenzaran a preocuparse por los métodos y patrones utilizados para desarrollar en Javascript, hasta hace un tiempo dichos patrones eran nulos, solo código Espagueti.
Actualmente es posible encontrar bastante información sobre patrones de diseño para Javascript ( Google ), lo que claramente permite que muchos de nosotros podamos mejorar a la hora de crear aplicaciones web y aprovechar por completo las capacidades que Javascript ofrece.
Ahora al grano. ¿Que es Backbone.js ?
Backbone.js es una librería Javascript que permite implementar MVC (Modelo-Vista-Controlador ) en el lado del cliente, en su sitio web podemos leer la siguiente definición:Backbone supplies structure to JavaScript-heavy applications by providing modelswith key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Backbone entrega estructura a aplicaciones Javascript proporcionando modelos con vinculación clave-valor y eventos personalizables, colecciones con una gran API de funciones (utilizando Underscore.js), vista con manejo de eventos declarativo. Además de permitir conectar toda una aplicación mediante una interfaz JSON RESTful.
Es decir, nos da la posibilidad de estructurar nuestro código (etapa de desarrollo) de forma ordenada, categorizando cada elemento,objeto o clase basado en las acciones que lleva a cabo. (Si mezclas Backbone.js con Require.js obtienes un Killer-Combo.. pero ésto es para otro post)
Backbone nos presenta las tres capas de la siguiente forma: (Sea cada capa M,V y C)
- Capa Modelo: Backbone nos entrega dos clases (aceptemos llamar clase a los objetos Javascript que intentan tener un comportamiento similiar a una clase POO) que realizan acciones de almacén de datos y comunicación con el servidor. Backbone.Model y Backbone.Collection, en donde cada una tiene sus funciones y métodos específicos.
- Capa Vista: Aquí Backbone provee una sola clase llamada Backbone.View, que cuenta con métodos y funciones que permiten administrar los eventos realizados por el usuario al interactuar con los elementos de la página. En otras palabras, aquí va el código javascript de toda la vida.
- Capa Controlador: Backbone cambia el nombre de ésta capa por otro concepto, pero que básicamente realizan la misma función: Backbone.Router, su función es manejar los enlaces, url y funcionar como una central de acciones.
Utilizando éstas herramientas podemos configurar/separar nuestra aplicación dependiendo de lo que necesitamos realizar. Así utilizaremos Backbone.Model y Backbone.Collection para contener los datos que obtenemos y enviamos al servidor. Estas dos clases/objetos están diseñados para utilizar métodos REST en la comunicación con el servidor, por medio de datos JSON, aunque no es restrictivo. (Yo tuve que desarrollar utilizando WebServices creados con ASP .Net). Aquí Backbone.Mode está pensado para contener, identificar a un elemento en específico, por ejemplo, un post (con todos sus atributos: Titulo, Nombre Autor, fecha, contenido,etc), mientras que Backbone.Collection permite contener/almacenar una colección de post, permitiendo realizar distintas operaciones sobre la colección, gracias al uso de la librería Underscore.js, de la que Backbone depende.
En el caso de Backbone.View ésta nos permite manejar los eventos que ocurren en los elementos y reflejarlos en un modelo o colección. Un ejemplo de vista sería desplegar un listado de Posts, en donde cada uno muestra titulo, autor y fecha. Aquí es posible utilizar distintos approach para configurar la aplicación,uno de ellos es tener una vista general que contendrá el listado, y subvistas, una para cada modelo (post), así cada subvista estaría relacionada con un modelo (post, elemento de la colección), por lo que los cambios efectuados en dicha vista son fácilmente reflejables en el modelo asociado.
El caso del Router es un caso especial, es posible no utilizarlo o utilizarlo para distintas cosas, como parte de la capa Controlador, es posible utilizarlo para administrar las url (del tipo shebangs ej: !#inicio, !#listado), utilizando dicho atributo para iniciar o destruir una vista en particular. También es posible utilizarlo como dispatcher para eventos, etc.
Por ahora dejo éste resumen.
Saludos y happy codding!
