Creando aplicaciones client-side con Django y Backbone.js

Transcripción

1 Creando aplicaciones client-side con Django y Backbone.js

2 Problema/Desafio La necesidad de hoy en dia en aplicaciones web. En web concurridas, el desafío es mejorar los tiempos de respuesta, bajar la tasa de transferencia de datos. La solución: mover el código de nuestra aplicación, que hasta ahora la tenemos del lado del servidor, hacia el lado del cliente. Esto nos lleva a tener trabajar en una aplicación web que implica una gran cantidad de código JavaScript.

3 Solución Es muy fácil! 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 lógica de JavaScript, y la base de datos en el servidor :( Para aplicaciones cliente-side, un enfoque más estructurado va a ser útil. Para esto, Backbone.js

4 Backbone - definición 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.

5 Integrar backbone.js en nuestra aplicación Django Del lado del servidor: django django-tastypie Del lado del cliente: backbone.js underscore.js _.template("<% print('hello ' + var); %>"); backbone-tastypie.js com/pauluithol/backbone-tastypie

6 Introduccion Django models.py forms.py views.py urls.py

7 Moviendo del servidor al Cliente django -> backbone.js models -> Backbone.Model (API REST) manager -> Backbone.Collection views -> Backbone.View (eventos) urls -> Backbone.Router templates -> Underscore

8 Aplicación Blog de ejemplo

9 Backbone.js Backbone.Model Backbone.Collection Backbone.View

10 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()

11 Backbone.Collection PostCollection = Backbone.Collection.extend({ url: "/api/v1/post/", model: PostModel }); Provee 28 funciones de iteración: 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

12 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;

13 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.

14 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) {...} });

15 Backbone.sync Es la función 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 petición REST JSON create POST /collection read GET /collection[/id] update PUT /collection/id delete DELETE /collection/id

16 Del lado del Servidor Tastypie Aprovecho para agradecerle a Daniel Lindsley otros proyectos: django-haystack

17 Preguntas?