Nuestra Primera App con Ember.js

1
12233

Nuestra Primera App con Ember.js

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Intel Core 2 Duo CPU T8100 @ 2.10GHz x 2
  • Sistema Operativo: Ubuntu 12.04 LTS x32
  • Sublime Text 2

2. Introducción

A través de esta guía vamos a hacer una pequeña aplicación con Ember.js cubriendo algunos de los aspectos básicos del framework, de manera que podamos hacernos una idea de lo que Ember.js puede ofrecernos. Algunos de los aspectos básicos de ember están tratados en esta otra guia, es recomendable leerla antes para hacernos una idea de lo que trata de aportar Ember.js

Para realizar esta guía vamos a usar la versión de Ember 1.0.0-RC.2, y usaremos el Starter Kit que podemos descargar desde la página de Ember, el cual tiene la siguiente estructura:

Carpetas Ember Starter Kit

El grueso de nuestra aplicación residirá en el archivo app.js, mientras que las vistas las almacenaremos en el archivo index.html, Handlebars ( el encargado de las vistas en nuestra aplicación ) también permite usar archivos externos para almacenar las vistas, pero de momento no vamos a hacer uso de esa funcionalidad.

El primer paso sería crear nuestra App, y asignarla al namespace que deseemos, en este caso será al namespace App.

Por defecto Ember nos crea una Ruta, un Controlador y una Vista, sin nosotros tener que hacer nada, en la siguiente imagen podemos hacernos una idea de la convención de nombres que sigue Ember.js, es importante saber que, aunque nosotros no hayamos hecho ninguno de esos componentes Ember los está haciendo por nosotros.

3. Las partes de nuestra Aplicación

3.1. El Objeto Router

