Ember 2.0

Mapa mental explicando alguns conceitos do Ember JS

Get Started. It's Free
or sign up with your email address
Ember 2.0 by Mind Map: Ember 2.0

1. Ember Data

1.1. Adapters

1.1.1. classe usada para definir o destino do request para cada método do store que precisa usar alguma API

1.1.2. Pode ser usado um adapter pra aplicação inteira ou um para cada model

1.1.3. exemplos

1.1.3.1. DS.Adapter

1.1.3.1.1. API de qualquer tipo, rest, graphql, define tokens, etc

1.1.3.2. DS.JSONAPIAdapter

1.1.3.2.1. é o adapter default do ember

1.1.3.3. DS.RESTAdapter

1.1.3.3.1. rest adapter, a aplicação espera uma api em rest

1.1.4. métodos / atributos

1.1.4.1. pathForType(type)

1.1.4.2. headers: {}

1.1.4.3. namespace

1.1.4.4. host

1.1.4.5. handleResponse

1.2. Serializers

1.2.1. classe usada para serializar os objetos tanto no request tanto no response

1.3. o fluxo do Adapter e serializer acontecem antes de chegar no model

1.4. Model

1.4.1. Representa uma entidade persistível

1.4.2. relacionamento entre models

1.5. Store

1.5.1. createRecord

1.5.2. findAll / findRecord / etc

1.5.3. update

1.5.4. destroy

1.5.5. peekAll / peekRecord

1.5.5.1. Usado para pegar dados do webstorage (cache)

1.6. Transforms

1.6.1. Usado para criar um novo tipo de atributo, um atributo transformador

1.6.2. Para ser usado nos Models

1.6.3. Serve para modificar o tipo de dado tanto antes de enviar numa requisição, quanto ao chegar uma resposta

1.6.4. Possui 2 métodos

1.6.4.1. serialize(deserialized)

1.6.4.2. deserialize(serialized)

2. Ember CLI

2.1. Generators e comandos que facilitam a programação (semelhante ao scaffold do rails)

2.2. Usado para executar testes, assets-pipeline, deploy

2.3. Broccoli.js

2.3.1. Assets Pipeline padrão do Ember

2.3.2. Utiliza o conceito de árvores para trabalhar

2.3.2.1. Quando arquivos são modificados, o broccoli só faz um build da Árvore que o arquivo estava, não precisa fazer o build de todo projeto

2.3.3. broccoli plugins

2.3.3.1. Copiar arquivos para um diretório destino

2.3.3.2. Pre-processar arquivos dentro de uma árvore e converter para outro formato (e.g. .scss para .css)

2.3.3.3. Fazer merge entre árvores (tipo fazer um rsync de um diretório pra outro)

2.3.3.4. Concatenar arquivos de um certo tipo em um só (bundling)

2.3.3.5. Uglifying

2.3.4. Eat your greens! A beginners guide to Broccoli.js

3. Tests

3.1. qUnit

3.1.1. async

3.1.2. deepEqual

3.1.3. expect

3.1.4. notDeepEqual

3.1.5. notEqual

3.1.6. ok

3.1.7. notOk

3.1.8. throws

3.2. aceitação

3.3. unidade

3.4. integração

3.5. Mirage

4. Conceitos e etc

4.1. Reatividade

4.1.1. Observers

4.1.1.1. O que é

4.1.1.1.1. é uma função que é chamada sempre que a variável no qual ele está escutando é alterada

4.1.1.1.2. Não pode ser usada em um template, afinal, é apenas uma função

4.1.1.2. Exemplo

4.1.1.2.1. ... logName: Ember.observer('name',function() { console.log( this.get('name') ); }); ...

4.1.2. Computed Properties

4.1.2.1. O que é?

4.1.2.1.1. pode escutar uma ou mais variáveis

4.1.2.1.2. como o nome já diz, é uma propriedade computada, ou seja, uma propriedade que é gerada por uma função

4.1.2.1.3. Pode ser usada em template pois é uma variável

4.1.3. Ao fazer um Computed ou Observer é possível pegar um atributo de uma lista

4.1.3.1. Ember.computed('[email protected]', function() { ... });

