O documento discute conceitos de programação reativa, incluindo programação funcional reativa, sistemas reativos e padrões reativos. Apresenta breve histórico da programação reativa desde 1969 e conceitos-chave como eventos, estados e fluxos de eventos. Também discute bibliotecas como Rx e padrões como Redux.

1. Desmistificando a
programação reativa
(e outros conceitos)
Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training

2. Programação reativa
Programação funcional reativa
Sistemas reativos
Padrões reativos
Arquitetura reativa

3. Programação reativa

4. Programação reativa + Rx

5. https://am22.akamaized.net/tms/cnt/uploads/2010/12/tech-blog-bingo1.png

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

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

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

9. era um vez…

10. 1969
Alan Kay
Pai OO

11. The
Reactive
Engine
“the machine
which can
participate in a
dialogue”
http://www.chilton-computing.org.uk/inf/pdfs/kay.htm

12. The
Reactive
Engine

13. 1970-80s
Programação
de fluxo de
dados
Paul Kosinski
https://goo.gl/ciirBb
Jack Dennis
https://goo.gl/qTJvLR

14. 85: Sistemas reativos Sistemas transformativos
“repeatedly prompted by
the outside world and
their role is to
continuously respond to
external inputs”
“accepts inputs, performs
transformations on them and
produces outputs”
On the development of reactive systems
D. Harel and A. Pnueli
The development of a reactive system https://goo.gl/R5dFB9

15. Eventos e condições Estado e transições Eventos de saída
Descrevendo Sistemas Reativos

16. Desenvolvendo Sistemas Reativos
Sistema transformativo Sistema reativo
Especificação
Sistema
final
Ponto
Início
Implementação
(design)
Comportamento
(especificação)

17. 1. Eventos atualizando o estado https://goo.gl/GSkxEW
2. O estado satisfaz as variáveis https://goo.gl/oZvuJM
3. Processamento de streams de eventos https://goo.gl/ft2nBK
1991: Programação reativa

18. • Eventos externos
• Reações
1: Eventos atualizando o estado

19. 1: Eventos atualizando o estado
C.observe(c => F.set(c * 1.8 + 32));
F.observe(f => C.set((f - 32) / 1.8));

20. • Metáfora visual
• Manipulação direta
• Mudanças refletidas no estado
2: Estado satisfaz variáveis

21. 2: Estado satisfaz variáveis
F <-> C * 1.8 + 32

22. 3: Processamento de streams
“Processamento de streams é
natural à programação reativa”
John Plaice

23. 3: Processamento de streams
F = C.map(c => c * 1.8 + 32)
C1 = F1.map(f => (f-32) / 1.8)

24. 1997: Programação funcional reativa
Functional Reactive Animations https://goo.gl/4mjiYu
1. Modelagem temporal: comportamento e sinais
2. Modelagem de eventos
3. Reatividade declarativa
4. View polimórfica

25. PFR: Eventos e comportamentos

26. Declarativo x Imperativo
Componentes reativos
tendem a ser
declarativos
Declaração de como as
coisas são feitas, não de
como devem ser feitas
Relógio10:00
As horas estarão aqui
Relógio10:00
A cada segundo:
pega as horas
atualiza a view
que horas são?
10:00

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

28. reage aos usuários
Responsivo
reage a falhas
Resiliente
reage a carga
Elástico
iteração de módulos e componentes
Orientado a mensagens
Objetivo
Princípios
Método

29. Modelando componentes de código como sistemas reativos
Código
Código
Código
Código
Código
streams de eventos!

30. Já fazemos programação reativa

31. Promises

32. Desacoplando o
código + tempo
Modelar o código como
um sistema reativo é
adicionar a capacidade
de responder à outro
código
Códigos precisam
observar: callbacks,
eventos, delegates, etc
Objeto A Objeto B
começa a observar
notifica
notifica
notifica
pára de a observar

