tdc2016sp - web moderna além do front-end com angularjs

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!