Primeros pasos para conocer Emberjs

0. Índice de contenidos.

• 1. Entorno
• 2. Introducción
• 3. ¿Qué es Emberjs?
• 4. Patrón MVC
• 5. Iniciar aplicación Ember
• 6. Creación de plantillas con Handlebars
• 7. Creación rutas y estados.
• 8. Creación del mvc.
• 9. Resultado y usos
• 10. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Intel Core 2 CPU T7200 @ 2.00GHz x 2
• Sistema Operativo: Ubuntu 12.04 LTS x32
• netBeans IDE 7.3

2. Introducción

En este tutorial vamos a conocer Emberjs, veremos qué es Ember, cómo lo utilizaremos y una breve introducción a su API.

3. ¿Qué es Emberjs?

Ember es un framerwork para javascript, que nos permite utilizar el patrón MVC (Modelo Vista Controlador) en nuestras aplicaciones de manera más automatizada y sencilla.
Podemos descargarnos esta librería desde la página oficial de Ember.

Así como un paquete de iniciación donde encontraremos a parte de esta, otras librerías en las que se apoya Ember.
Se apoya en jQuery, una librería javascript, que nos permite manejar nuestra aplicación en el entorno cliente, con toda la potencia de javascript pero de manera más sencilla.
Si quieres conocer más sobre jQuery puedes acceder a toda la información que te proporcionan en su página oficial, así como la documentación y el API aquí .

También se apoya en Handlebars , una librería javascript que nos permite crear plantillas en el HTML, algo indispensable en el patrón MVC

Ahora vamos a explicaros los fundamentos básicos para crear vuestra aplicación con Ember.
Lo más importante a tener en cuenta es tener las librerías que acabo de nombrar en el directorio de vuestro proyecto, obviamos que tenéis que incluirlas en el html.

4. Patrón MVC

Para que entendáis un poco como va el asunto, voy a explicar los fundamentos del patrón MVC(Modelo Vista controlador).

• Vista: es la representación de los datos al usuario.
• Controlador: código que obtiene esos datos dinámicamente y genera el
  contenido que se mostrará al usuario en las vistas.
  Los obtiene accediendo a los modelos.
• Modelo: los datos almacenados, junto con las reglas de negocio que transforman esa información (teniendo en cuenta las acciones de los usuarios).

5. Iniciar aplicación Ember

Una vez visto esto, vamos a ver como creamos esto con Ember.

Lo primero de todo es inicializar nuestra aplicación en un fichero js de la siguiente manera:

 App = Ember.Application.create();

Con este código crearemos nuestra aplicación en el namespace “App”.

6. Creación de plantillas con Handlebars

Lo siguiente que vamos a ver, es como creamos una plantilla, podríamos decir que es una forma de representar la información, no es lo que Ember trata totalmente como una vista,
dado que Ember tiene una forma de crearlas, que luego veremos.

Para utilizar plantillas se apoya en Handlebars:

<script type="text/x-handlebars">
     <h2>
     	<strong>{{firstName}} {{lastName}}</strong>
     </h2>
</script>

Si queremos crear distintas plantillas, basta con darles el atributo data-template-name:

<script type="text/x-handlebars" data-template-name="Index">
     <h2>
     	<strong>{{firstName}} {{lastName}}
    </h2>
</script>

7. Creación de rutas.

Tenemos la posiblidad de crear unas rutas, con un enrutador que nos provee Ember.
Este nos permite interaccionar con nuestra aplicación y movernos entre diferentes estados.
Basta con ejecutar el método route dentro del método map del objeto Router.

App.Router.map( function() {
   this.route( 'index' , { path: "/" }); // Takes us to "/"
});

8. Creación del MVC

Lo siguiente es ver como crear un controlador. La sintaxis que nos pide Ember es sencilla,
si queremos crear un controlador la sintaxis es la siguiente:

App.NombreController = Ember.Controller.extend({
 
});

En el caso de index:

App.IndexController = Ember.Controller.extend({
 
});

En la mayoria de las aplicaciones hechas con Ember los modelos son manejados con Ember Data,
una librería construida con Ember.
Ember data nos ayuda a obtener los datos de un servidor, hacer los cambios en el navegador y guardar estos cambios para enviarlos de vuelta al servidor,
es algo parecido a lo que nos proporcionan los ORMs.
Para esta labor se apoya en la tecnología RESTful JSON,
pero también podemos crear nuestros modelos a mano.

Para crear un modelo manualmente tenemos que extender el objeto Model:

App.Person = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  birthday: DS.attr('date'),

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

Como vemos podemos definir atributos, funciones y atributos computables.
Esto lo podemos hacer tambien con los controladores, rutas etc.

La forma de crear vistas con Ember es ejecutando el método create del objeto View:

var view = Ember.View.create({
  name: “Bob”
});

9. Resultado y usos

Ahora voy a enseñaros como podemos mostrar los datos de un modelo en nuestra plantilla html.
Es sencillo:

Uno de los potenciales de Ember es, entre otros, que cualquier propiedad de un objeto Ember tiene un sufijo Binding ligado a el para ser tratado de forma especial.

Por ejemplo tenemos la expresion valueBinding, que aplica esta regla al atributo value.

Ejemplo de uso en internet

10. Conclusiones

Ember nos puede proporcionar las herramientas necesarias para utilizar este patrón en nuestra aplicación,
y tener abstraida la parte lógica y funcional de los datos.

Para más información no dudéis en buscarla en la página oficial o internet:

1. Guías oficial Ember
2. Guía inicial en net.tutsplus
3. Documentación en github

Cualquier duda o sugerencia podeis comentarlo.

Saludos.