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

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 objetos
Lo 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ón
Tienen funciones auxiliares y generan eventos

5. Colecciones
Contienen conjuntos de modelos
Gestionan la carga de conjuntos de datos
También tienen funciones auxiliares y generan
eventos

6. Vistas
Son la parte visible de la aplicación
Controlan los eventos de las colecciones y las
subvistas, y el flujo de código

7. Enrutadores
Gestionan el “cambio de página”

8. Crear una aplicación sencilla
Usar la API de YouTube para obtener una lista de
vídeos y mostrarlos en pantalla

9. Requisitos
Jquery → http://jquery.com
Librería Javascript (mundialmente conocida)

10. Requisitos
JSON2 → https://github.com/douglascrockford/JSON-js
Una librería Javascript para la manipulación de JSON

11. Requisitos
Underscore → http://underscorejs.org
Otra librería Javascript, desarrollada por los de
Backbone.js

12. Requisitos
Backbone.js → http://backbonejs.org

13. Creación del modelo
Va 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 modelo
var Models = {
Video: Backbone.Model.extend(),
};

15. Creación de la colección
Contiene la lista de vídeos obtenidos mediante la
consulta a la API de YouTube
http://gdata.youtube.com/feeds/api/videos

16. Creación de la colección
var 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 de
elementos.
El resultado de la API que nos interesa está
dentro de una jerarquía, por lo que hay que
devolver el elemento concreto que contiene el
array de vídeos.

19. Creación de la vista de un vídeo
Contiene la representación del vídeo: el elemento
<object> que carga el reproductor en Adobe Flash
Además muestra otra información del vídeo como
el creador, la descripción, etc...

20. Creación de la vista de la aplicación
Esta vista se va a encargar de cargar la lista de
vídeos en una colección de Backbone.js
Gestionará el evento de carga de la colección
para 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 complejas
Pero todo esto es material para una próxima
edició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/