![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758306/danilo-avatar02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758334/danilovaz.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3004998/github.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3004988/twitter.png)
/danilovaz
@_danilovaz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758630/Ember.js_Logo_and_Mascot.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758426/what.png)
- Um framework para criar aplicações web ambiciosas
- Criado pensando na produtividade do desenvolvedor
- Opinado e alinhado com os Padrões Web
- Convenção ao invés de configuração
- Core Team trabalhando em apps reais e robustos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758465/why.png)
It's more important to reduce the effort of maintenance than it's to reduce the effort of implementation.
Max Kanat-Alexander, Code Quality
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758470/for-what.png)
- Manter organizado
- Modularizar o código
- Separar as responsabilidades
- Estabelecer convenções para a equipe
- Manter tudo testável
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758473/users.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758555/tumblr_o3f1npiGpD1r7eta3o1_500.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758563/nasa-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758556/nasa.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758567/linkedin-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758565/linkedin.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758585/playstation-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758568/playstation-now.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758587/twitchtv-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758569/twitchtv.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758588/travis-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758570/travis.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758589/intercom-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758571/intercom.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758590/flex-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758572/flexboxdefense.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758591/mlabs-title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758577/mlabs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3765992/emberconf-2015-tomster-8095d8ec.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759580/comunidade.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766166/Screenshot_from_2017-05-03_19-44-03.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766133/release.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766140/Screenshot_from_2017-05-03_16-37-58.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766144/lts.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766146/Screenshot_from_2017-05-03_16-39-07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766150/documentacao.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766148/Screenshot_from_2017-05-03_19-11-33.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766153/deprecation.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766151/Screenshot_from_2017-05-03_16-39-55.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758593/core-concepts.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758595/ember-core-concepts.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758605/ddau.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758604/DDAU-Graph.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766078/reactive.png)
//app/models/user.js
import Ember from 'ember';
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758613/ember-cli.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758612/ember-cli-page.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766026/addons.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766028/Screenshot_from_2017-05-03_18-53-45.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759598/routes.png)
- Renderiza um template
- Carrega um model e disponibiliza para o template
- Redireciona para uma nova rota
- Manipula ações que envolvem mudanças em um model
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759558/routers.png)
//app/router.js
Router.map(function() {
this.route('posts', { path: '/posts' });
});
//app/router.js
Router.map(function() {
this.route('posts', { path: '/posts' }, function() {
this.route('new');
});
});
Rotas
Rotas Aninhadas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759598/routes.png)
//app/router.js
Router.map(function() {
this.route('posts', { path: '/posts' }, function() {
this.route('new');
this.route('post', { path: '/post/:post_id' });
});
});
//app/routes/post.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('post', params.post_id);
}
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759598/routes.png)
//app/templates/photos.hbs
<h1>Posts</h1>
{{#each model as |post|}}
{{#link-to 'post' post.id}}
{{post.title}}
{{/link-to}}
{{/each}}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759564/templates.png)
- Template engine Handlebars
- Helpers e Built-in Helpers
- Input Helpers
- Actions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
//app/templates/application.hbs
<p>Olá, <strong>{{firstName}} {{lastName}}</strong>!</p>
<p>Seja bem vindo ao Hackers House!</p>
Handlebars
Helpers
//app/helpers/sum.js
import Ember from 'ember';
export function sum(params) {
return params.reduce((a, b) => {
return a + b;
});
};
export default Ember.Helper.helper(sum);
//app/templates/application.hbs
<p>Total: {{sum 1 2 3}}</p>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759564/templates.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
Built-in Helpers
{{#if authenticated}}
<p>Bem vindo, <strong>{{user.firstName}} {{user.lastName}}</strong>!</p>
{{else}}
<p>Por favor, é necessário fazer o login para acessar essa página.</p>
{{/if}}
<ul>
{{#each users as |user|}}
<li>{{user.firstName}}!</li>
{{/each}}
</ul>
{{input type="text" value=firstName disabled=entryNotAllowed size="50"}}
{{input type="checkbox" name="isAdmin" checked=isAdmin}}
{{textarea value=description cols="80" rows="6"}}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759564/templates.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
Actions
//app/components/single-post.hbs
<p><button {{action "select" post}}>✓</button> {{post.title}}</p>
//app/components/single-post.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
select(post) {
console.log(post.get('title'));
}
}
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759564/templates.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759567/components.png)
- Template engine Handlebars
- Helpers e Built-in Helpers
- Input Helpers
- Actions
- Web Components
- Reutilizáveis
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759567/components.png)
//HTML renderizado
<nav class="nav-bar">
<ul>
<li><a href="/" id="ember323" class="active ember-view">Início</a></li>
<li><a href="/posts" id="ember324" class="ember-view">Posts</a></li>
</ul>
</nav>
//app/components/navigation-bar.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['nav-bar'],
tagName: 'nav'
});
//app/templates/components/navigation-bar.hbs
<ul>
<li>{{#link-to "home"}}Início{{/link-to}}</li>
<li>{{#link-to "post"}}Posts{{/link-to}}</li>
</ul>
+
=
//app/templates/application.hbs
{{navigation-bar}}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760229/controllers.png)
Só precisamos gerar um Controller se desejarmos customizar suas propriedades ou providenciar alguma action. Caso contrário, se você não gerar um, o Ember irá provindenciar uma instância de um Controller em run time.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760229/controllers.png)
//app/templates/blog-post.hbs
<h1>{{model.title}}</h1>
<h2>Autor: {{model.author}}</h2>
<div class='intro'>
{{model.intro}}
</div>
<hr>
{{#if isExpanded}}
<button {{action "toggleBody"}}>Ver menos</button>
<div class="body">
{{model.body}}
</div>
{{else}}
<button {{action "toggleBody"}}>Ver mais</button>
{{/if}}
//app/controllers/blog-post.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
toggleBody() {
this.toggleProperty('isExpanded');
}
}
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
- Arquitetura
- Definição
- Relacionamento
- CRUD
- Caching
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760310/diagram.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
//app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
published: DS.attr('boolean', { defaultValue: false }),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
//app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
profile: DS.belongsTo('profile')
});
//app/models/profile.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
user: DS.belongsTo('user')
});
One-to-One
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
//app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
published: DS.attr('boolean', { defaultValue: false }),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
})
comments: DS.hasMany('comment')
});
//app/models/comment.js
import DS from 'ember-data';
export default DS.Model.extend({
text: DS.attr('string'),
post: DS.belongsTo('post')
});
One-to-Many
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
//app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
published: DS.attr('boolean', { defaultValue: false }),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
})
comments: DS.hasMany('comment'),
tags: DS.hasMany('tag')
});
//app/models/tag.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
post: DS.hasMany('post')
});
Many-to-Many
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
let post = store.createRecord('post', {
title: 'Ember.js no Hackers House',
body: 'Lorem ipsum'
});
// => chamada POST em '/posts'
post.save();
// => chamada GET em /posts
let posts = this.get('store').findAll('post');
// => chamada GET em /posts/1
let post = this.get('store').findRecord('post', 1);
Create
Read
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
this.get('store').findRecord('user', 1).then(function(response) {
// após o dado ter sido carregado
response.set('firstName', "Danilo Vaz");
});
// => chamada DELETE em /posts/2
store.findRecord('post', 2, { backgroundReload: false }).then(function(post) {
post.destroyRecord();
});
Update
Delete
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3760303/ember-data.png)
// => Nenhuma requisição web é feita. Busca no Storage.
let posts = this.get('store').peekAll('post');
peekAll
peekRecord
// => Nenhuma requisição web é feita. Busca no Storage.
let post = this.get('store').peekRecord('post', 1);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759571/adapters.png)
- DS.Adapter
- DS.JSONAPIAdapter
- DS.RESTAdapter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759571/adapters.png)
//app/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
session: Ember.inject.service('session'),
host: 'https://api.meusite.com.br',
headers: Ember.computed('session.authToken', function() {
return {
'TOKEN': this.get('session.authToken'),
'OUTRO-HEADER': 'Hackers House 2017'
};
})
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3759573/serializers.png)
{
"data": {
"id": "1",
"type": "product",
"attributes": {
"name": "My Product",
"amount": 100,
"currency": "SEK"
}
}
}
{
"data": {
"id": "1",
"type": "product",
"attributes": {
"name": "My Product",
"cost": {
"amount": 100,
"currency": "SEK"
}
}
}
}
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
serialize(snapshot, options) {
let json = this._super(...arguments);
json.data.attributes.cost = {
amount: json.data.attributes.amount,
currency: json.data.attributes.currency
};
delete json.data.attributes.amount;
delete json.data.attributes.currency;
return json;
},
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766116/muchmore.png)
- Glimmer 2
- Fastboot
- RFCS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758394/emberjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3758393/subtitle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3564901/Logotipo_Interactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/3766168/obrigado.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345253/images/2730015/giphy.gif)
Ember - Por que você ainda não está usando
By Danilo Vaz
Ember - Por que você ainda não está usando
Por que você ainda não está usando Ember?
- 974