Introducción a Ember CLI

Obtén todo el poder de Ember.js a unos comandos de distancia. Con Ember CLI podrás agilizar tu proceso de desarrollo, hacer más productivo a tu equipo y seguir convenciones profesionales y buenas prácticas basadas en la experiencia de cientos de aplicaciones reales.

Foto por Dennis AB

¿Qué es Ember.js?

Ember.js es un framework para crear aplicaciones web ambiciosas. Está diseñado precisamente para eso: implementar proyectos grandes. Por eso se dice que la curva de aprendizaje es algo alta. No temas, todas las dificultades se irán resolviendo conforme vamos asimilando the ember way: la forma de hacer las cosas según la filosofía de Ember. Iremos aprendiendo a pensar del modo ember poco a poco y verás lo fácil y rápido que es desarrollar usando Ember.

En otra publicación hablaremos en detalle sobre porque Ember.js es el framework de javascript que quieres usar para construir aplicaciones ambiciosas. Por ahora, si llegaste a este artículo solo por curiosidad o solo quieres probar ember.js, puedes confiar en mí cuando te digo que es maravilloso.

Y ahora, ¿qué es Ember CLI?

Básicamente, Ember CLI — Ember Command Line Interface — es una herramienta para hacer que la experiencia de desarrollo sea más sencilla, pues automatiza muchos procesos repetitivos e introduce convenciones profesionales a nuestro proyecto. Además, Ember CLI es el estándar oficial para hacer aplicaciones con Ember.js.

Ember CLI maneja principalmente los siguientes puntos:

• Establece la estructura de directorios del proyecto, basado en la experiencia de numerosos proyectos reales en Ember.js por profesionales.
• Realiza la concatenación, compilación, compresión, y demás manejos de archivos.
• Ofrece generadores de patrones comunes.
• Provee un ecosistema de addons.

La línea de comandos es tu amiga en el desarrollo web, existen muchas herramientas que te ayudarán con procesos repetitivos. Ember CLI también hace uso de algunas de esas herramientas, entre las que están por ejemplo, bower y npm, que se utilizan para manejar dependencias. No hablaremos a detalle de estas herramientas en este artículo.

Instalar Ember CLI

Para poder instalar Ember CLI necesitas tener node.js y npm instalado. Sobre npm también instalaremos otras dos dependencias, a saber, bower y PhantomJS. Lo iremos haciendo paso a paso. En este tutorial seguiremos comandos de UNIX.

Primero abre tu consola. Por si no la usas con frecuencia, te la presento:

Una screenshot de la consola, donde ingresaremos los siguientes comandos.

1. Instalar node.js

Suena tentador ir a https://nodejs.org/ y descargar un instalador, pero DETENTE. Esto te causará conflictos después porque instalará node en el root del sistema. La forma adecuada de instalar node en un ambiente de desarrollo es utilizando nvm, un gestor de versiones de node.

En la línea de comando ingresa el siguiente código para instalar nvm:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash

Una vez tenemos nvm instalado, podemos proceder a instalar node.js. La versión actual al momento de escribir este tutorial es 0.12.7, por lo que utilizamos los siguientes comando:

nvm install 0.12.7
nvm use 0.12.7

2. Instalar Ember-CLI

Una vez está eso listo, ya todo es sencillo. Primero instalamos bower, utilizando npm, el gestor de dependencias de front-end:

npm install -g bower

Ahora instalamos finalmente lo que estamos buscando:

npm install -g ember-cli

Aquí estamos utilizando la versión 1.13.7 de ember-cli.

Crear una aplicación con Ember CLI

Ahora ya tenemos ember-cli instalado y estamos listos para crear una aplicación. Utiliza el comando cd en tu consola para posicionarla en el directorio donde quieras crear la aplicación. Ahora creamos la aplicación:

ember new primer-app

Donde primer-app es el nombre de nuestra aplicación. Ahora veamos un poco sobre los archivos que se generaron:

Como quizá leíste en la consola al ejecutarse el comando anterior, se crean varios directorios y numerosos archivos. Ember CLI también se encarga de descargar e instalar los componentes de bower y los módulos de node. También se inicializa un repositorio de git. La mayor parte del tiempo estaremos trabajando sobre la carpeta app, donde hay carpetas para cada uno de los elementos estándar de ember.

Ahora podremos veamos si funciona. Primero movemos la consola al directorio de la aplicación de ember que acabamos de crear:

cd primer-app

Y vamos a pedir a Ember CLI que monte un servidor de live preview, donde podremos ver los cambios de nuestra aplicación mientras trabajamos en ella. Es muy útil para el desarrollo. En la consola ingresa el siguiente comando:

ember serve

Y ahora utilizamos el explorador para ver el live preview:

No hay mucho que ver aún, pero ya tenemos una aplicación de ember funcionando exitosamente.

Ahora cada vez que editemos algún archivo de la aplicación, este live preview se actualizará para mostrar estos cambios en vivo.

Generadores

Una de las mayores ventajas de Ember CLI es que incluye generadores para todos los tasks comunes. Puedes crear rutas, plantillas, servicios, componentes, entre otros, con una línea de comando, en vez de crear y editar varios archivos a mano. Veamos el ejemplo de la creación de una ruta carros:

ember generate route carros

Esto nos creará un archivo carros.js en la carpeta de routes, y carros.hbs en la de templates. Además, editará el archivo de router.js con la declaración de la ruta y preparará los archivos para pruebas.

Addons

Otro de los features más interesantes de Ember CLI es la facilidad con que pueden instalarse addons. A la fecha hay más de 1,300 addons desarrollados por la comunidad de ember, que extienden la funcionalidad de ember desde subir archivos hasta manejar autenticaciones con el servidor.

Existen dos sitios principales donde puedes buscar addons:

• Ember Observer: este es personalmente mi favorito, pues tiene categorías y agrega ratings a los addons que lista.
• Ember Addons: es una lista más exhaustiva de los addons disponibles para ember.

¿Y ahora?

La posibilidades son muchísimas, pero no quería aburrirlos demasiado. Aquí solo hemos hablado algunas de las bondades de Ember CLI a nivel general, pero jugando con ember es como más se aprende. Otra buena forma de aprender rápido ember es participando en los meetups locales, así que te recomiendo ver si en tu ciudad existe alguna comunidad para que te involucres.