Slides da talk no meetup do Facebook Developer Circles, sobre React e Reatividade. Nessa apresentação iremos entender o que é programação reativa e de onde veio a ideia do reactjs.

1. React e Reatividade
by José Barbosa

2. Acompanhe
nosso
podcast:
http://blog.lambda3.com.br/category/p
odcast

3. @kidchenko
https://twitter.com/kidchenko
Fullstack na Lambda3;
Developerç
Agilista;
Empreendedor digital;
Apaixonado por JS;

6. ANGULAR
COMPONENT
STYLE
JOSÉ BARBOSA
@kidchenko
@lambdatres
Eu uso angular também, mas o assunto de hoje é...

7. As stack do facebook vai dominar a web!?
REACT
REACT
REACT
JOSÉ BARBOSA
@kidchenko
@lambdatres

8. Você já viu um
manifesto?

10. Nós acreditamos que é necessária uma abordagem
coerente para arquitetura de sistemas... ...nós queremos
sistemas Responsivos, Resilientes, Elásticos e Orientados
a Mensagens. Nós chamamos isso de Sistemas Reativos.
Essas transformações estão acontecendo por causa dos
requisitos que mudaram drasticamente nos últimos
anos... ...Hoje há aplicações em produção em todos os
lugares, desde aplicativos móveis até aplicações na
nuvem com clusters rodando milhares processadores
multi-core. Geralmente os usuários esperam respostas
em milisegundos e 100% de disponibilidade.
– The Reactive Manifesto

11. Onde existe uma tela...

12. 1995-2015

13. Os 4 princípios reativos

14. Responsive
• Que responde em tempo hábil;
• Uma aplicação responsiva é o que queremos;
• Responsividade é impossível sem escalabilidade e resiliência;
“A responsive system is quick to react to all users — under blue skies
and grey skies — in order to ensure a consistently positive user
experience.”

15. :c

18. Resilient
• O sistema continua respondendo em caso de falha;
• Qualquer sistema que não é resiliente ficará fora do ar depois de uma
falha;

20. Elastic/Scale
• O sistema continua responsivo mesmo sob variações de demanda;
• Projetos que não tenham pontos de contenção ou gargalos centrais;
• Prove métricas relevantes e em tempo real;

21. Message Driven
• Não bloqueante;
• Programação Assíncronia;
• Message-driven = event-driven, actor-based, ou combinação das
duas;

23. Event Driven

25. Programação Reativa é?
“Reactive programming is
programming with
asynchronous data streams.”

26. Stream?
“A stream is a sequence
of ongoing events ordered in
time”

28. “Anything can be a stream: variables,
user inputs, properties, caches, data
structures, etc.”

33. Observables
• Não é nada novo;

35. Streams are like you
twitter feed

36. Streams vs Collections

37. • Você pode fazer “merge” de duas streams. Você pode fazer “filter”,
“map”
• Streams são o centro da reatividade

39. Trends?

40. Porque react?
• Declarativo;
• V do MV*;
• Componentes!!!
• Virtual DOM

42. Declarative

43. Imperative

44. http://blog.percolatestudio.com/engineering/reactive-user-interfaces/

45. http://blog.thefirehoseproject.com/posts/elixirl-rule-development-2017-2020-beyond/

47. Virtual DOM
• FAST! FAST! FAST!
• Isomorfismo;

55. React Compoent Lifecycle

56. webpack

57. React Native

58. F8 App

64. Referências
• https://medium.com/@garychambers108/understanding-flux-
f93e9f650af7#.a4c52d40n
• http://blog.thefirehoseproject.com/posts/elixirl-rule-development-
2017-2020-beyond/
• http://blog.percolatestudio.com/engineering/reactive-user-
interfaces/

65. Duvidas?
Obrigado!
@kidchenko
https://twitter.com/kidchenko
m.me/kidchenko