Ember

class: center, middle, inverse

.center[![Logo](./assets/images/ember-light.png)]

### Jaime Castro
### Vicente Dragicevic
### Fernando Florenzano
### Matías Jünemann

---

# Outline

1. Introducción
2. Software Stack
3. Conceptos Básicos
4. Futuro

---
class: center, middle, inverse

# Introducción

---
# ¿Ember?

.left-column[
* Web framework en JavaScript
* Model-view-viewmodel (MVVM)
* Single-page apps
]
--

.small.right-column[
```shell

├── assets
│ ├── project-name.css
│ ├── project-name.js
│ ├── vendor.js
│ ├── vendor.css
│ ├── ...
├── crossdomain.xml
├── fonts
│ └── bootstrap
|     ├── ...
├── index.html
├── robots.txt
├── ...
```
.center[
Output final
]
]

---
# Filosofía y Diseño

* Convention over Configuration .red[(CoC)]
* Don't Repeat Yourself .red[(DRY)]

Es a veces descrito como "highly opinionated" pero construido para ser muy flexible.

.center[**¿Qué es lo que relmente le da este carácter?**]

---

# Filosofía y Diseño: CoC, DRY

1. Archivos generados donde más conviene
2. Librería a la que se le indica "lo que existe" y busca donde se espera que estén las cosas

```javascript
Router.map(function() {
  this.route('users')
});
```
--
## .center[↓]

```javascript
Router.map(function() {
  this.route('users')
  this.route('items')
});
```

---

# Filosofía y Diseño: CoC, DRY

.center[

## Setup inicial

|Rails|Ember|
|---|---|
|247 líneas|69 líneas|

Misma filosofía, propósitos distintos

]

---
class: center, middle, inverse

# Software Stack

---
# Software Stack

### Ember-CLI

Herramientas para la terminal.

Se acuerdan de Rails?

```bash
> ember new my-app
> ember generate route my-route
> ember init
> ember build
> ember server
...
```

---
# Software Stack

### Ember Data

* Librería de persistencia de datos.

* Mapea modelos en el cliente a datos en el servidor.

* Permite sincronizar de manera transparente los datos con el servidor.

---
# Software Stack

### Ember-Inspector

Extensiones para Firefox/Chrome para debugueo.

### Liquid Fire

Provee soporte de animaciones:
  * entre rutas
  * entre modelos

---
# Software Stack

### Fastboot

Progressive enhancement!

* Node.js
* Al entrar al sitio, se carga el HTML inicial.
* Después de descargar el contenido, se descarga el JavaScript.

.center[**Principal caso de uso: Ser indexado por los motores de búsqueda**]

.red.center[Suena bien, pero hay que hacer trabajo extra]

---
class: center, middle, inverse

# Getting started

---
# Getting started

## Prerrequisitos

- Node.js
- npm
- git

## Comandos

```shell
npm install -g ember-cli
```

```shell
ember new my-project
```

```shell
ember build
```

---

class: center, middle, inverse

# Conceptos Básicos

---
class: center, middle, inverse

# Conceptos Básicos

# Rutas

---
# Rutas

```bash
> ember generate route about
> ember generate route favorites
```

Estos comandos crean un archivo para cada ruta, un template, un archivo de tests unitarios.
Luego en `app/router.js`

```javascript
Router.map(() => {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});
```

---
# Rutas

Podemos anidar rutas fácilmente con un callback:

```javascript
Router.map(() => {
  this.route('about', () => {
    this.route('faq');
  });
});
```

O podemos generarla con un comando:

```bash
> ember generate route about/faqs
```

---
# Rutas

Para rutas con parámetros:

```javascript
Router.map(() => {
  this.route('about', () => {
    this.route('faq', { path: '/faq/:faq_id'});
  });
});
```

Es importante notar que se debe usar el formato `modelo_id`, para que la ruta pueda cargar el modelo correcto.

---
# Rutas

También podemos crear una ruta que haga *match* con varios URLs.

Un uso común es cuando no existe la página que se intenta acceder:

```javascript
Router.map(() => {
  this.route('404', { path: '/*wildcard' });
});
```
---
class: center, middle, inverse

# Conceptos Básicos

# Models
---
# Models

* Los modelos son objetos que **representan** los datos que queremos mostrar.

* Los modelos **no contienen datos**.

* Usualmente representan datos *persistentes* (se cargan y guardan al cambiarlos).

* Una vez cargados los datos, los componentes se encargan de *traducirlos* a la interfaz de usuario.

