Durante años, los desarrolladores se han aprovechado de los frameworks PHP como CakePHP, CodeIgniter e incluso los frameworks Ruby basados en el patrón MVC. Pero si lo piensas, no ha habido muchos frameworks de JavaScript que nos ayuden de la misma manera.
Tal vez se deba a que los programadores "reales" menosprecian a JavaScript, pero los frameworks de JavaScript siempre se han rezagado un poco. Columna vertebral cambió eso, y como verá en esta introducción, usa el patrón MVC para separar el código JavaScript y ayudarnos a crear aplicaciones estructuradas. En efecto, entrega el patrón MVC al desarrollo del front-end.
Backbone es una biblioteca ligera de JavaScript del mismo creador que CoffeeScript. Pero no dejes que el hecho de que sea una biblioteca te haga confundirlo con jQuery, Backbone está a pocas leguas de jQuery cuando se trata de funcionalidad. Backbone no maneja los elementos DOM, por lo que muchos desarrolladores lo usan de la mano con jQuery; Estructura organizativa de backbone y jQuery manipulando el DOM.
Lo que Backbone realmente hace bien es la estructura de suministro para sus aplicaciones de JavaScript, y debido a que funciona con JSON es fácil de insertar en casi cualquier sistema de plantillas front-end.
MVC significa Modelos, Vistas y Colecciones; y en Backbone, con también tener enrutadores.
En Backbone, un modelo representa y entidad, por lo que, por ejemplo, si tratamos con usuarios, cada usuario sería un Modelo; es como una fila en una base de datos.
Para crear un modelo simple usando Backbone, escribiríamos:
var user = Backbone.Model.extend({});Ese código es técnicamente correcto, pero ese Modelo no tendría ninguna funcionalidad, por lo que tenemos que agregar algo para que haga este Modelo cuando se lo instancia y para hacerlo, usaríamos un código un poco más complejo:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, valores predeterminados: {nombre:' John Doe ', edad: 30,}}); var usuario = nuevo Usuario; En el código anterior, la función de inicialización se activará cada vez que creamos una nueva instancia de este modelo, después de inicializar todo lo que hemos hecho es agregar algunos valores predeterminados en caso de que no se pasen datos para el Modelo. Una vez hecho esto, para crear una instancia del Modelo, usaríamos un código como:
var dave = new User({name:'Dave Smith', age:25});Para recuperar un atributo de una cierta instancia, usaríamos:
var name = dave.get('name');Y para cambiar un atributo que usaríamos:
dave.set({age:31});Esta es la base de cómo funcionan los modelos en Backbone, hay mucho más que pueden lograr, pero con suerte ya se puede ver el potencial de la estructuración del código.
¿Recuerdas que dije que un modelo era como un usuario? Bueno, siguiendo esa analogía, una Colección son todos los usuarios que tenemos. Las colecciones son esencialmente conjuntos de modelos, y como ya tenemos nuestro modelo de usuario, crearemos una colección desde allí:
var Users = Backbone.Collection.extend({model: User});Actualmente esta Colección está vacía, pero es simple crear algunos usuarios y agregarlos a la colección:
var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);Ahora, si hacemos console.log himym.models obtendremos los valores de barney, ted y lily.
Las vistas están asociadas a una parte del DOM, están diseñadas para vincularse a los Modelos que son esencialmente los datos de la aplicación y sirven para presentar estos datos al usuario final.
Crear una vista es simple:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Esta es la estructura básica de una vista. El tagName es el elemento que se usará para ajustar la vista, la clase se establece utilizando className y, por último, agregamos una función de renderizado, aunque en este último caso la función estaba vacía. Es la función de renderizado que utilizamos para agregar al escenario, de esta manera:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});El elemento el en la función render se refiere a la envoltura que creamos y usando la función innerHTML colocamos la edad del usuario dentro de div.
Este ejemplo no ha utilizado ningún sistema de plantillas, pero si lo desea, puede aprovechar Underscore.js que se envía con Backbone.
También podemos escuchar eventos al adjuntar un oyente de eventos a nuestra vista y en este ejemplo crearemos un simple oyente de clic para nuestro div (este código va inmediatamente después de nuestra función de representación):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Los enrutadores troncales se usan para enrutar las URL en la aplicación cuando se usan hashtags (#). Para definir un enrutador, siempre debe agregar al menos una ruta y al menos una función que se ejecutará cuando se llegue a la URL deseada, así:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Este es un enrutador extremadamente simple que realizará una acción cuando se alcanza el hash de usuario / #. La llamada al método Backbone.history.start () pide a Backbone que controle los hashtags para que los distintos estados del sitio sean favoritos y se puedan navegar con el navegador.
Este artículo solo cubre los conceptos básicos de Backbone, que se puede usar para crear aplicaciones estructuradas en JavaScript. Te aconsejo que consultes el sistema de plantillas para utilizarlo junto con Backbone para ver todo el potencial de esta biblioteca. Espero que estas breves presentaciones te hayan demostrado lo útil que MVC puede ser en el front-end.
¿Has desarrollado aplicaciones con Backbone? ¿Qué tipo de aplicación te gustaría construir? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de andamio a través de Shutterstock.