O documento resume as principais razões para escolher o framework Ember.js em 2016, destacando suas características como convenção sobre configuração, separação de interesses entre componentes e o sistema de objetos inspirado em Ruby. Também descreve recursos como o Ember CLI para criação de projetos, o Ember Data para manipulação de modelos e o FastBoot para renderização do lado do servidor.

1. POR QUE ESCOLHER O
EMBER.JS COMO
FRAMEWORK EM 2016?

2. @eduardojmatos eduardomatos.me
OI, EU SOU O EDU

3. a maior plataforma de contratação
de serviços do Brasil

4. ANTES, PINGOS NOS I'S

5. FRAMEWORK
• Uma abstração de códigos comuns entre vários
projetos;
• Conjunto de conceitos usado para resolver um
problema de um domínio específico;
• Conjunto de classes que auxilia no
desenvolvimento de software.

7. SPA
• Single Page Application: uma página que carrega
conteúdo, toda a interface e faz toda comunicação
com o servidor via JavaScript;
• Controla todas as rotas de URL’s via History API;
• Implementa requisições Ajax;
• Controla o conteúdo via template engines.

9. OK, E POR QUE EMBER?

10. MASCOTE MAIS MANEIRO!

11. eduardoj.matos@gmail.com
@eduardojmatos
http://eduardomatos.me
OBRIGADO ;)

12. BRINKS =D

13. RAILS LIKE
• Router
• Addons == Gems
• Ember Data == ActiveRecord
• Convention over Configuration

14. CONVENTION OVER
CONFIGURATION
• pequenas decisões feitas pelo framework;
• best practices;
• benefício de conhecimento de outras pessoas;
• ainda permite liberdade, apesar de algumas
coisas serem built-in (router - controller -
template, por exemplo).

15. SEPARAÇÃO DE INTERESSES
• Cada parte do Ember tem um trabalho bem
definido;
• A separação por pastas, por exemplo, ajuda
nisso;
• Routes, Controllers e components - tudo
separado e com sua responsabilidade.

16. OBJECT SYSTEM
• É fato que poucos entendem o Prototype;
• O Ember tem um sistema de objetos, inspirado
no Ruby;
• Classes, heranças, mixins. Tudo no
Ember.Object.

17. EMBER-CLI
npm install -g ember-cli
ember new tdc-app

19. A MAGIA
ACONTECE
*depois de 2 horas de npm install

20. NADA DE CONFIGURAÇÃO
EXTREMA
• Já adiciona o package.json e o bower.json;
• Cria os diretórios e arquivos base;
• Usa um build system (o broccoli);
• JSHint, Livereload, Module System (ES6 modules),
ES6 transpilation (babel);
• Adiciona framework de teste (QUnit);
• Sistema de addon;

22. GENERATORS
ember generate component icon-tag

23. GENERATORS
ember generate controller profile

25. CUTTING EDGE
• ES6
• Promises
• Modules
• Várias features graças ao Babel
• Web components (logo mais com Glimmer
Components)

26. ADDONS
• Compartilhamento de código built-in
• Comunidade on fire!
• 2612 fucking addons

30. ESTABILIDADE SEM FICAR PARADO
• Usa semantic versioning;
• Tem versão LTS (long term support);
• Último release recente: 27/06 (agora pouco);
• Usam RFC (Release for Candidate).

32. GLIMMER
• Nova engine de renderização;
• Usando o conceito de Virtual DOM;
• Performance de render como o React.

34. EMBER-DATA
• Addon pra manipular models;
• É agnóstico, ou seja, não se importa se com o
mecanismo de persistência (seja JSON API via
HTTP ou WebSockets, ou IndexedDB storage);
• Usa Promises pra carregar/salvar dados;
• Provê algumas facilidades que ORM como
ActiveRecord proporciona, mas com JS.

35. export default DS.Model.extend({
email: DS.attr('string'),
password: DS.attr('string'),
fullName: DS.attr('string'),
birthDate: DS.attr('date'),
lead: DS.belongsTo('lead'),
});

36. EMBER-INSPECTOR

38. FASTBOOT
• Roda sua aplicação Ember no server, com Node.js!

39. QUEM TÁ USANDO?

40. PROBLEMINHAS
• Componentes dentro de componentes versus
data-down;
• Tamanho da aplicação (500kb + ou -);

41. MAS, SERVE PRA EU?
• Curva não tão grande de aprendizado;
• Alinhamento/refactor do back-end pra usar
JSONAPI do ember-data;
• Se a complexidade do app é tamanha, sim. Se
não, melhor usar o Backbone de boas =D

42. VOCÊ PRECISA MESMO DE
UMA SPA?

43. SIM?
EMBER RULES

44. DOIS RECADINHOS =D
• Para as meninas: FrontinVale está com call4paperz
aberto (50% dos palestrantes serão mulheres)!
• Fórum FrontendBR: https://frontendbr.github.io

45. eduardoj.matos@gmail.com
@eduardojmatos
http://eduardomatos.me
OBRIGADO ;)
GetNinjas contrata front-end: https://getninjas.workable.com/