UNIVERSIDAD DE LAS FUERZAS ARMADAS

- ESPE EXTENSIÓN LATACUNGA

DEPARTAMENTO DE ELÉCTRICA Y
ELECTRÓNICA

ASIGNATURA FECHA
LABORATORIO DE LUNES, 2 DE JULIO DE 2018
INGENIERÍA WEB
ESTUDIANTE: DÁMARIS NÚÑEZ
PROFESOR(A): ING. RUBÉN LÓPEZ

ABRIL 2018 - AGOSTO 2018

 TEMA: BACKBONE.JS

OBJETIVO GENERAL:

Conocer acerca del funcionamiento de Backbone sus características y funcionalidades

para emplearlo de una manera adecuada

INTRODUCCIÓN:

Backbone.js da estructura a las aplicaciones web al proporcionar modelos con enlace

clave-valor y eventos personalizados, colecciones con una API rica de funciones
enumerables, vistas con manejo declarativo de eventos y lo conecta todo a su API
existente a través de una interfaz RESTful JSON.

El proyecto está alojado en GitHub , y el código fuente anotado está disponible, así
como un conjunto de pruebas en línea , una aplicación de ejemplo , una lista de tutoriales
y una larga lista de proyectos del mundo real que usan Backbone. Backbone está
disponible para su uso bajo la licencia de software de MIT.

DESARROLLO:

Backbone.js, este pequeño framework que permite construir aplicaciones usando

Javascript siguiendo el patrón MVC (modelo-vista-controlador), después de casi dos años
y medio de andadura ha lanzado su versión 1.0.

A día de hoy, Backbone.js no es ningún desconocido en el desarrollo web. Muchas

empresas han usado este framework para construir sus web y aplicaciones. Algunos
ejemplos son: hulu, Stripe, NewsBlur o rdio. Superando, quizás, algunos quebraderos de
cabeza iniciales entre versiones y funcionalidades que no acababan de ir del todo.

El objetivo de Backbone.js ha sido desde sus inicios probar y definir un conjunto de

estructuras de datos (Models y Collections) junto al manejo de la interfaz por medio de
Vistas y URLs que fuera útiles cuando se construyan aplicaciones Javascript. Por otro
lado, Backbone da un estructura de aplicación pero el look and feel o el comportamiento
lo podemos definir libremente con el resto de librerías o framework que queramos ir
incorporando como pueden ser jQuery. Es bastante abierto, pero siempre respetando un
modelo MVC que en javascript era difícil de ver hasta su aparición.

Es una librería para el desarrollo de sitios web, principalmente usada para aplicaciones
web con bastante interacción con el cliente, donde se hace un uso intensivo de JavaScript,
Ajax, etc. Te permite desarrollar en JavaScript atendiendo a patrones, con una variante
del paradigma MVC, el mismo que se ha introducido con fuerza en la programación del
lado del servidor y que, desde hace menos tiempo, viene empezando a ser costumbre en
el desarrollo del lado del cliente.

Fue desarrollado por Jeremy Ashkenas, que también escribió CoffeeScript. La

biblioteca comenzó su vida como parte de la base de código de DocumentCloud, un
proyecto de código abierto que ofrece a los periodistas con la capacidad de cargar y anotar
documentos en forma colaborativa.

Se trata de una herramienta muy indicada en aplicaciones de una sola página, aunque
también es útil para otros tipos de sitios, multi página, donde se encuentran interfaces de
usuario avanzadas. Facilita la ordenación del código y la sincronización de las vistas con
los datos de la aplicación. Todo ello redunda en una programación más modularizada y
con mayor separación entre las partes de la aplicación, como presentación, datos, etc.

Utilizando palabras sencillas, Backbone es un conjunto de objetos que tienen métodos

(o funciones, si lo prefieres llamar así) que van a proveer de estructura a nuestro código,
facilitar el trabajo con datos, vistas para producir nuestro HTML, las interacciones para
implementar comportamientos que deba realizar frente a acciones del usuario y los
servicios para comunicar con cualquier tecnología que usemos del lado del servidor, ya
sea NodeJS, PHP, Ruby, .NET, etc.

Dentro de la aplicación es:

• El Modelo gestionará los datos de la aplicación y controlará la persistencia de

estos.
 • La Vista se encarga de la interacción con el usuario y por lo tanto de mostrar los
datos de la aplicación al mismo.
• El Controlador actuará de intermediario entre la capa de datos (el Modelo), y la
representación de estos (la Vista). Se encargará de comunicar ambas capas

¿Cómo funciona?

Backbone se sostiene sobre una serie de piezas clave que nos permitirán, de una forma
sencilla, construir cualquier aplicación:

• Modelos

• Vistas

• Colecciones

• Eventos

Dentro de una aplicación, los datos que ésta gestiona son manejados a través de
‘modelos’, los cuales nos permitirán operar sobre dichos datos, validarlos, procesarlos,
etc. Al mismo tiempo, cada vez que realicemos una operación sobre el modelo, Backbone
lanzará eventos para comunicar al resto de componentes qué tipo de operación se está
realizando sobre éste. Así, de esta forma, podremos asociar dichos modelos a las ‘vistas’
para que, al mismo tiempo, reaccionen al cambio de estado del modelo y se muestren de
una manera u otra en función del estado de éste. De esta manera se consigue separar
perfectamente la lógica de negocio de la vista.

