Creando aplicaciones

client-side con
Django y Backbone.js
Problema/Desafio
La necesidad de hoy en dia en aplicaciones web.
En web concurridas, el desafo es mejorar los tiempos de
respuesta, bajar la tasa de transferencia de datos.
La solucin: mover el cdigo de nuestra aplicacin, que
hasta ahora la tenemos del lado del servidor, hacia el lado
del cliente.
Esto nos lleva a tener trabajar en una aplicacin web que
implica una gran cantidad de cdigo JavaScript.
Solucin
Es muy fcil!
Creamos aplicaciones de JavaScript llenas de selectores
de jQuery y devoluciones de llamada, tratando
desesperadamente de mantener los datos sincronizados
entre la interfaz de usuario HTML, la lgica de JavaScript,
y la base de datos en el servidor :(
Para aplicaciones cliente-side, un enfoque ms
estructurado va a ser til.
Para esto, Backbone.js
Backbone - definicin
Backbone.js nos brinda una estructura para aplicaciones
web cliente-side.
Nos provee:
Modelos con clave-valor y eventos customizables.
Colecciones para manejar los modelos con
enumerables funciones.
Vistas con manejo de eventos.
Y el poder de conectar todo esto a una API RESTfull
con interface JSON.
Integrar backbone.js en nuestra
aplicacin Django
Del lado del servidor:
django
django-tastypie
Del lado del cliente:
backbone.js
underscore.js _.template("<% print('Hello ' + var); %>");
backbone-tastypie.js https://github.
com/PaulUithol/backbone-tastypie
Introduccion Django
models.py
forms.py
views.py
urls.py
django -> backbone.js
models -> Backbone.Model (API REST)
manager -> Backbone.Collection
views -> Backbone.View (eventos)
urls -> Backbone.Router
templates -> Underscore
Moviendo del servidor al Cliente
Aplicacin Blog de ejemplo
Backbone.js
Backbone.Model
Backbone.Collection
Backbone.View
Backbone.Model
PostModel = Backbone.Model.extend({
urlRoot : "/api/v1/post/"});
model.toJSON()
model.fetch()
model.get(attribute)
model.clear([options])
model.fetch([options])
model.save([attributes], [options])
model.destroy([options])
model.validate(attributes)
model.url()
Backbone.Collection
PostCollection = Backbone.Collection.extend({
url: "/api/v1/post/",
model: PostModel
});
Provee 28 funciones de iteracin:
map, reduce, filter, find, sortBy, min, max, shuffle,
toArray, size, isEmpty,...
collection.add(new Post({title: "test", body: "some text"}));
collection.where(attributes) -> arreglo con resultados
collection.fetch([options]) -> trae los datos desde el
servidor
Backbone.View
var AboutView = Backbone.View.extend({
el: $('#main_content'),
template: _.template($('#about_tpl').html()),
render: function(){
this.$el.html(this.template);
return this;
}
});
about_view = new AboutView;
Catalogo de eventos que Backbone.js puede
disparar.
Importante tenerlos en cuenta en las vistas para enlazar a acciones.
"add" (model, collection) when a model is added to a collection.
"remove" (model, collection) when a model is removed from a collection.
"reset" (collection) when the collection's entire contents have been replaced.
"change" (model, options) when a model's attributes have changed.
"change:[attribute]" (model, value, options) when a specific attribute has
been updated.
"destroy" (model, collection) when a model is destroyed.
"sync" (model, collection) triggers whenever a model has been successfully
synced to the server.
"error" (model, collection) when a model's validation fails, or a save call fails
on the server.
"route:[name]" (router) when one of a router's routes has matched.
"all" this special event fires for any triggered event, passing the event name
as the first argument.
Backbone.Router
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {...},
search: function(query, page) {...}
});
Backbone.sync
Es la funcin que Backbone llama cada vez que se intenta
leer o guardar un modelo en el servidor.
Por defecto, se utiliza (jQuery / Zepto). Ajax para hacer una
peticin REST JSON
create POST /collection
read GET /collection[/id]
update PUT /collection/id
delete DELETE /collection/id
Del lado del Servidor
Tastypie
https://github.com/toastdriven/django-tastypie
Aprovecho para agradecerle a Daniel Lindsley
https://github.com/toastdriven
otros proyectos:
django-haystack
Preguntas?
https://github.com/fsilvera/pyconuy
francisco@devsar.com
@fsilvera
www.devsar.com