Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Introducción de Backbonejs

 

Backbone.js

introducción

Si nuestra aplicación web “single page” es compleja del lado del cliente o empieza a serlo, más tarde o más temprano vamos a necesitar aplicar las mismas prácticas de arquitectura que aplicamos del lado del servidor en Javascript (MVC, MVP, etc.), para esto hay varios patrones, bibliotecas y varios frameworks, hoy vamos a hablar de Backbonejs.

Qué es Backbone?

Es un framework una biblioteca para realizar aplicaciones en Javascript, utiliza el patrón MVP (esta parte es discutible ya que no está tan claro) y posee ciertos componentes definidos, está pensado para trabajar sobre una API RESTFul pero nada impide no hacerlo, sus componentes son:

  • Modelo
  • Vista
  • Colecciones
  • Rutas

Quién lo usa?

Es usado en sitios que seguramente has visitado, nombro algunos:

Y muchos más

Cómo lo agregamos a nuestro sitio?

Básicamente agregamos la referencia a nuestra aplicación (un único archivo de 6,5kB) tiene una dependencia la cual es underscore.js (del mismo autor Jeremy Ashkenas responsable también de Coffee Script) y por último también depende de alguna biblioteca para manipular el DOM que pueden ser jQuery , Ender, Zepto o cualquiera compatible, a partir de ahí podemos empezar a usarlo escribiendo Javascript como siempre, pero pudiendo utilizar los componente que nos provee o no; en resumen, la forma de incluirlo sería la siguiente:

<html>
<head>
	<script type="text/javascript" src="js/vendor/jquery/jquery.js"></script>
	<script type="text/javascript" src="js/vendor/underscore/underscore.js"></script>
	<script type="text/javascript" src="js/vendor/backbone/backbone.js"></script>
</head>
<body>
</body>
</html>

Cosas que nos da Backbone y cosas que no nos da:

Para terminar la introducción voy a listar los pro y contras que tiene Backbone (al menos para mí) desde el punto de vista de cada componente que lo forma.

Modelo:

  • + una base con funciones comunes para trabajar nuestro modelo.
  • + un método estándar de validaciones .
  • + funciones de serialización .
  • + podemos recuperar el estado anterior ante una modificación.
  • + notificaciones mediante eventos y la posibilidad de declararlos y dispararlos .
  • + algunas convenciones sobre ids y otras cosas.

Vista:

  • + las vista son más convenciones que otra cosa, Backbone nos da una base pero mayormente trabajamos siguiente un estándar de nombres y formas de hacer las cosas “de facto”.
  • + es muy siempre “atacharse” a los eventos de la vista.
  • = no tenemos binding automático (si bien es discutible si esto es bueno o malo) de todos modos se suele usar rivetsjs para esto.
  • = no tenemos un motor de templating dentro de Backbone (aunque ya que depende de underscore y éste tiene uno lo normal es usarlo) podemos usar el que queramos.

Ruteo

  • + nos permite utilizar navegación por hash ( # ) de manera muy sencilla y clara.
  • + el “binding” de parámetros es muy simple.

Colecciones

  • + Permiten agrupar listados de modelos (en principio del mismo tipo pero no es necesario en realidad)
  • + La manipulación de los datos es muy sencilla apoyado en funciones de underscore como where, find, etc.
  • + Son la interfaz para trabajar contra una API Restfull de manera transparente.

En general

  • + una gran ventaja de Backbone es que podemos usar cualquiera de sus componentes sin estar atados a los otros, por ejemplo podemos usar el motor de rutas solamente.
  • + también las definiciones son muy livianas y nos permite hacer cambios con facilidad y que la adopción no sea tan brusca.
  • + existe una gran cantidad de plugins para agregarle cosas que no tiene.
  • + soporta varias biliotecas de manipulación de DOM.
  • + soporta Requirejs.
  • + Es perfectamente apto para móviles de hecho Wallmart lo utiliza para su versión móvil.
  • - Creo que la documentación es el punto débil, siendo un framework usado en lugares tan importantes la documentación tiene muy pocos ejemplos y es bastante escueta (para mi gusto).
  • = Está muy enfocado en REST y la estructura de la aplicación y poco en la vista, esto puede ser o no bueno, depende del proyecto creo.

Debería usar Backbone?

Lo más importante tal vez sea esto, saber si necesitamos poner una dependencia tan importante en nuestro proyecto, yo creo que sí, y si no es Backbone será otra, es decir, mi respuesta es sí; y si preferimos un framework diferente a Backbone acá hay un lindo hilo sobre el tema.

Mi opinión personal es muy cercana a la de este video y este resumen, básicamente lo más valioso de Backbone es que no nos ata a una forma de hacer las cosas (claro, tampoco nos da mucha base de arquitectura pero la podemos encontrar en varios lugares), y si bien, no podemos pegar un tag y que funcione de forma mágica tenemos todo el control de lo que pasa y realmente si la cosa se llegase a complicar no es difícil encontrar problemas como en el caso de frameworks en los que hacen falta herramientas especiales para facilitar la depuración.

Bien, sin entrar mucho en detalle ni ser quisquilloso creo que esto es lo principal, no quiero aburrir con largas lectura, la próxima empezamos jugando con el modelo, pero para no quedarnos con las ganas dejo un link a un lindo ejemplo y el código del mismo, nos leemos.

Comments (2) -

  • Rodrigo

    3/17/2014 9:56:16 AM | Reply

    Te dejo un experimento que arme el año pasado que me parece bastate instructivo: El Juego de la vida de Conway 100% backbone armado usando tdd. Le hace falta algun que otro update, pero los conceptos no cambiaron.

    github.com/rodrigoi/game-of-life-backbonejs

    abrazo!

  • leonardo

    3/18/2014 8:06:29 AM | Reply

    Gracias Obi, muy bueno, no lo probé, pero revisé el código, muy interesante.

    salut!

Loading