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!