El objeto Router es el encargado de mantener el estado de nuestra aplicación a través de la URL, una vez mas, sino le decimos lo contrario Ember, usará el nombre de la ruta como ruta a capturar en la URL ( es decir, si no declaramos ninguna ruta a una ruta llamada lista, automáticamente se le asociará la URL /lista.

Convenciones de nombres en Ember
De: Guia oficial de ember

3.2. La Vista

En cuanto a las Vistas o Templates, Ember usará automáticamente dos templates, uno sin nombre y otro con el nombre index, en la primera solo tendremos un título junto con el código {{outlet}} el cual Ember sustituirá por el contenido del template que pertenezca a la ruta actual.

Templates en aplicación Ember

3.2. El Modelo

En cuanto al Modelo, Ember nos provee de una clase llamada Ember.Data que nos permite sincronizar nuestros Objetos del modelo en la parte cliente con nuestro servidor, para esta aplicación nosotros vamos a hacer nuestros propios modelos sin sincronizarlos al servidor, ya que nos vamos a centrar en cómo interactúan las diferentes partes de la aplicación-

3.2. El Controlador

Por último los Controladores que en Ember pierden importancia y se usan meramente como «Proxys» para manipular los datos del modelo antes de mostrarlos por la Vista.

4. La Aplicación

4.1. El Índice

La aplicación que vamos a hacer nos va a permitir insertar un nombre, el cual tendremos que repetir para comprobar que se ha escrito correctamente, lo cual nos permitirá simular la funcionalidad de un registro y ver como Ember computa dinámicamente si los valores de los campos son iguales ( sin tener que entrar al DOM y ir actualizando manualmente ), y actualizará automáticamente el estado de la aplicación, en caso de ser correcto, o mostrará un mensaje de error en caso contrario.

Lo primero que vamos a hacer va a ser declarar el Objeto de modelo

Linea 1: Creamos el «tipo» de objeto User extendiendo el prototype Object de Ember que nos aportará mucha de la «magia» que hace posible que todo se actualice en tiempo real.

Linea 2-3: Declaramos dos atributos simples que tendrá el Objeto

Linea 4-11: Una de las mayores ventajas de Ember, los atributos computados, nos permite la posibilidad de crear un atributo que se recalcule automáticamente cada vez que cambie alguno de los atributos por los que está compuesto ( todos o alguno de ellos, en la línea 11 se le indica los atributos que quieres observar )

En el template Index vamos a tener el siguiente código:

Linea 1: Podemos ver como estamos llamando al template index, en este caso cogerá automáticamente la ruta «/».

Linea 2: Usamos una función condicional de Handlebars, en caso de que exista esa variable Y sea true, mostraremos un DIV con la clase error, si quisiéramos internacionalizar o poner varios tipos de errores solo tendríamos que mostrar por pantalla un String que contuviese el error y Ember se encargaría de mostrarlo.

Linea 8: Usamos uno de los métodos que nos proporciona el objeto View de Ember, el cual nos creará un Input Text cuyo valor estará asociado directamente a un atributo de un objeto del modelo que indiquemos.

Linea 13: En esta línea podemos observar dos cosas, el método {{#linkTo }} el cual creará un enlace a la ruta que le pongamos sin necesidad de saber nosotros donde nos encontramos. También tenemos el método {{bindAttr disabled}} el cual nos deshabilitará el botón en caso de que la variable que le pasemos sea true, hay que tener en cuenta que esto se actualizará automáticamente cada vez que la variable cambie de valor.

Por ultimo solo necesitamos crear la ruta «Menú que hemos indicado en la línea 13, para ello le tenemos que pasar al objeto Router un JSON con todas las rutas que tenemos en nuestra aplicación, de momento solo tenemos dos rutas.

Cómo se puede observar,hemos declarado la ruta menú, como un recurso, el cual a su vez puede tener otras rutas.

4.2. El Menú

El Template:

Generamos las tres rutas, en este caso estará la primera ruta «/menu», y las dos subrutas, /menu/selectColor y /menu/watchColor

4.3. El Selector de Color:

Lo siguiente será la parte necesaria de elegir un color y que se actualice en toda la aplicación donde necesitemos usar el color utilizado ( pensar que el color puede ser cualquier opción que pueda llegar a tener nuestra aplicación )

Linea 1-3: Declaramos un objeto de tipo color que va a tener un atributo nombre.

Linea 5: Por defecto el color seleccionado en la aplicación será el rojo, como se puede ver, podemos agregar cualquier atributo o función al Namespace App, de manera que tendremos acceso a el desde cualquier parte de la aplicación, incluidos los templates.

Linea 7-11: Le añadimos un método al controlador de la ruta Menu/SelectColor, como podemos ver le estamos pasando por parámetro algo, mas adelante veremos como el template es el que se encargará de pasarle el color en el que se haga click

Linea 14 -24 : Aquí estamos declarando el Modelo que va a usar la ruta/vista/controlador MenuSelectColor, simplemente le estamos devolviendo un array de colores, que tanto la vista como mas adelante el controlador, se encargaran de pedir. En una aplicación real, aquí tendríamos que tener un intermediario que se encargase de hacer una petición REST a un servidor.

Por ultimo hacemos los templates que se encargaran de mostrar los colores y llamar a los eventos correspondientes cuando estos sucedan

Linea 3-5: En este fragmento de código tenemos que destacar la función {{#each}} que nos proporciona handlelbars, que nos permite mostrar un Array y por cada objeto del array hacer algo, recordar como antes hemos creado un Array de colores y lo hemos declarado como el modelo para esta vista/ruta. En este caso estamos creando un rectángulo por cada color, con una acción interna, la cual llamará al método changeSelectedColor del controlador de la ruta, y le pasaremos por parámetro «this», que será el modelo ( color ) que estamos pintando.

Linea 9: Aquí usamos otro helper de Handlebars, el cual nos va a permitir enlazar un dato que se está mostrando en la vista con un dato del modelo/aplicación, esto nos permite que si este dato cambia en el modelo, automáticamente cambiará en la vista y viceversa, lo cual nos ahorra mucho esfuerzo a la hora de tener que buscar cambios y actualizar la vista en caso de que estos existan, en este caso concreto el cambio solo se propagará del modelo a la vista, ya que viceversa no se podrá cambiar.

Linea 9 y 18: Podemos comprobar como hemos escrito dos veces «:selectedColor», esto simplemente es para indicarle a Handlebars que queremos añadir la siguiente palabra literalmente, no queremos que busque ninguna variable en el modelo con ese nombre, esto nos sirve para darle nombres fijos a las clases para luego aplicarle estilos, pero a la vez teniendo otra clase variable.

5. Conclusiones

Como hemos podido comprobar Ember es un framework MVC potente, que nos permitirá hacer Aplicaciones Single Page con relativa facilidad una vez le hemos cogido el truco, a pesar de la dificultad inicial, y la falta ( o mas bien dispersión ) de documentación actualizada, puede hacer difícil los primeros pasos con Ember, pero las muchas ventajas que nos ofrece hacen que merezca la pena.

En cuanto al futuro, el equipo de Ember, está dando los últimos retoques a la librería Ember Data, la cual nos va a permitir ( a modo de ORM en el cliente ), actualizar automáticamente los datos del modelo en el cliente con el servidor, sin necesidad de programar nosotros nuestra propia solución, lo que puede hacer del desarrollo Frontend una verdadera delicia.

Podemos encontrar todo el código de la aplicación en GitHub

1 Comentario

Dejar respuesta

Please enter your comment!
Please enter your name here