React e Reatividade
by José Barbosa
Acompanhe
nosso
podcast:
http://blog.lambda3.com.br/category/p
odcast
@kidchenko
https://twitter.com/kidchenko
Fullstack na Lambda3;
Developerç
Agilista;
Empreendedor digital;
Apaixonado por JS;
ANGULAR
COMPONENT
STYLE
JOSÉ BARBOSA
@kidchenko
@lambdatres
Eu uso angular também, mas o assunto de hoje é...
As stack do facebook vai dominar a web!?
REACT
REACT
REACT
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-
f93e9f650af7#.a4c52d40n
• http://blog.thefirehoseproject.com/posts/elixirl-rule-development-
2017-2020-beyond/
• http://blog.percolatestudio.com/engineering/reactive-user-
interfaces/
Duvidas?
Obrigado!
@kidchenko
https://twitter.com/kidchenko
m.me/kidchenko

React e reactividade Meetup Facebook Developer Circles

Notas do Editor

  • #10 Organizações que trabalham em diferentes ramos, estão independentemente descobrindo padrões aleatórios para criarem sistemas semelhantes. Esses sistemas são mais robustos, mais resistentes, mais flexíveis e melhor posicionados para sustentar as demandas modernas. Essas transformações estão acontecendo por causa dos requisitos que mudaram drasticamente nos últimos anos Roland Kuhn e Jonas Bonér => akka project
  • #12 A netflix tem por objetivo disponibilizar seu serviço para o maior número de clientes de devices possível, para isso usa uma API centralizada e todos os devices/clients consomem essa API. Grande parte do desenvolvimento mobile funciona com um client consumindo uma API.
  • #15 Quickness and a positive user experience under various conditions, such as failure of an external system or a spike of traffic, depends on the two traits of a Reactive application: resilience and scalability. A message-driven architectureprovides the overall foundation for a responsive system.
  • #17 Dirty Checking do angular faz os apps parecerem o transito de sp
  • #23 Take another example of synchrony, the single-threaded event loop. This is typical of event-based frameworks such as Node.js — events are emitted, queued, and processed by an event handler in a synchronous loop, and the recipients of those events are anonymous function callbacks. Bottlenecks occur when blocking occurs on the same thread as the event loop, such as one of the callbacks initiating a trip to the database.
  • #28 A stream is a sequence of ongoing events ordered in time. It can emit three different things: a value (of some type), an error, or a “completed” signal. 
  • #47 Componentes são uma estrutura modular Representa uma unidade