* Ember Data facilita el cargar y guardar los modelos.

---
# Models

Tomemos como ejemplo un modelo *blogPost*:

```javascript
import DS from 'ember-data';

export default DS.Model.extend({
  author: DS.attr('string'),
  date:  DS.attr('date'),
  categories: DS.hasMany('category')
});
```

---
# Models

Como dijimos antes, los modelos **no contienen datos**.

Las instancias de los modelos, llamadas **records**, son las que contienen los datos que cargamos del servidor.

Los **records** son identificados por el **tipo** de su modelo y un **ID** único.

```javascript
this.get('store').findRecord('blogPost', 1);
```

Esto nos devuelve el record `{ id: 1, author: 'Tomster', ...}`.

---
# Models

Probablemente tendremos una API con la que pedimos los records.

Para que Ember sepa cómo hacer el request, usamos **adapters**.

Cuando nuestra app pide un record que no tiene en **caché**, usará el adapter para que realice el request a nuestra API. Lo mismo si queremos guardarlo en la base de datos.

Podemos crear adapters propios, pero no es necesario si nuestra API calza con los *defaults* de Ember Data:
  * RESTAdapter
  * JSONAPIAdapter (default)

---
# Models

```javascript
store.findRecord('blogPost', 1).then((post) => {});
```

Al hacer esto, el JSONAPIAdapter hace un `GET` a `/blogPosts/1`.

Pero si queremos crear uno propio (`app/adapters/blogPost.js`):

```javascript
export default DS.JSONAPIAdapter.extend({
  namespace: 'api/v1'
});
```

Hay **muuuuuchas** más configuraciones que podemos usar, por ejemplo, para configurar los headers o el host.

---
# Models

## Caching

Ember automáticamente guarda los records que pedimos en el **caché**.

Si pedimos un record en una parte de nuestra app y lo modificamos, cuando lo pidamos en otro lugar obtendremos el record modificado.

####¿Y si el record cambia en el servidor pero nosotros lo tenemos en caché?

Ember Data automáticamente hace un request en el **background**, y si hay cambios el record se actualiza (y se vuelve a renderear).

---
class: center, middle, inverse

# Conceptos Básicos

# Templates
---
# Templates

Los templates definen **cómo se ve** la interfaz de usuario. Ember utiliza la librería **Handlebars**.

* Contienen HTML estático

* Permiten contenido dinámico dentro de expresiones {{}} para escape de valores.
  * Para no escapar valores, se puede usar {{{}}}.

* Data-Binding: al cambiar el valor de una expresión, se actualiza su representación visual automáticamente.

* Tienen un **contexto**, de donde las expresiones leen sus propiedades:
	* Usualmente es otro componente
	* Para templates rendereados por rutas (`application.hbs`), es el controlador

---
# Templates: Ejemplos

## Template rendereado por ruta

El controlador de la aplicación: app/controllers/application.js

```javascript
import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Jaime',
  lastName: 'Castro'
});
```

Template de la aplicación: app/templates/application.hbs
```hbs
Hello, <strong>{{firstName}} {{lastName}}</strong>!
```

---
# Templates: Blocks

Permiten agregar iteración y otras funcionalidades entregando bloques con nuevo contexto.

```hbs
{{#nombre-block parametros}}
  ...
{{/nombre-block}}
```
---
# Blocks: **with**
Define que parte del contexto utilizar en cierta sección. Permite definir distintos
contextos de entrada.
```javascript
{
  curso: 'Web Avanzada',
  prof: { nombre: 'Jaime', apellido: 'Navón'},
  ayudante:{ nombre: 'Patricio', apellido: 'López'}
}
```
```hbs
{{#with prof}}
  Hello, <strong>{{nombre}} {{apellido}}</strong>!
{{/with}}
{{#with ayudante}}
  Hello, <strong>{{nombre}} {{apellido}}</strong>!
{{/with}}
```
---
# Blocks: **each**
Iterador básico, equivalente a forEach de javascript. Permite renombre de argumento.
```javascript
{
  curso: 'Web Avanzada',
  alumnos: [
    { nombre: 'Jaime', apellido: 'Castro'},
    {nombre: 'Matias', apellido: 'Junemann'}
    ]
}
```
```hbs
{{#each alumnos}}
  Hello, <strong>{{nombre}} {{apellido}}</strong>!
{{/each}}
```
---
# Blocks: **Condicionales**
Permite bloques condicionales de respuestas de servidor utilizando variables
de contexto. También existe else y elif.
```javascript
{
  curso: 'Web Avanzada',
  vinoElAyudanteHoy: false,
  ayudante:{ nombre: 'Patricio', apellido: 'López'}
}
```
```hbs
{{#if vinoElAyudanteHoy}}
  {{#with ayudante}}
    Hello, <strong>{{nombre}} {{apellido}}</strong>!
  {{/with}}
{{/if}}
```
---

