Upload
tdc-globalcode
View
54
Download
1
Embed Size (px)
Citation preview
Modern Web Reatividade e
ReactJosé Barbosa | @kidchenko
@kidchenko
Fullstack na Lambda3;Agilista;Empreendedor digital;
Agenda• Reatividade;• Streams;• React;
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
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.”
Streams e Collections“Streams are a series of elements emitted over time. The series potentially has no beginning and no end. Contrast that to arrays, which are a series of elements arranged in memory. Arrays have a beginning and an end”
Observables
• Não é nada novo;
Streams are like you twitter feed
Sistemas que usam Streams• Sistemas que normalmente usam abstrações
streams, ETL (extract, transform, load) ;• Sistemas CEP (complex event processing);• Sistemas de Reports/Analytics;• Movimento NoETL, similar ao NoSQL~Como a data
flui pelo Sistema; reports em real time, intenso uso de dados ~;
Streams vs Collections
• You can merge two streams. You can filter a stream to get another one that has only those events you are interested in. You can map data values from one stream to another new one.
• Streams são o centro da reatividade
Trends?
Porque react?• Declarativo;• V do MV*;• Componentes!!!• Virtual DOM
Virtual DOM• FAST! FAST! FAST!• Isomorfismo;
React Compoent Lifecycle
WebPackWebpack, code bundler
React Native
F8 App
Duvidas?Obrigado!