[SharePoint] Crear una interfaz de usuario potente: Integrar Backbone + Ractive.JS (II)

En el anterior post introdujimos un nuevo framework: JavaScript RactiveJS que nos otorga muchas ventajas a la hora de renderizar el HTML. Ahora bien, para potenciar este framework, en este post vamos a ver cómo poder integrarlo con Backbone.

Backbone es uno de los frameworks más utilizados en aplicaciones «grandes» debido a que te permite dotar de una arquitectura MVC a la aplicación JavaScript. Nuestra idea es dedicar cada framework a potenciar sus principales caracteristicas, Ractive para las Vistas y Backbone para las colecciones de datos.

Introducción a Backbone

Backbone es un framework que sirve para dotar de una estructura MVC en nuestro desarrollo de JavaScript, esto hace que nuestra aplicación JavaScript tenga una buena arquitectura, y sea mucho más escalable y mantenible. Su principal fuerte es el trabajo con las colecciones, que es relativamente simple, y que la facilidad con la que obtiene el modelo de nuestra petición REST.
Por ejemplo, el trabajar con Colecciones es algo tan sencillo como lo siguiente:

var Empleados= new Backbone.Collection([
  {name: "Adrian", subName:"Diaz"},
  {name: "Alberto",subName:"Diaz"},
  {name: "Iwan", subName:""},
  {name: "Hugo", subName:"De Juan"}
]);

//utilizar filtros
var result= Empleados.Where({subName:"Diaz"});
alert(result)

Para poder trabajar más facilmente con las colecciones, Backbone utiliza underscore.js para facilitarnos este trabajo.
Backbone esta preparado para trabajar con una API Rest autentica, de tal forma que podamos mapear directamente esta colleción de Backbone con nuestro origen de datos. Por ejemplo:

Empleados.add({name:"Francisco",subName:"Martí"});

Ahora bien. para trabajar con SharePoint, la API Rest no sigue el estándar 100% y por lo tanto hay que realizar algunas modificaciones para adaptar Backbone con la forma que trabaja SharePoint. Para solventar este inconveniente tenemos dos opciones:

1. Extender las Colecciones de Backbone
2. Utilizar este proyecto GitHub que parsea las listas de SharePoint con las colecciones de Backbone

En nuestro vamos a utilizar este proyecto GitHub, ya que tiene todas las operaciones CRUD y esta preparado tanto para la versión OnLine como OnPremises.

Como utilizarlo:

 // You define a Contact Model for items by extending Backbone.SP.Item
// Required parameters are the SharePoint site and the name of the list

var Contact = Backbone.SP.Item.extend({
    site: '/teamsite',
    list: 'Contacts'
})
// Create a new contact, the attributes refer to item column names.
// Please note capitals. We follow SharePoint conventions
var contact = new Contact({ LastName: "Davis" })

// At this point we have a new contact model, but is not yet saved to the server.
// So let's save it to the server.
contact.save()

// you can define a SP List by extending Backbone.SP.List.
// Configure the list by associating it with a Model extended from Backbone.SP.Item
var Contacts = Backbone.SP.List.extend({
    model: Contact
})

// now, you can create a list
var contacts = new Contacts

// get contacts list from the server
contacts.fetch()

// the fetch options allow you to use query options
// for example, the request below will fetch only the LastName and FirstName columns
// for item 11..15 when ordered descending by LastName
contacts.fetch({
    select: 'LastName, FirstName',
    orderby: 'LastName desc',
    top: 5,
    skip:10
})

Añadir a RactiveJS: Backbone

Como hemos visto tanto Ractive como Backbone son dos grandes frameworks JavaScript, pero cada uno de ellos tiene unas características especificas, lo que queremos hacer es aprovechar el punto fuerte de ambos. RactiveJS se encargará del renderizado de las vistas y la lógica de negocio la incluiremos con Backbone.

Para empezar a incluirlos, en primer lugar, cuando nos creemos un objeto RactiveJS, lo que tendremos que hacer es indicar a RactiveJS que va a utilizar un adaptar Backbone que sera el encargado de enviarle las colecciones de Backbone al objeto RactiveJS.

    ractive = new Ractive({
        el: example,
        template: template,
        adapt: ['Backbone']
    });

Una vez indicado que vamos a utilizar Backbone, el siguiente paso es crear la/s coleccion/es que vamos a utilizar, en nuestro ejemplo vamos a crear una colección Contactos (que será una lista de SharePoint).

var Contact = Backbone.SP.Item.extend({
    site: '/teamsite',
    list: 'Contacts'
});
var Contacts = Backbone.SP.List.extend({
    model: Contact
});
var contacts = new Contacts;

Una vez consultados los datos, asignamos esta colección a nuestro objeto RactiveJS para ello:

 ractive.set({
    contacts: contacts
  });

Con esta forma tan sencilla hemos delegado la manipulación de los datos a Backbone, y ahora mismo trabajar con listas de SharePoint es algo transparente al sistema. No tenemos que estar pensando en sentencias CAMLQuery, ni en llamadas asíncronas que nos dificulten el trabajo. Backbone trabaja de forma «normal» a como si trabajase con otra API Rest y esto nos abstrae de problemas en la comunicación. Además, no solamente se encarga de los datos, sino que también tiene la posibilidad de utilizar vistas, aunque el renderizado de las mismas no es tan eficiente como el de Ractive. Esta forma de utilizar Backbone esta presente en algunos otros frameworks JavaScript que intentan aprovechar esta potencia con el manejo de colecciones y centrarse en la capa vista.

Conclusión

Hemos visto que existen muchas alternativas de frameworks JavaScript, RactiveJS es una gran alternativa para poder utilizarla ya que es muy flexible y permite potenciarla con otros frameworks. Al integrarlo con otros frameworks tenemos el beneficio de potenciar lo que no tiene Ractive y solamente quedarnos con lo mejor del otro framework. Asímismo, conforme vamos desarrollando proyectos en RactiveJS vamos teniendo cada vez más componentes, lo que hace que podamos reutilizarlos y ser más eficientes. En el siguiente post escribiré cómo incluimos todo en nuestros desarrollos diarios en ENCAMINA (algo que por problemas en la conexión no pudimos hacer en el GUSENET).