marionette: 1. Introducción a backbone

Primera entrada de una serie dedicada a backbone - marionette

Yulia Luchkina

archivado en: JavaScript / 26 abril, 2015 / taller:

Backbone es una arquitectura mvc en javaScript muy flexible que, a diferencia de angular, está pensada para trabajar con otras librerías, como jQuery o handelbars. Esto le confiere mayor perdurabilidad a los proyectos, pues para actualizar algo, por ejemplo para incoporar react o mongo, no es necesario cambiarlo todo de cabo a rabo, sino solo las partes implicadas. Otra ventaja respecto a angular es que funciona mejor en dispositivos móviles antiguos al ser más ligero y demandar menos esfuerzo por parte del navegador.

A quien no lo conoce, quizás le pueda dar algo de pereza embarcarse en otro frame más, pero puedo asegurar que bien organizado es capaz de soportar aplicaciones muy potentes, de decenas de miles de líneas de código, y tiene una potencia y versatilidad para la persistencia de datos formidables.

Es complicado augurar qué rumbo tomará el desarrollo frontend, hay muchas cosas en el horizonte que pueden provocar giros extraordinarios, como los web-components o el shadow dom, por lo que no puedo afirmar que backbone no terminará en el cementerio de las tecnologías obsoletas de aquí a nada, pero creo que de momento vale la pena adoptarlo para algún proyecto. De hecho, insisto, es difícil que se quede atrás, pues no es un frame como tal, sino más bien una arquitectura.

Antes de entrar en faena, por último, indicar que hay muchas maneras de trabajar con backbone, pero la más recomendable es al estilo marionette, de Derick Bailey, al que el multiverso debe también su imprescindible master in this.

Para entender qué es el patrón MVC podemos pensar en un restaurante: los modelos serían la cocina, donde se preparan los datos; las vistas, los clientes, que consumen los datos; y los controladores, los camareros encargados de llevar los datos desde la cocina hasta las mesas.

1. Un catálogo backbonizado

Para ir aprendiendo algunos conceptos básicos vamos a preparar un catálogo de series muy chulas en backbone, sin marionette. Lo primero es descargarse marionette, ya sea a la manera tradicional o utilizando algún instalador.

bower install marionette

npm install backbone.marionette

Según cómo lo hayamos instalado tendremos al final una estructura del tipo html5 boilerplate:

index.html

/assets

/css

/img

/js

/vendor

O tipo bower o cualquier otra similar. Eso ahora nos da igual, lo único importante es que en archivo index.html, tengamos enlazados estos archivos js y en este orden (ya veremos cómo hacerlo más adelante de forma más sofisticada con require js).

  1. jquery
  2. underscore
  3. backbone
  4. backbone.marionette

2. Conceptos básicos

Antes de empezar a ver código, vamos a recordar qué significa heredarextender una clase.

En los lenguajes de programación orientada a objetos, un mecanismo habitual es crear una clase con determinados métodos y propiedades que luego se pueden pasar a clases hijas. Por ejemplo, en pseudocódigo, podríamos definir así una clase genérica para todos los mamíferos:

Clase Mamiferos() {

propiedad pelo;

propiedad patas;

método comer();

método dormir();

}

Si ahora necesitáramos un gatito en nuestro código no tendríamos por qué volver a indicar todas esos métodos y propiedades, sino que bastaría con que heredase la clase Mamíferos y luego ya implementase sus propios métodos y propiedades.

/* Le pasamos a Gatitos todos los métodos y propiedades de los Mamíferos */

Clase Gatitos es una extensión de Mamíferos;

/* Y ahora que nuestros Gatitos ya comen, duermen, tienen patas y pelo... */

Clase Gatitos, además, {

método ronronear();

método rasgarSofás();

}

Con este mecanismo, es decir, con la extensión o herencia de clases, una aplicación de backbone se articula a partir de cuatro superclases:

  1. Los modelos (models), que son los encargados de gestionar los datos.
  2. Las colecciones (collections), que son grupos de modelos.
  3. Las vistas (views), que se encargan de pintar el DOM.
  4. Los routers, que controlan el tráfico de la aplicación.