33. Código reage a streams de eventos
Código
Reativo
Benefícios: reduz dependências e facilita código declarativo!
Outro
Reativo
faça X
notifica
X

34. Mas em que lugar posso
aplicar isso no meu
projeto?
View Lógica
REST Client
Dados
Cloud

35. Reactive Extensions
Observer
•Criar Observables e observá-los
•Manipular os dados conforme necessidade
Observable
subscribe()
onNext()Op

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

37. Streams assíncronos
• eventos click
• input de dados
• dados do servidor
• ERROS!

38. PF + R
• Composição e agregação de streams
• Bom para sistemas event-driven e com
concorrência
• Declarativo
• Fácil de testar

39. Extensões reativas (Rx)
http://reactivex.io

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

48. •http://rxmarbles.com
•https://rxviz.com
•https://github.com/Reactive-Extensions/RxJSKoans
•http://reactive.how

49. https://plugins.jetbrains.com/plugin/9696-java-stream-debugger

50. Padrões
eativos

51. Gerenciar o estado e
controle de fluxo

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

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

55. sem Redux
Componente iniciando a mudança

56. Estado
com Redux

57. Estado
Redux Store
Ação
dispatch
subscribe

58. reducer Novo Estado
Estado
Ação
dispatch
+
store

59. Flow de dados unidirecional com Redux
Reducer Store Component
Ações
subscribe
dispatch

60. @Component({
template: `
<div>Counter: {{ counter }}</div>
`
})
export class CounterComponent {
counter: number;
counterSub: Subscription;
ngOnInit() {
this.counterSub = Observable.interval(1000)
.startWith(0)
.subscribe(counter => (this.counter = counter));
}
ngOnDestroy() {
this.counterSub.unsubscribe();
}
}

61. @Component({
template: `Counter: {{ counter$ | async }}`
})
export class CounterComponent {
counter$: Observable<number>;
ngOnInit() {
this.counter$ = Observable.interval(1000).startWith(0);
}
}

62. @Component({
template: `
<div>Counter: {{ counter }}</div>
`
})
export class CounterComponent {
counter: number;
counterSub: Subscription;
ngOnInit() {
this.counterSub = Observable.interval(1000)
.startWith(0)
.subscribe(counter => (this.counter = counter));
}
ngOnDestroy() {
this.counterSub.unsubscribe();
}
}

65. Arquitetura
eativa

66. É só pro front-end?

68. https://docs.spring.io/spring-framework/docs/5.0.0.BUILD-SNAPSHOT/spring-framework-reference/html/web-reactive.html

70. Mono.from(userRequestPublisher)
.then(userRepository::findUserProfile,
userRepository::findUserPaymentMethod)
.log("user.requests")
.or(Mono.delay(5)
.then(n -> Mono.error(new TimeoutException()))
.mergeWith(userRepository::findSimilarUserDetails)
.map(userDetailsTuple -> userDetailsTuple.t1.username)
.publishOn(SchedulerGroup.io())
.subscribe(responseSubscriber);

72. http://www.kennybastani.com/2016/04/event-sourcing-microservices-spring-cloud.html

73. Programação reativa
Programação funcional reativa
Sistemas reativos
Padrões reativos
Arquitetura reativa

76. Obrigada!

77. @loiane
github.com/loiane
loiane.com
loiane.training
youtube.com/loianegroner

78. Pra estudar mais
• http://rxmarbles.com
• https://rxviz.com
• https://github.com/Reactive-Extensions/RxJSKoans
• http://reactive.how
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
• http://blog.danlew.net/2017/07/27/an-introduction-to-functional-reactive-programming/
• https://www.infoq.com/presentations/reactive-programming-evolution
• https://docs.spring.io/spring-framework/docs/5.0.0.BUILD-SNAPSHOT/spring-framework-
reference/html/web-reactive.html
• https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87
• http://www.kennybastani.com/2016/04/event-sourcing-microservices-spring-cloud.html