Modelos

En Backbone los modelos son la base de cualquier aplicación. Nos permiten gestionar
los datos y la lógica que manejará nuestra aplicación.

Internamente, los modelos implementan un “map” que albergará todos y cada uno de
los datos de la aplicación, gestionarán la lógica de negocio y, además, nos proporciona
soporte para gestionar el sincronismo entre la capa de datos y la capa de persistencia.
 Cada vez que un modelo sufre un cambio, éste lanza un evento que es escuchado por
otros componentes de la aplicación. Lo más habitual es asociar un modelo a una vista de
la aplicación, así ésta es capaz de reaccionar a dichos cambios de estado y cambiar según
el estado de éste.

Vistas

Las vistas nos permiten representar, a nivel de interfaz de usuario, los datos que son
manejados por los modelos.

Normalmente su funcionamiento consiste en suscribirse a los eventos que los modelos

lanzarán cuando su estado cambie. Una vez se ha capturado un evento, la vista mostrará
la representación del modelo en el navegador.

Backbone no da soporte a plantillas HTML de forma directa, por lo que será necesario
usar librerías de terceros para gestionar, de manera sencilla, las plantillas HTML. En
futuros tutoriales veremos cómo usarlas.

Para crear una vista necesitamos extender de la clase ‘View’ de Backbone mediante el
uso de la palabra reservada ‘extend’.

Cuando estamos definiendo una vista, definimos elemento HTML que va a representar
la vista mediante el atributo ‘tagName’. Si no indicamos este atributo, por defecto la vista
que se crea será un ‘div’.

Colecciones

Cuando desarrollemos una aplicación con Backbone nos vamos a encontrar multitud
de casos en los que tengamos que lidiar con colecciones de modelos. Y será en esos casos
cuando nos surgirá la siguiente pregunta: ¿Cómo puedo representar y gestionar en mi
aplicación una lista de modelos de manera sencilla? Para eso, Backbone nos proporciona
una herramienta muy potente, las colecciones (Collection). Las colecciones son conjuntos
ordenados de modelos y lo que nos permiten es gestionar dichos modelos mediante una
multitud de funciones y utilidades.

Al igual que ocurre con los modelos, las colecciones también lanzan eventos al resto
de elementos de nuestra aplicación cuando su estado, o el de los modelos que contiene,
cambian.

Una vez creada nuestra colección, Backbone nos ofrece una multitud de funciones a
aplicar sobre la colección:

• add: añade un modelo a la colección.

• remove: elimina un modelo de la colección.

• reset: cambia el contenido de la colección por el contenido de otra; si no le

pasamos otra colección lo que hace es eliminar su contenido.

• set: actualiza una colección de modelos con la colección de modelos que recibe
por parámetro.

• get: recupera un modelo de una colección, buscándolo por id o pasándole un

modelo completo.

• at: devuelve un modelo de la colección, especificando su posición dentro de la

colección.

• push: añade un nuevo modelo al final de la colección.

• pop: devuelve y elimina el último modelo de una colección.

Eventos

Como hemos comentado anteriormente, Backbone nos proporciona un sistema de

comunicación entre componentes mediante el uso de eventos, de formar que cada uno de
los componentes de nuestra aplicación sea capaz de lanzar eventos y suscribirse a otros,
si fuese necesario.
 Para que un objeto lance un evento en nuestra aplicación, se hace uso de la función
‘trigger’, a la cual se le pasa el nombre del evento a lanzar y los posibles parámetros que
viajarán con el evento.

Para que un objeto se pueda suscribir a un evento, será necesario lanzar la función ‘on’
sobre el objeto que lanza dicho evento, pasando el nombre del evento sobre el que se va
a suscribir.

Facilidades de Backbone

Tal como se definen ellos mismos, Backbone.js ofrece una estructura para aplicaciones
que hace uso intensivo de JavaScript y que provee de modelos llave / valores enlazables
mediante eventos, colecciones con la posibilidad de realizar diferentes utilidades por
medio de una API, vistas con manejadores de eventos declarativos y conexión a interfaces
REST nuevas o ya disponibles anteriormente.

Las facilidades de la librería Backbone son las siguientes:

• ¿Permite la programación atendiendo al paradigma MV...C? (Existe un debate si

es MVR porque en realidad no son controladores sino "Ruteadores").
• Te ayuda a crear estructuras bien definidas para los datos de tu aplicación y facilita
la creación de eventos cuando los datos cambian. Esto permite olvidarnos de la
revisión de las variables o la propagación de los cambios en la aplicación cuando
los datos de dichas estructuras cambian.
• Simplifica el uso de vistas, que te ayudan a pintar o "renderizar" interfaces de
usuario en la página.
• Permite el uso de colecciones de modelos, en los que tendrás acceso a diferentes
operaciones sobre los mismos, como filtrar, buscar, recibir notificaciones cuando
cambien, etc.
• Simplifica y ayuda a ordenar el código de las peticiones AJAX para realizar
solicitudes al servidor.
 Dónde usar Backbone