3. Vistas

Para empezar a ver cómo funcionan las vistas vamos a crear un section en nuestro index y ahí reservar un espacio para el titular.

...

<body>

<section id="main-region">

<header id="titular">

</header>

</section>

...

Ahora podemos crear una clase llamada Titular que herede de la superclase View de backbone. Y en esta clase vamos a definir unos parámetros que veremos en detalle más adelante: un tagName, que será el nodo que envolverá el contenido que le pasemos, y un método encargado de renderizar los datos. Para ir entendiéndolo podemos pensar en jQuery, donde tenemos un selector, que aquí es $el (de elemento), y un método html(), que inserta contenido html en el nodo seleccionado.

<script>

/* Creamos la clase */

var Titular = Backbone.View.extend({

tagName: '<h3>',

render: function() {

this.$el.html("Catálogo formidable");

}

});

Ahora que tenemos esta clase definida, tan solo tenemos que instanciarla cuando la necesitemos. Y cuando declaramos la instancia podemos pasarle algunos datos, como cuál será el elemento el que actuará de contenedor del html que devuelva la vista.

/* La instanciamos pasándole como parámetro el id del elemento contenedor (el) e invocamos su método render */

var instanciaTitular = new Titular({ el: $("#titular") });

instanciaTitular.render();

</script>

4. Modelos

El mecanismo que subyace en los modelos es muy parecido. Extendemos la clase Model a la clase de nuestro modelo. Echemos un vistazo a este fragmento, aunque no lo entendamos de todo bien ahora.

/* Creamos un modelo extendiendo la clase modelo */

var Catalogo = Backbone.Model.extend({

/* Podemos definir valores por defecto */

defaults: {

id: 0,

titulo: ""

},

/* Hacer que suceda algo cuando el modelo se inicialice */

intialize: function() {

console.log("Modelo inicializado");

/* Como enganchar eventos */

this.on("change", function() {

/* Hacemos algo cuando se cambie algo del catálogo instanciado */

})

}

});

/* Que a su vez podemos subextender... */

var SubCatalogo = Catalogo.extend({

});

/* Instanciamos el modelo */

var itemCatalogo = new Catalogo({

id: 1,

titulo: "Los Soprano"

});

/* También se pueden clonar con clone(); */

var itemCatalogo2 = itemCatalogo.clone();

Una vez creado el modelo podemos trabajar sobre instancias.

/* Para cambiar un valor usamos el método set() */

itemCatalogo2.set("id", 2);

itemCatalogo2.set("titulo", "Breaking bad");

/* Y para leerlo el método get() */

var idItem2 = itemCatalogo2.get("id");

var tituloItem2 = itemCatalogo2.get("titulo");

/* Para comprobar si un modelo tiene una propiedad tenemos el método has() */

itemCatalogo.has("foo"); // false

Y asociar modelos a las vistas:

<ul id="listadoSeries"></ul>

...

var ListadoCatalogo = Backbone.View.extend({

tagName: 'li',

model: itemCatalogo,

render: function() {

this.$el.html(this.model.get("titulo"));

}

});

Bueno, no sé han quedado claras estas ideas básicas, pero no importa si ahora no entendemos qué hace exactamente el código, lo único que importa es que comprendamos que backbone funciona mediante la extensión, la herencia, de unas superclases (mamíferos, reptiles, aves...) en unos objetos concretos (gatos, salamandras, avestruces...), algunos de los cuales se encargan de gestionar los datos en bruto (modelos y colecciones), otros de lo que consumen los clientes (las vistas y los routers).

Seguimos en la próxima entrada, ya sí, con backbone al estilo marionette.

|| Tags: , ,

valoración de los lectores sobre marionette: 1. Introducción a backbone

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.7 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “marionette: 1. Introducción a backbone

  1. No habran mas post de marionette me facino esta intro… seria genial un minitutorial con una app de ejemplo 🙂 saludos