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.
![](/resized-image.ashx/__size/800x0/__key/CommunityServer.Blogs.Components.WeblogFiles/adiazmartin/spa_5F00_1.png)
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
![](/resized-image.ashx/__size/800x0/__key/CommunityServer.Blogs.Components.WeblogFiles/adiazmartin/spa_5F00_2.png)
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…