No lo uses para asignar un comportamiento a un botón o en cualquier página donde

piensas tener pocos elementos con interacción con el usuario y donde las funciones
manejadoras sean bastante sencillas. El usar Backbone aporta un poco de complejidad al
desarrollo, por lo que no sería tan adecuado para pequeños proyectos o páginas bastante
estáticas. Si tu código es muy pequeño y lo puedes tener en unas decenas de líneas de
código, no se recomendaría usar Backbone.

Usa Backbone en una aplicación web la cual posee bastante lógica de negocio, bastante
interacción, bastantes métodos y eventos trabajando. Es un buen entorno donde sería
excelente usar Backbone.js. Es útil también en cualquier página, que, aun siendo sencilla,
tiene los mismos datos y se muestran en varios sitios distintos, replicados en diversos
elementos, ya que te permite mantener la sincronización con todos esos datos de una
manera sencilla y prácticamente automática, sin que tengas que estar revisando
constantemente cuándo cambian tus datos para actualizarlos en todos los lugares donde
aparecen.

Características relevantes

 Una talla de archivo menor tiene como consecuencia mayor rapidez de carga
(subida de archivos y descarga).
 El routing permite la interacción con la URL del navegador. Es muy importante
para la experiencia del usuario, si se están construyendo aplicaciones de una sola
página.
 Soporta un motor de plantilla que puede ser pre-recopilado en el servidor. Esto
mejora, muy posiblemente, la velocidad de página, especialmente en dispositivos
con baja potencia de computación.
 Esto mejora muchísimo el rastreo del motor de búsqueda. Acrecentar muy
posiblemente la velocidad de página, especialmente en dispositivos con baja
potencia de computación.
  Permite incorporar patrones de vista para una vista de alto nivel a partir de una
plantilla o patrón establecido.
 Puede extenderse para soportar modelos y vistas que se actualicen mutuamente.
Esto añade talla al archivo, pero al mismo tiempo ofrece mayor flexibilidad.
 Un tamaño de archivo menor da lugar a tiempos de carga (subidas y descargas)
más rápidos.

INSTALACIÓN:

Para cargar Backbone y sus dependencias es necesario seguir los pasos descritos a
continuación:

1. Ingresar a la página http://backbonejs.org/ y dar clic en descargar production

version.
2. Se despliega una ventana con código, el cual debe ser guardado en un JS File.

3. Ingresar a la página https://underscorejs.org/ y sobre el link Production Version

(1.9.1), dar clic derecho, seleccionar la opción Guardar enlace como.
4. Ingresar a la página http://jquery.com/ y dar clic en descargar.

5. Clic derecho en la segunda opción y seleccionar Guardar enlace como.

6. Crear un nuevo block de notas guardado con la extensión .html en la misma carpeta
llamada setup

7. Ingresar el código en el archivo creado.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="jquery-min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
 8. Compilar el archivo creado.

EJERCICIO PRÁCTICO:

Ejemplo sencillo de una calculadora la cual obtiene el área de un rectángulo utilizando

backbone.js

1. Crear una carpeta en donde se tenga otras carpetas de nombres css, img y js.
2. Dentro del archivo index.html, colocar el siguiente código:

3. Dentro de la carpeta js es necesario incluir los siguientes archivos con formato JS

File:
4. En el archivo llamado main.js escribir el código que se muestra a continuación:
RESULTADOS OBTENIDOS:

CONCLUSIONES:

 En conclusión, Backbone proporciona una multitud de funciones para el manejo

de modelos en las distintas aplicaciones.
 En conclusión, Backbone.js es uno de los frameworks más usados y debido a su
gran potencia y escalabilidad es uno de los que, multitud de grandes empresas,
han seleccionado para desarrollar sus aplicaciones empresariales.
 En conclusión, Backbone es una aplicación web la cual posee bastante lógica de
negocio, bastante interacción, bastantes métodos y eventos trabajando

RECOMENDACIONES:

 Es recomendable conocer las funcionalidades que posee Backbone para poderlo

emplear de mejor manera
 Es recomendable utilizarlo de forma adecuada para poder obtener los resultados
deseados
 Es recomendable conocer acerca de Backbone para poder hacer las páginas web
de mejor manera y empleándolo correctamente para así poder representar de
mejor manera los proyectos a realizarse

BIBLIOGRAFÍA:

Fernández, I. (07 de 10 de 2016). Introducción a Backbone.js. Obtenido de

https://www.adictosaltrabajo.com/tutoriales/introduccion-a-backbone-js/
Guardado, I. (15 de 05 de 2012). Introducción a Backbone.js. Obtenido de
http://web.ontuts.com/tutoriales/introduccion-a-backbone-js/
Rodríguez, T. (23 de 03 de 2013). Backkbone.js 1.0. Obtenido de
https://www.genbetadev.com/desarrollo-web/backbone-js-el-framework-
para-construir-aplicaciones-usando-javascript-siguiendo-el-patron-mvc-
alcanza-la-version-1-0