Introducción al plugin Backbone.Drupal

Backbone.Drupal es un plugin para conectar aplicaciones BackboneJS y MarionetteJS con Drupal 7 permitiendo que el frontend y el backend esten en dominios separados de ser requerido. Está libreria se creo tomando los archivos de Javascript del módulo Drupal https://drupal.org/project/backbone como base.

1. Caracteristicas

Cross-origin: Habilita el uso Drupal como backend en un dominio como por ejemplo http://www.backend.com y la aplicación Backbone/Marionette en otro dominio frontend.com.

En el servidor de Drupal se debe configurar la cabeceras de HTTP Access Control para permitir la conexión de servidores externos via Javascript usando XMLHttpRequest, como se muestras a continuación.

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-CSRF-Token
Access-Control-Allow-Methods:POST,ADD,GET,PUT,DELETE,OPTIONS
Access-Control-Allow-Origin:http://localhost:8080

Adicionalmente se debe cambiar el origen y usar el dominio que se utilizara para ejecutar nuestra aplicación JS.

Yo recomiendo utilizar el modulo de Drupal CORS para configurar el control de acceso HTTP.

Autenticación: Opcionalmente se puede iniciar sesión con alguna cuenta de usuario de nuestro backend en Drupal y de esta forma permitir ejecutar operaciones REST como PUT, DELETE, ADD, etc. Si el CORS está habilitado no se requiere inicio de sesión para las operaciones GET.

Modelos: Incluye modelos Backbone para nodos, usuarios y comentarios

Es posible añadir campos adicionales a los modelos y utilizarlos como información extra en la aplicación, estos campos adicionales se pueden marcar como noSaveAttributes y evitar errores en los procesos de Save y Update. Como se muestra en el siguiente ejemplo.

var Property = Backbone.Drupal.Models.Node.extend({
      initialize : function(options) {
        // Setting the Id Attribute for Drupal model
        this.attributes.nid = options.property_id;
        this.noSaveAttributes = ['property_id'];

        // Extended Backbone.Drupal.Models.Node to my own service for Drupal Nodes.
        // This Rest service return absolute URL for field pictures
        this.urlSource = "node_waterbed";
       },

Colecciones: Incluye Colecciones de Backbone para los Usuarios, Nodos y Node Views. El collection Node Views permite enviar parámetros para los filtros expuestos utilizado la función setFilters() como se muestra a continuación.

var Results = Backbone.Drupal.Collections.NodeView.extend({
      initialize : function(options) {
          this.viewName = 'waterbed';
       },
    });

var results = new Results({});

results.setFilters(filters);

REST: Integración con Drupal Services usando el tipo de Servidor REST.

2. Como Usar Backbone.Drupal.

Lo primero que debemos hacer es asegurarnos que las librerías para utilizar Backbone.Drupal están disponible, como se muestra a continuación.

<script src="./jquery.js"></script>
<script src="./underscore.js"></script>
<script src="./backbone.js"></script>
<script src="./backbone.drupal.js"></script>
<script src="./backbone.drupal.services.js"></script>

Como se puede apreciar se requieren las librerías UndescoreJS, BackboneJ; Backbone.Drupal esta compuesto de 2 archivos. backbone.drupal.js implementa cambios generales en la forma que se hacen los llamados a los Services de Drupal y este cambiara muy probablemente para Drupal 8, el archivo backbone.drupal.services.js contiene la representación de modelos y collections

Luego de que ya tenemos Backbone.Drupal Cargado debemos informar a Backbone donde esta nuestro Servidor remoto que proveerá el Modelo de Datos como se muestra a continuación.

$(function() {
        // Set API Information
        Backbone.Drupal.restEndpoint = {
          root: 'http://onthisday/api',
          dataType: '.json'
        };
});

Con la anterior llamada todos las posteriores llamadas se harán al Rest EndPoint definido.

Opcionalmente poder realizar el proceso de autenticación de un usuario en Drupal para que las operaciones de PUT, ADD, DELETE sean posibles. Veamos un ejemplo de esta implementación.

// Define auth object, set crossDomain if is necessary
var Auth = new Backbone.Drupal.Auth({crossDomain: true});
// Request executed in sync mode
// If status is token further ajax will use the proper token
var auth_status =  = Auth.login('admin', 'admin');

if(auth_status) {
  // Some code
} 

Como se puede apreciar se crea un objeto de tipo Backbone.Drupal.Auth en donde indicamos si sera una autenticación Cross Domain o no, luego llamamos al proceso de autenticación usando el método login.

En caso de fallar retorna FALSE, pero si fue satisfactorio retorna TRUE y todas las llamada posteriores al Server de REST incluirá un token de autenticación que permitirá a Drupal identificar al usuario que esta tratando de hacer las operaciones.

Si desea ver un proyecto que utilize esta librería lo invito a ver el proyecto http://enzolutions.com/projects/marionettejs_waterbed.

Espero que haya sido de su agrado.