Por que escolher o Ember.js como framework em 2016?

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@eduardojmatos eduardomatos.me OI, EU SOU O EDU

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ANTES, PINGOS NOS I'S

Slide 5

Slide 5 text

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íﬁco; • Conjunto de classes que auxilia no desenvolvimento de software.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

OK, E POR QUE EMBER?

Slide 10

Slide 10 text

MASCOTE MAIS MANEIRO!

Slide 11

Slide 11 text

[email protected] @eduardojmatos http://eduardomatos.me OBRIGADO ;)

Slide 12

Slide 12 text

BRINKS =D

Slide 13

Slide 13 text

RAILS LIKE • Router • Addons == Gems • Ember Data == ActiveRecord • Convention over Conﬁguration

Slide 14

Slide 14 text

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).

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

A MAGIA ACONTECE *depois de 2 horas de npm install

Slide 20

Slide 20 text

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;

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

GENERATORS ember generate component icon-tag

Slide 23

Slide 23 text

GENERATORS ember generate controller profile

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ADDONS • Compartilhamento de código built-in • Comunidade on ﬁre! • 2612 fucking addons

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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).

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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'), });

Slide 36

Slide 36 text

EMBER-INSPECTOR

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

QUEM TÁ USANDO?

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

VOCÊ PRECISA MESMO DE UMA SPA?

Slide 43

Slide 43 text

SIM?   EMBER RULES

Slide 44

Slide 44 text

RECADINHOS =D • Para as meninas: FrontinVale está com call4paperz aberto (50% dos palestrantes serão mulheres)! • Fórum FrontendBR: https://frontendbr.github.io • Ember.SP! => http://www.meetup.com/spember

Slide 45

Slide 45 text

[email protected] @eduardojmatos http://eduardomatos.me OBRIGADO ;) GetNinjas contrata front-end: https://getninjas.workable.com/