4.2. Initializers

4.2.1. Application Initializers

4.2.1.1. São executados no boot da Aplicação

4.2.1.2. Injeção de dependência

4.2.1.2.1. application.register(injectionName, classFactory, options)

4.2.1.2.2. application.inject(factoryNameOrType, property, injectionName)

4.2.1.3. deferReadiness()

4.2.1.3.1. Função a ser usada quando deseja num initializer um momento síncrono, esperando o retorno de um ajax por exemplo

4.2.1.4. advanceReadiness()

4.2.1.4.1. É utilizado para voltar o carregamento da aplicação

4.2.1.4.2. usado depois do deferReadiness(), depois do retorno de um ajax por exemplo

4.2.2. Instance Initializers

4.2.2.1. São executadas à medida que uma instância do aplicativo é carregada. Eles fornecem uma maneira de configurar o estado inicial do seu aplicativo, bem como configurar injeções de dependência locais para a instância do aplicativo

4.3. Ember.Application e Ember.ApplicationInstance

4.4. Run Loop

4.4.1. Filas com prioridade

4.4.1.1. sync

4.4.1.2. actions

4.4.1.3. routerTransitions

4.4.1.4. destroy

4.4.1.5. render

4.4.1.6. afterRender

4.5. Server-side Rendering

4.6. Aplicações Compostas

4.7. PWA

4.8. Single File Components

5. Mixins

6. Arrays

6.1. Algumas funcionalidades úteis adicionadas nos Arrays do Ember, que é denominado: Enumerable

6.1.1. Preste atenção nos métodos de array

6.1.1.1. Quando for quiser que este array seja observável (e.g. que o each dele adicione o elemento quando você adicionar no array)

6.1.1.1.1. pushObject()

6.1.1.1.2. popObject()

6.1.1.1.3. reverseObjects()

6.1.1.1.4. shiftObject()

6.1.1.1.5. unshiftObject()

6.1.1.2. Se você usar os métodos padrão do array, eles não serão observáveis, isso quer dizer que eles vão adicionar no Array, mas não vão recarregar o each em que estão

6.1.2. Facilidades

6.1.2.1. Pegar o primeiro ou último do array

6.1.2.1.1. this.get('array.firstObject') ou array.get('firstObject')

6.1.2.1.2. this.get('array.lastObject') ou array.get('lastObject')

6.1.2.2. mapBy() filterBy() ...

6.1.2.3. every( (element, index, self) => ... )

6.1.2.3.1. retorna boolean

6.1.2.3.2. verifica se todos da lista retornam true em determinado atributo

6.1.2.3.3. exemplo

6.1.2.3.4. possui o método facilitador: isEvery( <atributo>, <true|false> )

6.1.2.4. any()

6.1.2.4.1. retorna boolean

6.1.2.4.2. verifica se pelo menos um da lista retorna true

6.1.2.4.3. possui o método facilitador: isAny( <atributo>, <true|false> )

7. Addons

7.1. addon

7.2. blueprints

8. Routes

8.1. Router

8.1.1. Classe onde são mapeadas as rotas

8.1.2. this.route('nomeDaRoute')

8.1.2.1. nested routes

8.1.2.2. Delimitador para rota variável (:nome_do_parametro)

8.1.2.2.1. ex: id

8.1.2.3. { path: "/caminhoDiferenteDoNome" }

8.2. Hooks

8.2.1. beforeModel(transition)

8.2.1.1. aqui ficam as lógicas antes da rota carregar qualquer dado

8.2.1.2. verificar se o usuario não esta logado, por exemplo

8.2.2. model(params)

8.2.2.1. busca o/os dados principais da rota

8.2.2.2. Usando o helper {{LINK-TO}}

8.2.2.2.1. Quando você usa passando só o ID como parâmetro, vai trigar o método model() da rota

8.2.2.2.2. Quando você usa passando só o objeto inteiro, ele não triga a rota

8.2.3. afterModel(model, transition)

8.2.3.1. aqui fica a lógica depois do model ja ser carregado

8.2.4. redirect(model, transition)

8.2.4.1. redireciona para uma nova rota caso necessário

8.2.5. SetupController(controller, model)