# Templates: Helpers

Los Helpers permiten añadir lógica.

Ember viene con algunos helpers, pero también permite crearlos:

Si creamos en app/helpers/sum.js
```javascript
export function sum(params) {
	return params.reduce((a, b) => a + b);
};
export default Ember.Helper.helper(sum);
```

Luego lo usamos en un template:

```hbs
<p>Total: {{sum 1 2 3}}</p>
```
---
# Templates: Blocks son también Helpers!
```javascript
Handlebars.registerHelper('each', function(context, options) {
  var ret = "";

for(var i=0, j=context.length; i<j; i++) {
    ret = ret + options.fn(context[i]);
  }

return ret;
});
```
De modo que se pueden construir bloques más complejos que permiten crear
estructuras complicadas iteradoras!

---
class: center, middle, inverse

# Conceptos Básicos

# Componentes
---
# Componentes

Controlan el **comportamiento** de la interfaz de usuario.

Están formados por:
* Un template.
* Código JavaScript que define su comportamiento (opcional).

Deben contener al menos un guión (-) en su nombre.

---
# Componentes

```bash
> ember generate component blog-post
```

Luego definimos su template en app/components/blog-post.hbs :
```hbs
<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>
```

---
# Componentes

Ahora podemos usarlo!
```hbs
{{#each model as |post|}}
  {{#blog-post title=post.title}}
    {{post.body}}
  {{/blog-post}}
{{/each}}
```
Pueden funcionar como blocks también!
---
# Componentes
Se les puede agregar más lógica con javascrit! En app/components/blog-post.js
```javascript
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav',
  classNames: ['primary'],
  classNameBindings: ['isUrgent:urgent:not-urgent', 'priority']
});
```

```html
<nav class="primary urgent high"> //isUrgent = true, priority = 'high'

<nav class="primary not-urgent low"> //isUrgent = false, priority = 'low'
```
---
# Componentes: eventos!
Permite también el manejo de eventos para estos componentes:
```javascript
import Ember from 'ember';

export default Ember.Component.extend({
  doubleClick() {
    alert("DoubleClickableComponent was clicked!");
  }
});
```
Soporta:
touchStart,
touchMove,
touchEnd,
touchCancel,
keyDown,
keyUp,
keyPress,
mouseDown,
mouseUp,
contextMenu,
click,
doubleClick,
mouseMove,
focusIn,
focusOut,
mouseEnter,
mouseLeave,
submit,
change,
focusIn,
focusOut,
input,
dragStart,
drag,
dragEnter,
dragLeave,
dragOver,
dragEnd, y
drop
---
class: center, middle, inverse

# Conceptos Básicos

# Servicios
---
# Servicios

* Singletons que viven durante todo el ciclo de vida de la app.

* Utilizados en features que comparten estado o conexiones persistentes.

* Geolocation, sesiones, WebSockets, Logging...

---
# Servicios

```bash
> ember generate service shopping-cart
```

Deben extender la clase `Ember.Service`

```javascript
export default Ember.Service.extend({
  items: null,
  init() {
    this._super(...arguments);
    this.set('items', []);
  },
  add(item) {
    this.get('items').pushObject(item);
  },
});
```

---
# Servicios

Debemos "inyectar" el servicio en un componente/otro servicio:

```javascript
export default Ember.Component.extend({
  shoppingCart: Ember.inject.service()
});
```

Las propiedades inyectadas son cargadas de forma **lazy**, por lo que se acceden con la función `get`.

---
# Servicios

Podemos acceder al servicio dentro del template del componente:

```hbs
<ul>
  {{#each cart.items as |item|}}
    <li>
      {{item.name}}
      <button {{action "remove" item}}>Remove</button>
    </li>
  {{/each}}
</ul>
```
---
class: center, middle, inverse

# Futuro

---
# Futuro

* Glimmer 2: un nuevo motor de renderizado para Ember
* Engines: Permiten componer una aplicación a partir de múltiples otras. Por ahora hay soporte experimental.

---
class: center, middle, inverse

# That's all folks!