Introducción a Backbone.js   Damián Serrano Thode (@dsthode)          Betabeers Málaga             06/09/2012
¿Qué es Backbone.js?    Es un entorno pseudo-MVC creado por               DocumentCloud    Ayuda a estructurar el código j...
Componentes de Backbone.js          Modelos         Colecciones           Vistas         Enrutadores
Modelos Almacenan las propiedades de los objetos   Gestionan el estado, la persistencia y la                 validaciónTie...
Colecciones      Contienen conjuntos de modelos  Gestionan la carga de conjuntos de datosTambién tienen funciones auxiliar...
Vistas     Son la parte visible de la aplicaciónControlan los eventos de las colecciones y las        subvistas, y el fluj...
EnrutadoresGestionan el “cambio de página”
Crear una aplicación sencillaUsar la API de YouTube para obtener una lista devídeos y mostrarlos en pantalla
RequisitosJquery → http://jquery.comLibrería Javascript (mundialmente conocida)
RequisitosJSON2 → https://github.com/douglascrockford/JSON-jsUna librería Javascript para la manipulación de JSON
RequisitosUnderscore → http://underscorejs.orgOtra librería Javascript, desarrollada por los deBackbone.js
RequisitosBackbone.js → http://backbonejs.org
Creación del modeloVa a contener los datos de un vídeo de YouTube●   Id●   Dimensiones●   URL de los streams●   Comentario...
Creación del modelovar Models = {     Video: Backbone.Model.extend(),};
Creación de la colecciónContiene la lista de vídeos obtenidos mediante laconsulta a la API de YouTubehttp://gdata.youtube....
Creación de la colecciónvar Collections = {     Videos: Backbone.Collection.extend({           model: Models.Video,    url...
Creación de la colección¿Por qué una función parse()?{ "apiVersion": "2.1", "data": {  "updated": "2012-09-04T20:24:14.876...
Creación de la colección¿Por qué una función parse()?Backbone.js espera recibir un conjunto deelementos.El resultado de la...
Creación de la vista de un vídeoContiene la representación del vídeo: el elemento<object> que carga el reproductor en Adob...
Creación de la vista de la aplicaciónEsta vista se va a encargar de cargar la lista devídeos en una colección de Backbone....
¿Qué ha faltado?Muchas cosas:●   Crear o modificar modelos y guardar los datos●   Usar enrutadores●   Crear vistas más com...
Referencias●   Backbone.js: tutoriales, demos y más    –   https://github.com/documentcloud/backbone/wiki●   Código de la ...
Upcoming SlideShare
Loading in …5
×

Taller de Backbone.js en Betabeers Malaga 06/09/2012

11,967 views

Published on

Transparencias de la presentación de Backbone.js de betabeers Málaga el 06/09/2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,967
On SlideShare
0
From Embeds
0
Number of Embeds
10,371
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Taller de Backbone.js en Betabeers Malaga 06/09/2012

  1. 1. Introducción a Backbone.js Damián Serrano Thode (@dsthode) Betabeers Málaga 06/09/2012
  2. 2. ¿Qué es Backbone.js? Es un entorno pseudo-MVC creado por DocumentCloud Ayuda a estructurar el código javascript Ofrece una jerarquía de objetosLo mejor contra el spaghetti-code en javascript ;)
  3. 3. Componentes de Backbone.js Modelos Colecciones Vistas Enrutadores
  4. 4. Modelos Almacenan las propiedades de los objetos Gestionan el estado, la persistencia y la validaciónTienen funciones auxiliares y generan eventos
  5. 5. Colecciones Contienen conjuntos de modelos Gestionan la carga de conjuntos de datosTambién tienen funciones auxiliares y generan eventos
  6. 6. Vistas Son la parte visible de la aplicaciónControlan los eventos de las colecciones y las subvistas, y el flujo de código
  7. 7. EnrutadoresGestionan el “cambio de página”
  8. 8. Crear una aplicación sencillaUsar la API de YouTube para obtener una lista devídeos y mostrarlos en pantalla
  9. 9. RequisitosJquery → http://jquery.comLibrería Javascript (mundialmente conocida)
  10. 10. RequisitosJSON2 → https://github.com/douglascrockford/JSON-jsUna librería Javascript para la manipulación de JSON
  11. 11. RequisitosUnderscore → http://underscorejs.orgOtra librería Javascript, desarrollada por los deBackbone.js
  12. 12. RequisitosBackbone.js → http://backbonejs.org
  13. 13. Creación del modeloVa a contener los datos de un vídeo de YouTube● Id● Dimensiones● URL de los streams● Comentarios, etiquetas, miniaturas● Y un montón más de información...
  14. 14. Creación del modelovar Models = { Video: Backbone.Model.extend(),};
  15. 15. Creación de la colecciónContiene la lista de vídeos obtenidos mediante laconsulta a la API de YouTubehttp://gdata.youtube.com/feeds/api/videos
  16. 16. Creación de la colecciónvar Collections = { Videos: Backbone.Collection.extend({ model: Models.Video, url: http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&max-results=9, parse: function(resp) { return resp.data.items; }, }),};
  17. 17. Creación de la colección¿Por qué una función parse()?{ "apiVersion": "2.1", "data": { "updated": "2012-09-04T20:24:14.876Z", "totalItems": 1000000, "startIndex": 1, "itemsPerPage": 10, "items": [ { "id": "EGs6MgYOVxg", "uploaded": "2012-08-30T00:00:10.000Z", ...
  18. 18. Creación de la colección¿Por qué una función parse()?Backbone.js espera recibir un conjunto deelementos.El resultado de la API que nos interesa estádentro de una jerarquía, por lo que hay quedevolver el elemento concreto que contiene elarray de vídeos.
  19. 19. Creación de la vista de un vídeoContiene la representación del vídeo: el elemento<object> que carga el reproductor en Adobe FlashAdemás muestra otra información del vídeo comoel creador, la descripción, etc...
  20. 20. Creación de la vista de la aplicaciónEsta vista se va a encargar de cargar la lista devídeos en una colección de Backbone.jsGestionará el evento de carga de la colecciónpara mostrar la lista de vídeos
  21. 21. ¿Qué ha faltado?Muchas cosas:● Crear o modificar modelos y guardar los datos● Usar enrutadores● Crear vistas más complejasPero todo esto es material para una próximaedición de betabeers, si os parece bien.
  22. 22. Referencias● Backbone.js: tutoriales, demos y más – https://github.com/documentcloud/backbone/wiki● Código de la aplicación de ejemplo – https://github.com/dsthode/taller-betabeers-20120906● Post explicando el taller – http://dsthode.info/2012/09/crear-una-aplicacion-sencilla-con-backbone-js/

×