Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Projetos reativos com Angular, RxJS e Redux (ngRx)

1,525 views

Published on

Palestra apresentada no dia 24/Abril/2017 no QCon São Paulo.
Projetos reativos com Angular, RxJS e Redux (ngRx)

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Projetos reativos com Angular, RxJS e Redux (ngRx)

  1. 1. Loiane Groner github.com/loiane loiane.com loiane.training Projetos reativos com Angular, RxJS e Redux (ngRx)
  2. 2. • 10+ XP TI • Java, JavaScript, Sencha, Angular, Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
  3. 3. • Meus livros: • Disponível (inglês) na amazon.com.br
  4. 4. • Também em português!!! https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
  5. 5. Entender como desenvolver funcionalidades reativas com Angular
  6. 6. Entender como desenvolver funcionalidades reativas com Angular #itsJustAngular
  7. 7. • Programação reativa • Promises x Observables • Padrão Observer • Angular reativo I: com forms, http, pipes • Desafios de projetos grandes e complexos • Angular reativo II: redux com @ngrx/store • Operações Imutáveis • Change detection • Arquitetura escalável Agenda
  8. 8. Programação eativa
  9. 9. http://www.reactivemanifesto.org/pt-BR Manifesto Reativo
  10. 10. “que reage, responde a estímulos” Reativo
  11. 11. “que reage, responde a estímulos” Reativo Seus componentes são ativos e estão sempre prontos para receber eventos
  12. 12. Reagir a informações
  13. 13. Reagir a usuários
  14. 14. Reagir a erros
  15. 15. Já fazemos programação reativa
  16. 16. Async
  17. 17. Promises
  18. 18. • atendida - a ação relacionada à promessa teve sucesso • rejeitada - a ação relacionada à promessa falhou • pendente - a ação ainda não foi atendida nem rejeitada • definida - a ação foi atendida ou rejeitada Uma promessa pode ser:
  19. 19. Callback Hell!
  20. 20. Observables
  21. 21. Iterator ES2015 (ES6)
  22. 22. Extensões reativas http://reactivex.io/
  23. 23. Observable
  24. 24. EcmaScript 2018
  25. 25. Objeto Promise Iterable Observable Síncrono Assíncrono ValorúnicoMúltiplosvalores Panorama da teoria da reatividade
  26. 26. Angular Reativo
  27. 27. Forms Routing Http Service Pipe
  28. 28. Projeto Original: https://github.com/Reactive-Extensions/RxJS Reescrita: https://github.com/ReactiveX/rxjs 
 (melhor performance, modularidade, pilha de debug/ depuração => boa compatibilidade com versões anteriores, com poucas breaking changes) RxJS
  29. 29. Http Services
  30. 30. Http Services
  31. 31. Http Services
  32. 32. Http Services
  33. 33. Http Services
  34. 34. Operadores
  35. 35. Transformar => map http://rxmarbles.com/#map
  36. 36. Filtrar informações => filter http://rxmarbles.com/#filter
  37. 37. Desativar => debounce http://rxmarbles.com/#debounce
  38. 38. Redução => reduce http://rxmarbles.com/#reduce
  39. 39. Transformar items em Observables => flatmap http://reactivex.io/documentation/operators/flatmap.html
  40. 40. Roteamento
  41. 41. Roteamento
  42. 42. Pipe Async
  43. 43. Pipe Async
  44. 44. Pipe Async
  45. 45. Pipe Async Observable<boolean> Observable<Course[]> async == subscribe + unsubscribe
  46. 46. Pipe Async
  47. 47. Pipe Async Observable<Course>
  48. 48. Pipe Async Observable<Course> Sintaxe melhorada Angular >= 4.x
  49. 49. Formulários Reativos I
  50. 50. Formulários Reativos II
  51. 51. COMPONENTES DIRETIVAS ROTEAMENTOSERVIÇOS TEMPLATE DATA BINDINGINJEÇÃO DEPENDÊNCIA MÓDULOS Blocos Principais
  52. 52. COMPONENTE {…} TEMPLATE <..>
  53. 53. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades
  54. 54. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades Binding de Eventos
  55. 55. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} Binding de Propriedades Binding de Eventos
  56. 56. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Binding de Propriedades Binding de Eventos
  57. 57. 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
  58. 58. Yay! Projeto novo em Angular!
  59. 59. COMPONENTE {…} SERVIÇO
  60. 60. COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO
  61. 61. uma semana depois…
  62. 62. COMPONENTE {…} SERVIÇO COMPONENTE {…} COMPONENTE {…} COMPONENTE {…} SERVIÇO SERVIÇO SERVIÇO SERVIÇO COMPONENTE {…} SERVIÇO
  63. 63. Gerenciamento de estado…
  64. 64. Dados que vem/enviados do/para servidor, estão pendentes e resultaram em erro… Estado UI, como toggle, alerts e erros User input, filtros, buscas…
  65. 65. E se pudéssemos gerenciar tudo num lugar só…
  66. 66. Redux é uma biblioteca, e também é um padrão
  67. 67. ACTIONS REDUCERS STORE VIEW Store “Banco de dados” da aplicação Manipulação do estado acontece nos reducers que registram o estado na store Pode executar ações pré ou pós reducer (middleware)
  68. 68. ACTIONS REDUCERS STORE VIEW store.dispatch Envia uma ação para a store, que executa o reducer apropriado É chamado de um componente ou serviço dispatch
  69. 69. ACTIONS REDUCERS STORE VIEW Ações dispatch Funções que disparam os eventos para os reducers Possuem um tipo e um payload (carga) Baseado na ação, o reducer obtém o payload retorna um novo estado
  70. 70. ACTIONS REDUCERS STORE VIEW Reducer dispatch Função que recebe o estado atual e uma ação Retorna um estado novo baseado na ação Funções reducers devem ser funções puras
  71. 71. ACTIONS REDUCERS STORE VIEW store.select dispatch Fornece a informação do estado que queremos selecionar/consultar subscribe
  72. 72. store serviço componente Árvore de estado única
  73. 73. store serviço componente Estado flui de cima pra baixo
  74. 74. store serviço componente Eventos fluem de baixo pra cima
  75. 75. https://github.com/InfomediaLtd/angular2-redux Implementação bem parecida com o redux original
  76. 76. https://github.com/ngrx
  77. 77. Hello World!
  78. 78. Não reativo Variável comum <number>
  79. 79. Não reativo
  80. 80. Reativo Observable<number>
  81. 81. Definir ações
  82. 82. No componente:
  83. 83. No componente: (1): Injetar Store import { Store } from '@ngrx/store';
  84. 84. No componente: (1): Injetar Store import { Store } from '@ngrx/store'; (2): Declarar variável do template
  85. 85. No componente:
  86. 86. No componente: (3): Obter valor iniciar do counter$ store.select (pedaço do estado)
  87. 87. No componente:
  88. 88. No componente: (4): No lugar de incrementar, decrementar, disparar eventos store.dispatch
  89. 89. Reducer
  90. 90. Reducer Recebe o estado
  91. 91. Reducer Recebe o estado Recebe a ação + payload
  92. 92. Reducer Recebe o estado Recebe a ação + payload Retorna um novo estado
  93. 93. Integra com a aplicação Angular Fornece a store (AppState) para toda a aplicação AppModule.ts
  94. 94. CRUD com Ajax
  95. 95. Definir ações
  96. 96. Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
  97. 97. Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
  98. 98. No componente
  99. 99. No componente Evento de pedido para carregar a informação do servidor
  100. 100. No componente Evento de pedido para carregar a informação do servidor
  101. 101. Reducer
  102. 102. Reducer NÃO mudar o estado diretamente Estado deve ser imutável
  103. 103. Reducer NÃO mudar o estado diretamente Estado deve ser imutável Reducer DEVE ser uma função PURA Programação Funcional
  104. 104. Dados imutáveis
  105. 105. Dados imutáveis
  106. 106. Dados imutáveis
  107. 107. Função pura x impura
  108. 108. Função pura x impura
  109. 109. Função pura x impura Não modifica o estado e não tem efeitos colaterais
  110. 110. Components: Dumb Components
  111. 111. Components: Dumb Components
  112. 112. 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
  113. 113. Containers: Smart Components
  114. 114. Containers: Smart Components Escutam os eventos dos Componentes filhos e fazem o dispatch
  115. 115. Containers: Smart Components Lidam com o ngRx e a Store Escutam os eventos dos Componentes filhos e fazem o dispatch
  116. 116. Mas e a comunicação com servidor?
  117. 117. Redux apenas se interessa pela estado do cliente (frontend)
  118. 118. Middleware
  119. 119. Store side effects Efeitos Colaterais @ngrx/effects
  120. 120. Effects Escuta a ação de Pedido e faz dispatch da ação de “Completo" - que muda o estado
  121. 121. Effects + Service API o Serviço da API não sabe do estado nem do redux
  122. 122. Effects
  123. 123. Effects RxJS <3 Payload é a resposta do servidor
  124. 124. Executando os Effects
  125. 125. Auth + Múltiplos módulos com Firebase
  126. 126. Lidar com roteamento?
  127. 127. Effects
  128. 128. Projeto com vários módulos?
  129. 129. combine reducers e estados
  130. 130. store.select de um pedaço do estado
  131. 131. store.select de um pedaço do estado reselect
  132. 132. Outras ferramentas
  133. 133. @ngrx/router-store: estado do roteamento na store @store-devtools: integração redux-devtools @store-log-monitor: monitoramento da store ngrx-store-freeze: garante estado imutável no desenvolvimento do projeto
  134. 134. Desafios (ainda não 100% definidos) Lazy loading dos arquivos ngRx: https://github.com/ngrx/store/issues/197 https://www.npmjs.com/package/ngrx-domains (alfa)
  135. 135. Detecção de Mudanças
  136. 136. Muda o estado, muda a aplicação
  137. 137. Quando uma mudanças acontece, o Angular compara cada valor da propriedade do Componente com o valor anterior que está sendo usado no Template Se o valor atual e anterior são diferente, seta o valor do component como isChanged = true; Como funciona?
  138. 138. CMP CMP CMPCMP CMP CMPCMP CMP CMPCMP
  139. 139. CMP CMP CMPCMP CMP CMPCMP CMP CMPCMP
  140. 140. CMP CMP CMPCMP CMP CMPCMP CMP CMPCMP
  141. 141. CMP CMP CMPCMP CMP CMPCMP CMP CMPCMP
  142. 142. Como otimizar?
  143. 143. Demo
  144. 144. 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 ⛔
  145. 145. Arquitetura escalável?
  146. 146. 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
  147. 147. 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/
  148. 148. 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
  149. 149. Quer aprender mais sobre Angular (2.x e 4.x)? /loianegroner
  150. 150. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×