Este documento fornece informações sobre Loiane Groner, uma desenvolvedora especializada em Angular, JavaScript e programação reativa. Ela oferece treinamentos sobre esses tópicos e mantém um blog e perfis nas redes sociais para compartilhar conhecimento. O documento também apresenta conceitos-chave da programação reativa e como implementá-la usando Angular e a biblioteca NgRx.

1. Loiane Groner
github.com/loiane
loiane.com
loiane.training
Angular + Redux (ngRx)
Desenvolvendo projetos reativos

2. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
Java, JavaScript/HTML5,
Sencha, Angular, Phonegap/
Ionic

3. Disponível (inglês) na amazon.com.br

4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/

5. Entender como
desenvolver
funcionalidades
reativas com Angular

6. Entender como
desenvolver
funcionalidades
reativas com Angular
#itsJustAngular

7. Programação
eativa

10. http://www.reactivemanifesto.org/pt-BR
Manifesto Reativo

11. “que reage, responde a estímulos”
Reativo

12. Reage a dados que são
transmitidos ao longo
do tempo

13. Reagir a informações

14. Reagir a usuários

15. Reagir a erros

16. Já fazemos programação reativa

17. Extensões reativas (RxJS)
http://reactivex.io/

19. Objeto Promise
Iterable Observable
Síncrono Assíncrono
ValorúnicoMúltiplosvalores
Panorama da teoria da reatividade

20. EcmaScript 2018

21. Operadores

22. Transformar => map
http://rxmarbles.com/#map

23. Filtrar informações => filter
http://rxmarbles.com/#filter

24. Redução => reduce
http://rxmarbles.com/#reduce

25. Desativar => debounce
http://rxmarbles.com/#debounce

26. Angular Reativo

27. Forms
Routing
Http Service
Pipe async

28. Http Services

29. Http Services

30. Http Services

31. Http Services

32. Http Services

33. Roteamento

34. Roteamento

35. Pipe Async

36. Pipe Async

37. Pipe Async

38. Pipe Async
Observable<boolean>
Observable<Course[]>
async == subscribe + unsubscribe

39. Pipe Async

40. Pipe Async
Observable<Course>

41. Pipe Async
Observable<Course>
Sintaxe melhorada Angular >= 4.x

42. Formulários Reativos I

43. Formulários Reativos II

46. COMPONENTE
{…}
TEMPLATE
<..>

47. COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades

48. COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
Binding de
Eventos

49. COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
Binding de
Propriedades
Binding de
Eventos

50. COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B
Binding de
Propriedades
Binding de
Eventos

51. 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

52. Yay! Projeto novo em Angular!

53. COMPONENTE
{…}
SERVIÇO

54. COMPONENTE
{…}
SERVIÇO
COMPONENTE
{…}
SERVIÇO
COMPONENTE
{…}
SERVIÇO
COMPONENTE
{…}
SERVIÇO

55. uma semana depois…

56. COMPONENTE
{…}
SERVIÇO
COMPONENTE
{…}
COMPONENTE
{…}
COMPONENTE
{…}
SERVIÇO
SERVIÇO SERVIÇO SERVIÇO
COMPONENTE
{…}
SERVIÇO

58. 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

59. 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

61. Redux é uma biblioteca, e também
é um padrão

62. ACTIONS
REDUCERS STORE VIEW
Redux
dispatch
subscribe

63. https://github.com/InfomediaLtd/angular2-redux
Implementação bem parecida com o redux original

64. https://github.com/ngrx

65. Hello World!

66. Não reativo
Variável comum <number>

67. Não reativo

68. Reativo
Observable<number>

69. Definir ações

70. No componente:

71. No componente:
(1): Injetar Store
import { Store } from '@ngrx/store';

72. No componente:
(1): Injetar Store
import { Store } from '@ngrx/store';
(2): Declarar variável do template

73. No componente:

74. No componente:
(3): Obter valor iniciar do counter$
store.select (pedaço do estado)

75. No componente:

76. No componente:
(4): No lugar de incrementar,
decrementar, disparar eventos
store.dispatch

77. Reducer

78. Reducer
Recebe o estado

79. Reducer
Recebe o estado
Recebe a ação + payload

80. Reducer
Recebe o estado
Recebe a ação + payload
Retorna um novo estado

81. Integração com a aplicação Angular
Fornece a store (AppState) para toda a aplicação
AppModule.ts

82. CRUD com Ajax

83. Definir ações

84. Definir ações
Para cada chamada Ajax: 3 ações:
Pedido (request)
Request Completo (altera o estado)
Erro

85. Definir ações
Para cada chamada Ajax: 3 ações:
Pedido (request)
Request Completo (altera o estado)
Erro

86. No componente

87. No componente
Evento de pedido para carregar a informação do servidor

88. No componente
Evento de pedido para carregar a informação do servidor

89. Reducer

90. Reducer
NÃO mudar o estado diretamente
Estado deve ser imutável

91. Reducer
NÃO mudar o estado diretamente
Estado deve ser imutável
Reducer DEVE ser uma função PURA
Programação Funcional

92. Dados imutáveis

93. Dados imutáveis

94. Dados imutáveis

95. Função pura x impura

96. Função pura x impura

97. Função pura x impura
Não modifica o estado e não tem efeitos colaterais

98. Components: Dumb Components

99. Components: Dumb Components

100. 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

101. Containers: Smart Components

102. Containers: Smart Components
Escutam os eventos dos
Componentes filhos e fazem o
dispatch

103. Containers: Smart Components
Lidam com o ngRx e a Store
Escutam os eventos dos
Componentes filhos e fazem o
dispatch

104. Mas e a comunicação com servidor?

105. Redux apenas se interessa pela estado do
cliente (frontend)

106. Store side effects
Efeitos Colaterais
@ngrx/effects

107. Effects
Escuta a ação de Pedido e faz dispatch da ação de
“Completo" - que muda o estado

108. Effects + Service API
o Serviço da API não sabe do estado nem do redux

109. Effects

110. Effects
RxJS <3
Payload é a resposta do servidor

111. Executando os Effects

112. Auth + Múltiplos módulos com Firebase

113. Lidar com roteamento?

114. Effects

115. Projeto com vários módulos?

116. combine reducers e estados
@ngrx/store v2.2

117. store.select de um pedaço do estado

118. store.select de um pedaço do estado
reselect

119. @ngrx/platform (v4)

120. combine reducers e estados - AppState

121. @ngrx/platform (v4: beta)

122. @ngrx/platform (v4: beta)
Injeta o estado do módulo no AppState
apenas depois que o módulo for
carregado via lazy loading

123. @ngrx/platform (v4: beta)

124. 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 ⛔

125. Arquitetura escalável?

126. 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

127. 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/

128. 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

129. Quer aprender mais sobre Angular (2.x e 4.x)?
/loianegroner

130. https://www.slideshare.net/loianeg

132. http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training