React e reactividade Meetup Facebook Developer Circles

React e Reatividade

by José Barbosa

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

@kidchenko

https://twitter.com/kidchenko

Fullstack na Lambda3;DeveloperçAgilista;Empreendedor digital;Apaixonado por JS;

ANGULAR COMPONENTSTYLE

JOSÉ BARBOSA@kidchenko@lambdatres

Eu uso angular também, mas o assunto de hoje é...

As stack do facebook vai dominar a web!?

REACTREACTREACT

JOSÉ BARBOSA@kidchenko@lambdatres

Você já viu um manifesto?

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

Onde existe uma tela...

1995-2015

Os 4 princípios reativos

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

:c

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

falha;

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;

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

duas;

Event Driven

Programação Reativa é?

“Reactive programming is programming with asynchronous data streams.”

Stream?

“A stream is a sequence of ongoing events ordered in time”

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

Observables

• Não é nada novo;

Streams are like you twitter feed

Streams vs Collections

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

Trends?

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

Declarative

Imperative

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

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

Virtual DOM• FAST! FAST! FAST!• Isomorfismo;

React Compoent Lifecycle

webpack

React Native

F8 App

Referências • https://medium.com/@garychambers108/understanding-flux-f93e9f6

50af7#.a4c52d40n• http://blog.thefirehoseproject.com/posts/elixirl-rule-development-20

17-2020-beyond/• http://blog.percolatestudio.com/engineering/reactive-user-interfaces

/

Duvidas?

Obrigado!@kidchenko

https://twitter.com/kidchenkom.me/kidchenko