Como crear una app Backbone + RequireJs + Compass desde cero con Yeoman

Esta guía mostrará como crear una aplicación Backbone + RequireJs + Compass totalmente desde cero.

En el camino, cubriremos como instalar Node, NPM, RVM, Ruby, Compass y Yeoman (yo, Grunt, Bower).

También cubriremos algunos de los errores comunes, y como resolverlos.

Esta guía es para máquinas con sistema operativo basado en GNU/Linux, y fué testeado en Ubuntu 12.04 64 bits.

1. Node.js y NPM

Primero instalamos Node.js y Node Package Manager (NPM).

Es importante NO usar SUDO al instalarlos. Usar sudo probablemente te traiga algunos conflictos de permisos complicados.

Instalar Node y NPM puede traer dificultades dependiendo de la configuración de tu máquina (firewall, usuarios, etc.) He encontrado que este Gist tiene la solución correcta para la mayoría de los casos. Aquí, vamos a usar la primera.

Instalamos Node (se hace referencia al archivo ~/.bashrc, tu shell puede usar otro):

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
. ~/.bashrc
mkdir ~/local
mkdir ~/node-latest-install
cd ~/node-latest-install
curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
./configure --prefix=~/local
make install

Luego instalamos NPM:

curl https://www.npmjs.org/install.sh | sh

Para verificar:

node -v
npm -v

Node debería ser v0.10.26 o mayor, NPM 1.4.3 o mayor.

2. Compass

Con Node y NPM listos, ahora necesitamos instalar Compass.

"Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy."

Para instalar Compass, primero necesitamos Ruby.

Si ya tienes Ruby instalado, verifica que tengas la última versión con

ruby -v

Y actualiza las gemas con

gem update --system

Si no lo tienes, vamos a instalarlo (al escribir esto la última versión es 2.1.1).

Hay diferentes manera de instalar Ruby, en este caso elegimos hacerlo a través de Ruby Version Manager (RVM).

"RVM is a command-line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems."

curl -L https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 2.1.1
gem install compass

Verificamos:

ruby -v
compass -v

Por las dudas, abre una nueva consola y prueba ruby -v de nuevo.

Si en la nueva consola no tienes el comando ruby, tienes que habilitar la opción "Run command as a login shell" en la configuración de tu consola. El porqué de esto está muy bien explicado en este artículo.

3. Yeoman

Para crear nuestra aplicación, vamos a usar el generador Backbone generator de Yeoman. Va a realizar casi todo el trabajo pesado por nosotros.

Yeoman es una gran herramienta creada por Addy Osmani (el mismo del recomendable libro Backbone Fundamentals) y otros, que nos ayudará a crear y trabajar con nuestra aplicación.

Viene con tres herramientas: yo, para crear nuevas aplicaciones ("scaffolding"), Grunt, to buildear, correr, testear y ejecutar todas las tareas de nuestro flujo de trabajo, y Bower, un manejador de paquetes.

Instalaremos Yeoman (usamos el flag -g para indicarle a NPM que debe ser instalado globalmente):

Atención: no usamos SUDO cuando instalamos con npm!

npm install -g yo

Si ves el siguiente mensaje en la consola:

[Yeoman Doctor] Uh oh, I found potential errors on your machine

[Error] NPM root value is not in your NODE_PATH
  [info]
    NODE_PATH = /usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript
    NPM root  = ~/local/lib/node_modules

  [Fix] Append the NPM root value to your NODE_PATH variable
    Add this line to your .bashrc
      export NODE_PATH=$NODE_PATH:~/local/lib/node_modules
    Or run this command
      echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" > ~/.bashrc && source ~/.bashrc

Sigue las instrucciones debajo de [Fix], para agregar el directorio raiz de NPM al NODE_PATH (ojalá todas las herramientas nos dieran soluciones así!)

echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" > ~/.bashrc && source ~/.bashrc

Para crear nuestra app Backbone, necesitamos el Backbone generator de Yeoman que sabe cómo hacerlo. Vamos a instalarlo:

npm install -g generator-backbone

Para verificar la instalación:

yo -h

Debajo del mensaje "Please choose a generator below." deberías ver un item "Backbone". Si no, prueba lo siguiente y vuelve a instalar el generador:

echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" >> ~/.bashrc && source ~/.bashrc

Creando la aplicación

Casi estamos listos. Crea un directorio para la nueva aplicación, y usa el generador dentro de ella:

mkdir <nombre-de-la-app>
cd <nombre-de-la-app>
yo backbone

Durante la creación, elige las opciones "⬢ Bootstrap for Sass" y "⬢ Use RequireJs".

El próximo paso es instalar las dependencias:

npm install
bower install

Corriendo la aplicación

La app está creada. Para probarla, corremos la tarea "serve" de Grunt:

grunt serve

Nuestro navegador default se debería abrir apuntando a http://localhost:9000/, y veremos la app creada.

En la consola, podemos ver las diferentes tareas que Grunt corrió para nosotros (estas tareas están definidas en el Gruntfile.js, en el directorio de nuestra app). Podemos ver una tarea "connect:livereload" ejecutada, y se sigue ejecutando la tarea "watch". Esto significa que gracias a LiveReload, podemos editar por ejemplo index.html o cualquier archivo javascript dentro de nuestra app, guardarlo, y el navegador se actualizará automaticamente! Ahorra mucho tiempo.

Listo, ya podemos empezar a trabajar en nuestra app Backbone!

El generador no solo creó la estructura por nosotros, también podemos continuar usándolo para crear las partes básicas de toda app Backbone (models, views, etc.), como el router:

yo backbone:router ''

Happy coding!