Una SPA o Single Page Application es una aplicación web que se ejecuta siempre en la misma página, buscando mejorar la experiencia del usuario que no sufre la navegación entre páginas o las tan odiosas recargas de página o Postback. Combinando HTML5, CSS y JavaScript se va renderizando el contenido, posiblemente pre-cargado, que el usuario solicita en cada momento de una forma más dinámica, sin necesidad de navegar o cambiar la URL base de acceso a la aplicación. Por si no os habéis dado cuenta, SharePoint 2013 usa este concepto, lo podemos ver cuando accedemos a un sitio de colaboración, la mayoría de los enlaces están bajo la URL start.aspx y no recargan la página, tan solo se renderiza el contenido que solicitamos.
La idea es ¿Por qué no usar este concepto de aplicación para implementar nuestras soluciones de SharePoint? Los desarrolladores de SharePoint siempre nos hemos quejado porque incluir buenas prácticas o patrones de diseño en nuestras soluciones es altamente complejo, pero no imposible, y os lo voy a demostrar.
Existen diversos Frameworks JavaScript que nos permiten implementar una SPA, como Knockout, Angular o Backbone. Por ejemplo, Backbone nos permite aplicar el patrón MVC (Modelo-Vista-Controlador) y es posible hacerlo en una Aplicación o Solución de SharePoint.
Para los que no conozcan este patrón, básicamente y de una forma rápida, distribuimos nuestro código en tres patas:
- Modelo que representa los datos de dominio o la lógica de negocio
- Vista que nos permite visualizar el modelo
- Controlador que recibe las acciones del usuario y actualiza el modelo
Con Backbone es muy sencillo implementar el Modelo, las Vistas y el Controlador, que en Backbone lo representa las Rutas, empaquetar todo en un fichero JavaScript de aplicación y desplegarlo en SharePoint. Adiós a nuestro código espagueti y demos la bienvenida al maravilloso mundo del buen código.
Usando Backbone y el servicio REST de SharePoint seremos capaces de crear aplicaciones SharePoint y que nuestro código cumpla con los estándares actuales del mercado. Veamos un pequeño ejemplo:
Modelo
Item = Backbone.Model.extend({
defaults: function () {
return {
id: -1,
title: null
}
}
});
Vista
AppView = Backbone.View.extend({
el: $(«#app»),
events: {
«click #addItem»: «addItem»
},
addItem: function () {
var item = {
title: this.newItemName.val()
};
itemList.create(item);
this.newItemName.val(»);
},
initialize: function () {
this.newItemName = this.$(«#itemName»);
this.listenTo(this.model, ‘change’, this.render);
this.listenTo(this.model, ‘add’, this.render);
},
render: function () {
$(«#itemList»).html(«»);
if (this.model.length) {
for (var i = 0; i < this.model.length; i++) {
var view = new ItemView({ model: this.model.at(i) });
$(«#itemList»).append(view.render().el);
}
}
}
});
ItemView = Backbone.View.extend({
template: _.template($(‘#item-template’).html()),
initialize: function () {
this.listenTo(this.model, ‘change’, this.render);
this.listenTo(this.model, ‘destroy’, this.remove);
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Controlador
var router = Backbone.Router.extend({
routes: {
»: ‘home’,
‘new’: ‘viewNew’
},
home: function () {
itemList = new ItemSet();
itemList.fetch({ data: { page: ‘no’ } });
var app = new AppView({ model: itemList });
app.render();
},
viewNew: function () {
}
});
Os recomiendo echar un vistazo al proyecto Backbone.SharePoint que añade una capa de abstracción entre SharePoint y nuestro modelo.
¿Cómo desplegar una SPA en SharePoint?
Tenemos varios modos de despliegue para este tipo de aplicaciones en SharePoint:
- Mediante el nuevo modelo de Aplicación de SharePoint, en cualquiera de sus modos de alojamiento. La URL de acceso a la aplicación sería la URL de la Aplicación.
- Con una página desplegada en el PageLayout de SharePoint. La URL sería http://sitio/_layouts/15/SPA/app.aspx
- Con una página desplegada con un módulo en una biblioteca o en el root de SharePoint. Con una URL parecida a http://sitio/app.aspx o http://sitio/aplicaciones/app.aspx que desde el punto de vista del usuario, aparenta una mejor integración con lo que conoce como su SharePoint.
La idea es que el usuario acceda a una URL donde empezamos a hacer la magia y ejecutamos nuestra aplicación SPA mediante JavaScript, que utilicemos el servicio REST de SharePoint como back-end con los datos almacenados en listas o bibliotecas y que la experiencia de usuario sea similar a una aplicación de escritorio, tal como SharePoint 2013 implementa en algunos casos.
Saludos a todos…