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

  • 7,664 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,664
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introducción a Backbone.js Damián Serrano Thode (@dsthode) Betabeers Málaga 06/09/2012
  • 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. Componentes de Backbone.js Modelos Colecciones Vistas Enrutadores
  • 4. Modelos Almacenan las propiedades de los objetos Gestionan el estado, la persistencia y la validaciónTienen funciones auxiliares y generan eventos
  • 5. Colecciones Contienen conjuntos de modelos Gestionan la carga de conjuntos de datosTambién tienen funciones auxiliares y generan eventos
  • 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. EnrutadoresGestionan el “cambio de página”
  • 8. Crear una aplicación sencillaUsar la API de YouTube para obtener una lista devídeos y mostrarlos en pantalla
  • 9. RequisitosJquery → http://jquery.comLibrería Javascript (mundialmente conocida)
  • 10. RequisitosJSON2 → https://github.com/douglascrockford/JSON-jsUna librería Javascript para la manipulación de JSON
  • 11. RequisitosUnderscore → http://underscorejs.orgOtra librería Javascript, desarrollada por los deBackbone.js
  • 12. RequisitosBackbone.js → http://backbonejs.org
  • 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. Creación del modelovar Models = { Video: Backbone.Model.extend(),};
  • 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. 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. 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. 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. 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. 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. ¿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. 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/