8.2.5.1. por padrão, seta o model no controller

8.2.6. renderTemplate(controller, model)

8.2.6.1. se você quiser renderizar outro template em vez do padrão

8.2.6.2. e.g. templateName: 'posts/favorite-posts'

8.2.7. Activate()

8.2.7.1. chamado quando a rota está totalmente ativa

8.2.7.2. usado para setar CSS ou alguma coisa do genero (?)

8.2.8. deactivate()

8.2.8.1. função executada quando sai da rota

8.2.9. resetController(controller, isExiting, transition)

8.2.9.1. chamado depois do deactivate

8.3. actions

8.3.1. error

8.3.1.1. quando acontece algum erro na rota, como um erro num ajax, essa action é chamada

8.3.2. loading

8.3.2.1. qualquer momento em que a rota esta carregando, essa action é ativa

8.3.3. willTransition

8.3.3.1. ativado na hora que vai mudar de rota

8.3.3.2. pode ser usado pra avisar o usuário que vai perder os dados por exemplo

8.3.4. didTransition

8.4. fluxo

9. Controllers

9.1. Deprecated (?)

9.1.1. Usar o mínimo possível

9.1.2. Ainda é mantido por causa dos QueryParams

9.1.3. Usado também para actions de Template, caso não tenha componentes

9.2. Descreve como a UI se comporta

9.3. Uma controller é o arquivo javascript por trás do template, ou seja, todas as variáveis que estão disponíveis em um controller, estão disponíveis no Template da mesma

9.4. Mesmo se você não criar um controller o Ember cria um controller vazio para a rota

9.5. O método init() dele é executando antes do beforeModel() da rota

9.6. Singletons

9.6.1. Isso significa, que se você atribuir um valor a algum atributo do controller/template e sair do controller e depois voltar, ele ainda estará lá, caso nada o altere/apague

10. Components

10.1. São totalmente independente do contexto, não conhecem outras coisas, apenas suas variaveis e as variaveis passadas como argumento

10.2. Baseado em web components

10.3. Responsáveis por uma parte da UI

10.4. Possui seu template

10.5. Atributos

10.5.1. hasBlock

10.5.2. tagName

10.5.2.1. Define o nome da tag principal do componente

10.5.2.2. por padrão é uma div

10.5.3. Positional Params

10.5.3.1. Parametros que ao utilizar no Template, não é necessário passar o nome do atributo (e.g. link-to component)

10.5.4. classNameBindings

10.5.4.1. Este atributo serve para adicionar classes ao elemento principal de seu componente

10.5.4.2. Aqui também é possível usar uma computed property para setar uma classe

10.5.4.2.1. por exemplo:

10.6. hooks

10.6.1. init

10.6.2. didReceiveAttrs

10.6.3. willRender

10.6.4. didInsertElement

10.6.5. didRender

10.6.6. willUpdate

10.6.7. willDestroyElement

10.6.8. willClearRender

10.6.9. didUpdateAttrs

10.6.10. didDestroyElement

10.7. data down, actions up

10.7.1. Os dados vão da rota para baixo

10.7.1.1. Rota -> Controller -> Componente

10.7.2. As ações sobem do Template para Rota

10.7.2.1. Componentes -> Controller -> Rotas

10.7.3. Actions

10.7.3.1. this.sendAction

10.8. Multiplos yields

10.8.1. Caso você queira mais de um Yield no componente

10.8.1.1. Artigo com exemplo: Creating Nested Reusable Page Layouts In Ember

11. Services

11.1. Singletons

11.2. used to store long-lived state

11.3. Injetável via: Ember.inject.service()

12. Templates

12.1. handlebars

12.2. Descreve a UI

12.3. {{outlet}}

12.3.1. Responsável por renderizar os conteúdos das rotas aninhadas a ela

12.4. As variáveis que são globais em um Template são as variáveis do controller dela

13. Ember.Object

13.1. Todas as classes extendem de Ember.Object

13.2. Adiciona funcionalidades extras no Object padrão do javascript

13.3. métodos

13.3.1. .create()

13.3.2. .extend()

13.3.3. .get()

13.3.4. .set()

14. Route.extend