Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular + Redux (ngRx)

823 Aufrufe

Veröffentlicht am

Palestra apresentada no FullStack Experience no dia 09 de junho de 2017 - São Paulo

Veröffentlicht in: Technologie
  • Login to see the comments

Angular + Redux (ngRx)

  1. 1. Loiane Groner github.com/loiane loiane.com loiane.training Angular + Redux (ngRx) Desenvolvendo projetos reativos
  2. 2. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic
  3. 3. Disponível (inglês) na amazon.com.br
  4. 4. 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 eativa
  8. 8. http://www.reactivemanifesto.org/pt-BR Manifesto Reativo
  9. 9. “que reage, responde a estímulos” Reativo
  10. 10. Reage a dados que são transmitidos ao longo do tempo
  11. 11. Reagir a informações
  12. 12. Reagir a usuários
  13. 13. Reagir a erros
  14. 14. Já fazemos programação reativa
  15. 15. Extensões reativas (RxJS) http://reactivex.io/
  16. 16. Objeto Promise Iterable Observable Síncrono Assíncrono ValorúnicoMúltiplosvalores Panorama da teoria da reatividade
  17. 17. EcmaScript 2018
  18. 18. Operadores
  19. 19. Transformar => map http://rxmarbles.com/#map
  20. 20. Filtrar informações => filter http://rxmarbles.com/#filter
  21. 21. Redução => reduce http://rxmarbles.com/#reduce
  22. 22. Desativar => debounce http://rxmarbles.com/#debounce
  23. 23. Angular Reativo
  24. 24. Forms Routing Http Service Pipe async
  25. 25. Http Services
  26. 26. Http Services
  27. 27. Http Services
  28. 28. Http Services
  29. 29. Http Services
  30. 30. Roteamento
  31. 31. Roteamento
  32. 32. Pipe Async
  33. 33. Pipe Async
  34. 34. Pipe Async
  35. 35. Pipe Async Observable<boolean> Observable<Course[]> async == subscribe + unsubscribe
  36. 36. Pipe Async
  37. 37. Pipe Async Observable<Course>
  38. 38. Pipe Async Observable<Course> Sintaxe melhorada Angular >= 4.x
  39. 39. Formulários Reativos I
  40. 40. Formulários Reativos II
  41. 41. COMPONENTE {…} TEMPLATE <..>
  42. 42. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades
  43. 43. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades Binding de Eventos
  44. 44. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} Binding de Propriedades Binding de Eventos
  45. 45. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Binding de Propriedades Binding de Eventos
  46. 46. 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
  47. 47. Yay! Projeto novo em Angular!
  48. 48. COMPONENTE {…} SERVIÇO
  49. 49. COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO COMPONENTE {…} SERVIÇO
  50. 50. uma semana depois…
  51. 51. COMPONENTE {…} SERVIÇO COMPONENTE {…} COMPONENTE {…} COMPONENTE {…} SERVIÇO SERVIÇO SERVIÇO SERVIÇO COMPONENTE {…} SERVIÇO
  52. 52. 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
  53. 53. 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
  54. 54. Redux é uma biblioteca, e também é um padrão
  55. 55. ACTIONS REDUCERS STORE VIEW Redux dispatch subscribe
  56. 56. https://github.com/InfomediaLtd/angular2-redux Implementação bem parecida com o redux original
  57. 57. https://github.com/ngrx
  58. 58. Hello World!
  59. 59. Não reativo Variável comum <number>
  60. 60. Não reativo
  61. 61. Reativo Observable<number>
  62. 62. Definir ações
  63. 63. No componente:
  64. 64. No componente: (1): Injetar Store import { Store } from '@ngrx/store';
  65. 65. No componente: (1): Injetar Store import { Store } from '@ngrx/store'; (2): Declarar variável do template
  66. 66. No componente:
  67. 67. No componente: (3): Obter valor iniciar do counter$ store.select (pedaço do estado)
  68. 68. No componente:
  69. 69. No componente: (4): No lugar de incrementar, decrementar, disparar eventos store.dispatch
  70. 70. Reducer
  71. 71. Reducer Recebe o estado
  72. 72. Reducer Recebe o estado Recebe a ação + payload
  73. 73. Reducer Recebe o estado Recebe a ação + payload Retorna um novo estado
  74. 74. Integração com a aplicação Angular Fornece a store (AppState) para toda a aplicação AppModule.ts
  75. 75. CRUD com Ajax
  76. 76. Definir ações
  77. 77. Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
  78. 78. Definir ações Para cada chamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
  79. 79. No componente
  80. 80. No componente Evento de pedido para carregar a informação do servidor
  81. 81. No componente Evento de pedido para carregar a informação do servidor
  82. 82. Reducer
  83. 83. Reducer NÃO mudar o estado diretamente Estado deve ser imutável
  84. 84. Reducer NÃO mudar o estado diretamente Estado deve ser imutável Reducer DEVE ser uma função PURA Programação Funcional
  85. 85. Dados imutáveis
  86. 86. Dados imutáveis
  87. 87. Dados imutáveis
  88. 88. Função pura x impura
  89. 89. Função pura x impura
  90. 90. Função pura x impura Não modifica o estado e não tem efeitos colaterais
  91. 91. Components: Dumb Components
  92. 92. Components: Dumb Components
  93. 93. 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
  94. 94. Containers: Smart Components
  95. 95. Containers: Smart Components Escutam os eventos dos Componentes filhos e fazem o dispatch
  96. 96. Containers: Smart Components Lidam com o ngRx e a Store Escutam os eventos dos Componentes filhos e fazem o dispatch
  97. 97. Mas e a comunicação com servidor?
  98. 98. Redux apenas se interessa pela estado do cliente (frontend)
  99. 99. Store side effects Efeitos Colaterais @ngrx/effects
  100. 100. Effects Escuta a ação de Pedido e faz dispatch da ação de “Completo" - que muda o estado
  101. 101. Effects + Service API o Serviço da API não sabe do estado nem do redux
  102. 102. Effects
  103. 103. Effects RxJS <3 Payload é a resposta do servidor
  104. 104. Executando os Effects
  105. 105. Auth + Múltiplos módulos com Firebase
  106. 106. Lidar com roteamento?
  107. 107. Effects
  108. 108. Projeto com vários módulos?
  109. 109. combine reducers e estados @ngrx/store v2.2
  110. 110. store.select de um pedaço do estado
  111. 111. store.select de um pedaço do estado reselect
  112. 112. @ngrx/platform (v4)
  113. 113. combine reducers e estados - AppState
  114. 114. @ngrx/platform (v4: beta)
  115. 115. @ngrx/platform (v4: beta) Injeta o estado do módulo no AppState apenas depois que o módulo for carregado via lazy loading
  116. 116. @ngrx/platform (v4: beta)
  117. 117. 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 ⛔
  118. 118. Arquitetura escalável?
  119. 119. 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
  120. 120. 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/
  121. 121. 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
  122. 122. Quer aprender mais sobre Angular (2.x e 4.x)? /loianegroner
  123. 123. https://www.slideshare.net/loianeg
  124. 124. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×