Backbone I | Introducción

Hoy hablaremos un poco de modelos y de específicamente una librería que provee dicha funcionalidad out of the box como es Backbone.

Modelo

Un modelo no es más que una clase que representan un entidad de nuestra aplicación. Dicha clase nos permite manipular los datos asociados a la misma y realizar diferentes tipos de operaciones como validaciones, transformaciones, etc.

Pueden ser tan simples como un Object literal hablando en términos de JavaScript o Functions Objects si quieres algo más extendible.

Abstraer la manipulación de los datos y separarla del flujo general de nuestra aplicación nos otorga una mayor versatilidad en términos de mantenimiento ya que será más sencillo encontrar y reparar bugs así como también implementar mejoras sobre todo si estás tienen que ver con cambios en el procesamiento de los datos.

Backbone

No es más que una librería escrita en JavaScript que nos permite crear aplicaciones web más flexibles y dinámicas a través de sus estructuras de datos ( modelos, collecciones ) y vistas. 

Generalmente se usa para construir las famosas SPAs ( single-page applications ) que no son más que aplicaciones web que cargan en el navegador y responden a cambios en los datos sin la necesidad de requerir un refresh completo de la página.

Ahora todo eso parece un tanto oscuro pero en realidad es bastante sencillo ya que conozcas más sobre la implementación.

Los dos componentes principales de Backbone son los modelos y las vistas. Los modelos nos permiten manipular los datos mientras que las vistas muestran el 'estado' de un modelo respondiendo a los cambios en el mismo a través de eventos (según especifiquemos) y es ahí donde prácticamente radica la magia.

 





Modelos

• Manejan la data y la lógica de negocios.
• Cargan y guardan la data en el servidor*.
• Emiten eventos cuando la data cambia.

// Ejemplo de modelo
var Users = Backbone.Model.extend({
 defaults: {
    "appetizer":  "caesar salad",
    "entree":     "ravioli",
    "dessert":    "cheesecake"
  }
});

* Los modelos vienen pre-configurados para sincronzarse con una API REST, sólo basta con definir el endpoint a donde se tienen que hacer los requests  y las Backbone realizará las operaciones CRUD de forma transparente.


Vistas

• Generalmente muestra el estado (data) de un modelo.
• Escuchan cambios en los modelos y despliegan los elementos que conforman la IU (Interfaz de Usuario) de la aplicación.
• Se encargan de la entrada y captura de datos a los modelos y la interactividad.

// Ejemplo de vista
var UserItem = Backbone.View.extend({
 tagName: "li",

  className: "user-item",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }
});

Y eso es todo por el momento. En la siguiente entrada vermos un poco más de los modelos y las coleciones junto con algunos ejemplos prácticos.


Happy hacking.