Loiane Groner github.com/loiane loiane.com loiane.training Angular + Redux (ngRx) Desenvolvendo projetos reativos
Loiane Groner @loiane github.com/loiane loiane.com loiane.training Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic
Disponível (inglês) na amazon.com.br
https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
Entender como desenvolver funcionalidades reativas com Angular
Entender como desenvolver funcionalidades reativas com Angular #itsJustAngular
Programação eativa
http://www.reactivemanifesto.org/pt-BR Manifesto Reativo
“que reage, responde a estímulos” Reativo
Reage a dados que são transmitidos ao longo do tempo
Reagir a informações
Reagir a usuários
Reagir a erros
Já fazemos programação reativa
Extensões reativas (RxJS) http://reactivex.io/
Objeto Promise Iterable Observable Síncrono Assíncrono ValorúnicoMúltiplosvalores Panorama da teoria da reatividade
EcmaScript 2018
Operadores
Transformar => map http://rxmarbles.com/#map
Filtrar informações => filter http://rxmarbles.com/#filter
Redução => reduce http://rxmarbles.com/#reduce
Desativar => debounce http://rxmarbles.com/#debounce
Angular Reativo
Forms Routing Http Service Pipe async
Http Services
Http Services
Http Services
Http Services
Http Services
Roteamento
Roteamento
Pipe Async
Pipe Async
Pipe Async
Pipe Async Observable<boolean> Observable<Course[]> async == subscribe + unsubscribe
Pipe Async
Pipe Async Observable<Course>
Pipe Async Observable<Course> Sintaxe melhorada Angular >= 4.x
Formulários Reativos I
Formulários Reativos II
COMPONENTE {…} TEMPLATE <..>
COMPONENTE {…} TEMPLATE <..> Binding de Propriedades
COMPONENTE {…} TEMPLATE <..> Binding de Propriedades Binding de Eventos
COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} Binding de Propriedades Binding de Eventos
COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Binding de Propriedades Binding de Eventos
COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B MÓDULO X MÓDULO A MÓDULO B Binding de Propriedades Binding de Eventos
Yay! Projeto novo em Angular!
COMPONENTE {…} SERVIÇO
COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO
uma semana depois…
COMPONENTE {…} SERVIÇO COMPONENTE {…} COMPONENTE {…} COMPONENTE {…} SERVIÇO SERVIÇO SERVIÇO SERVIÇO COMPONENTE {…} SERVIÇO
O maior problema no desenvolvimento e manutenção de sistemas de software de grande escala é a complexidade - sistemas grandes são difícil de entender Ben Moseley & Peter Marks Out of the Tar Pit: Analysis of Software Complexity
Acreditamos que o principal contribuinte para esta complexidade em muitos sistemas é o gerenciamento do estado e o fardo que isso acrescenta ao tentar analisar e entender o sistema. Outros contribuintes estreitamente relacionados são o volume do código e a preocupação com o controle de fluxo do sistema. Ben Moseley & Peter Marks Out of the Tar Pit: Analysis of Software Complexity
Redux é uma biblioteca, e também é um padrão
ACTIONS REDUCERS STORE VIEW Redux dispatch subscribe
https://github.com/InfomediaLtd/angular2-redux Implementação bem parecida com o redux original
https://github.com/ngrx
Hello World!
Não reativo Variável comum <number>
Não reativo
Reativo Observable<number>
Definir ações
No componente:
No componente: (1): Injetar Store import { Store } from '@ngrx/store';
No componente: (1): Injetar Store import { Store } from '@ngrx/store'; (2): Declarar variável do template
No componente:
No componente: (3): Obter valor iniciar do counter$ store.select (pedaço do estado)
No componente:
No componente: (4): No lugar de incrementar, decrementar, disparar eventos store.dispatch
Reducer
Reducer Recebe o estado
Reducer Recebe o estado Recebe a ação + payload
Reducer Recebe o estado Recebe a ação + payload Retorna um novo estado
Integração com a aplicação Angular Fornece a store (AppState) para toda a aplicação AppModule.ts
CRUD com Ajax
Definir ações
Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
No componente
No componente Evento de pedido para carregar a informação do servidor
No componente Evento de pedido para carregar a informação do servidor
Reducer
Reducer NÃO mudar o estado diretamente Estado deve ser imutável
Reducer NÃO mudar o estado diretamente Estado deve ser imutável Reducer DEVE ser uma função PURA Programação Funcional
Dados imutáveis
Dados imutáveis
Dados imutáveis
Função pura x impura
Função pura x impura
Função pura x impura Não modifica o estado e não tem efeitos colaterais
Components: Dumb Components
Components: Dumb Components
Components: Dumb Components - Apenas recebem informações via Input properties e disparam eventos com Output properties - NÃO sabem nem se comunicam com Store ou Estado da aplicação
Containers: Smart Components
Containers: Smart Components Escutam os eventos dos Componentes filhos e fazem o dispatch
Containers: Smart Components Lidam com o ngRx e a Store Escutam os eventos dos Componentes filhos e fazem o dispatch
Mas e a comunicação com servidor?
Redux apenas se interessa pela estado do cliente (frontend)
Store side effects Efeitos Colaterais @ngrx/effects
Effects Escuta a ação de Pedido e faz dispatch da ação de “Completo" - que muda o estado
Effects + Service API o Serviço da API não sabe do estado nem do redux
Effects
Effects RxJS <3 Payload é a resposta do servidor
Executando os Effects
Auth + Múltiplos módulos com Firebase
Lidar com roteamento?
Effects
Projeto com vários módulos?
combine reducers e estados @ngrx/store v2.2
store.select de um pedaço do estado
store.select de um pedaço do estado reselect
@ngrx/platform (v4)
combine reducers e estados - AppState
@ngrx/platform (v4: beta)
@ngrx/platform (v4: beta) Injeta o estado do módulo no AppState apenas depois que o módulo for carregado via lazy loading
@ngrx/platform (v4: beta)
Prós e Contras: 1.Fluxo unidirecional ✅ 2.Debug volta ao tempo (DevTools) ✅ 3.Separação do código ✅ 4.Fácil debug e bug fix (1, 2, e 3) ✅ 5.Mais fácil pra testar devido à funções puras ✅ 6.Melhor performance (onPush) ✅ 7.Serialização do estado ✅ 8.Mais uma camada == mais código ⛔
Arquitetura escalável?
Gerenciamento de estado previsível Fácil de testar (estado imutável + DI) Desacoplado de formatos de mensagem e servidor Serviços não sabem do estado da aplicação Sistema modular + lazy loading
Pra estudar mais… • https://angular.io/docs/ts/latest/guide/reactive-forms.html • https://angular.io/docs/ts/latest/guide/server-communication.html • https://angular.io/docs/ts/latest/guide/router.html • https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md • https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35 • http://rxmarbles.com/ • http://reactivex.io/documentation/operators • https://github.com/ngrx • https://github.com/ngrx/example-app • https://auth0.com/blog/understanding-angular-2-change-detection/ • http://blog.brecht.io/A-scalable-angular2-architecture/ • http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2- application-architecture/
Código dos exemplos https://github.com/loiane/angular-redux-ngrx-examples • angular-ngrx-counter • angular-ngrx-todo (com backend em node.js) • angular-ngrx-auth-firebase (auth e roteamento) • angular-ngrx-lms-firebase (auth, roteamento, múltiplos reducers, lazy loading) https://github.com/loiane/angular-change-detection-example
Quer aprender mais sobre Angular (2.x e 4.x)? /loianegroner
https://www.slideshare.net/loianeg
http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

Angular + Redux (ngRx)