Metiéndome de lleno en el mundo del Responsive Design, descubrí Backbone Boilerplate, un conjunto de librerías que nos permiten desarrollar aplicaciones hechas con Backbonejs y mucho sentido. Es una herramienta ideal para desarrollar una aplicación móvil y para empotrarla en Phonegap.
Estamos hablando de una utilidad bastante novedosa y, creo yo, poco divulgada, ya que no tiene la documentación aun finalizada y no encontramos muchos tutoriales por la red de como utilizarlo. Tuve que invertir un tiempo en aprender su funcionamiento pero al hacerlo de verdad les digo que lo recomiendo 100%.
Para empezar, debo aclarar que trabajo bajo este desarrollo de Backbone Boilerplate, porque he encontrado otras alternativas llamadas igual, pero sin mucho mantenimiento: Backbone Boilerplate en GitHub.
Instalando Backbone Boilerplate
Nos encontramos con que tiene dependencia en las siguientes librerías y plataformas:
- Node.js
- Grunt
- Grunt-bbb
Instalando Node.js
Node.js es una plataforma que nos permite hacer aplicaciones web con traslado de datos en tiempo real muy eficiente. Muy popular a día de hoy. De momento no vamos a utilizar nada de Node.js en los artículos que escriba sobre Backbone Boilerplate, pero al ser una dependencia hay que instalarla.
Podemos descargar Node.js para Windows, Linux y MAC desde el siguiente enlace: Descarga Node.js
Instalando Grunt
Luego de instalar Node.js, nuestra consola tendrá el comando npm para poder instalar Grunt. Grunt es una herramienta que nos permite administrar nuestros proyectos mediante líneas de comandos. Muy útil la verdad.
Para instalar Grunt debemos escribir en nuestra consola (si estás usando Windows también) y escribir la siguiente línea.
npm install -g gruntY listo, tenemos instalado Grunt en nuestro ordenador. ¿Muy fácil, verdad?
Instalando Grunt-bbb
Este viene a ser el Core de Backbone Boilerplate, el framework mediante el cuál crearemos nuestras aplicaciones con un solo click. Al tener dependencia con Git clone, lo ideal es que instalemos Git en nuestro ordenador. Para hacerlo debemos ir al siguiente enlace: Descargar Git.
Con Git instalado, debemos ejecutar la siguiente línea desde nuestra consola:
npm install -g bbbLuego de eso tendremos instalado Backbone Boilerplate, y junto con él el mágico comando bbb. Si lo ejecutan con la consola verán los comandos disponibles para trabajar:
Creando nuestro primer proyecto con Backbone Boilerplate
Suponiendo que estamos trabajando en local, es decir, estamos trabajando en http://localhost/, escribimos las siguientes líneas en nuestra consola:
mkdir myproject
cd myproject
bbb initEn la carpeta myproyect se crearán los ficheros necesarios para poder empezar nuestro proyecto en Backbone Boilerplate. Todo se resume a bbb init.
De todos modos, para crear nuestro primer proyecto escribiremos el siguiente comando:
bbb init:tutorialCrearemos un proyecto de pruebas que viene incluído en el core, pero no veremos nada en pantalla aun, debemos tener en cuenta algunas cosas escritas abajo.
A tener en cuenta
Al crear un proyecto con Backbone Boilerplate debemos hacer unos cambios en algunos ficheros para finalizar nuestra instalación.
Suponiendo la siguiente dirección en localhost http://localhost/myproyect/ , entonces debemos cambiar las siguientes cosas:
- En el fichero index.html
<link rel="stylesheet" type="/text/css" href="/app/styles/index.css">Cambiar a
<link rel="stylesheet" type="text/css" href="app/styles/index.css">
- En el fichero app/app.js
var app = {
// The root path to run the application.
root: "/"
};Cambiar a
var app = {
// The root path to run the application.
root: "/myproyect/"
};
Conclusiones
Backbone Boilerplate es un paso adelante en el desarrollo Front-end. Las cantidad de librerías y utilidades, sumado a la potencia de Nodejs y Grunt hacen de Backbone Boilerplate una herramienta muy poderosa que nos permitirá crear aplicaciones de manera muy rápida y eficiente.
Debo reconocer que al comienzo me ha costado amigarme con esta herramienta, pero al tomar confianza y adaptarme a su funcionamiento estoy decidido a utilizarla en los proyectos por venir.
En las próximas semanas iré subiendo artículos sobre cómo crear módulos y una primera aplicación de ejemplo.