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