Palestra apresentada no JS Experience, organizada pelo iMasters no dia 23 de Junho de 2017 em São Paulo.

1. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
ionic reativo
Empodere seu app com RxJS e ngRx

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. Elevar o padrão de
desenvolvimento dos
seus apps com
programação e padrões
reativos

7. Stack de tecnologias
+ ==

8. Tecnologias abordadas

9. 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. Extensões reativas (RxJS)
http://reactivex.io/

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

19. EcmaScript 2018

20. + +

21. Http

22. Http Services

23. Http Services

24. Http Services

25. Http Services

26. Http Services

27. Operadores

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

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

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

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

32. https://yakovfain.files.wordpress.com/2017/04/operators.png

33. Pipe | async

34. Pipe Async

35. Pipe Async

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

37. Formulários Reativos

38. Formulários Reativos

39. Formulários Reativos

41. Padrões
eativos

42. Gerenciar o estado e
controle de fluxo

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

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

46. ACTIONS
REDUCERS STORE VIEW
Redux
dispatch
subscribe

47. https://github.com/ngrx

48. Show me the app!

53. Configuração
@ngrx/store v2.2

54. Configuração
@ngrx/store v2.2

55. Estado da App
@ngrx/store v2.2

56. Estado flui para baixo
store
service / provider
component / page
template

57. Store select

58. Store select

59. Store select

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

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

62. RxJS pode ser usado no lugar do selector

63. RxJS pode ser usado no lugar do selector

64. Component -> Template

65. Component -> Template
Observable<Tasks[]>
async == subscribe + unsubscribe

66. Component -> Template

67. Component -> Template
Dumb Component

68. Componente de apresentação

69. Componente de apresentação
código + simples
+ fácil de testar

70. Eventos fluem para cima
store
service / provider
component / page
template

71. Componente container: dispatch Action

72. Componente container: dispatch Action
Escuta o evento do componente filho

73. Componente container: dispatch Action
Escuta o evento do componente filho

74. Definição das Ações

75. Definição das Ações

76. reducer

77. reducer
imutabilidade
+

78. reducer
imutabilidade
+
funções puras

79. Estado inicial - reducer

80. Store side effects
Efeitos Colaterais
@ngrx/effects

81. Ajax: 2 ações para cada operação

82. Effects

83. Effects
Chamada Service - API

84. Effects
Chamada Service - API
dispatch ação de sucesso para o reducer

85. Provider continua o mesmo

87. @ngrx/router-store

88. Navegação por pilha

89. Encadeamento de Effects

90. Effect para Navegação

91. Effect para Navegação
Ionic 3 tem Lazy Loading
Nome da página por String

92. Plugins Cordova
Ionic Native

93. select Foto

94. select Foto

95. select Foto
Observables nos templates!
Streams

96. Dispatch

97. Dispatch

98. Effects com Ionic Native

99. Effects com Ionic Native

100. @ngrx/platform (v4)

101. @ngrx/platform (v4: beta)

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

103. Redux DevTools

107. https://www.npmjs.com/package/ngrx-store-ionic-storage

108. https://github.com/loiane/ionic3-firebase-ngrx

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

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

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

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