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

Download TDC2016SP - Web Moderna além do Front-End com AngularJS

Post on 26-Jan-2017

51 views

Category:

Education

1 download

Embed Size (px)

TRANSCRIPT

  • Modern Web Reatividade e ReactJos Barbosa | @kidchenko

  • @kidchenkoFullstack na Lambda3;Agilista;Empreendedor digital;

  • AgendaReatividade;Streams;React;

  • Voc j viu um manifesto?

  • Organizaes que trabalham em diferentes ramos, esto independentemente descobrindo padres aleatrios para criarem sistemas semelhantes. Esses sistemas so mais robustos, mais resistentes, mais flexveis e melhor posicionados para sustentar as demandas modernas.Essas transformaes esto acontecendo por causa dos requisitos que mudaram drasticamente nos ltimos anosRoland Kuhn e Jonas Bonr => akka project*

  • Ns acreditamos que necessria uma abordagem coerente para arquitetura de sistemas... ...ns queremos sistemas Responsivos, Resilientes, Elsticos e Orientados a Mensagens. Ns chamamos isso de Sistemas Reativos.

    Essas transformaes esto acontecendo por causa dos requisitos que mudaram drasticamente nos ltimos anos... ...Hoje h aplicaes em produo em todos os lugares, desde aplicativos mveis at aplicaes na nuvem com clusters rodando milhares processadores multi-core. Geralmente os usurios esperam respostas em milisegundos e 100% de disponibilidade.

    The Reactive Manifesto

  • 1995-2015

  • Os 4 princpios reativos

  • ResponsiveQue responde em tempo hbil;Uma aplicao responsiva o que queremos;Responsividade impossvel sem escalabilidade e resilincia;

    A responsive system is quick to react to all usersunder blue skies and grey skiesin order to ensure a consistently positive user experience.

    Quicknessand apositive user experienceunder various conditions, such as failure of an external system or a spike of traffic, depends on the two traits of a Reactive application:resilienceandscalability. Amessage-driven architectureprovides the overall foundation for a responsive system.*

  • :c

  • ResilientO sistema continua respondendo em caso defalha;Qualquer sistema que no resiliente ficar fora do ar depois de uma falha;

    *

  • Elastic/ScaleO sistema continua responsivo mesmo sob variaes de demanda;Projetos que no tenham pontos de conteno ou gargalos centrais;Prove mtricas relevantes e em tempo real;

  • Message DrivenNo bloqueante;Programao Assncronia;Message-driven = event-driven, actor-based, ou combinao das duas;

  • Take another example of synchrony, the single-threaded event loop. This is typical of event-based frameworks such as Node.jsevents 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.*

  • Event Driven

  • Programao Reativa ?Reactive programming is programming with asynchronous data streams.

  • Stream?A stream is a sequence ofongoing events ordered in time

  • A stream is a sequence ofongoing events ordered in time. It can emit three different things: a value (of some type), an error, or a completed signal.*

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

  • Streams e CollectionsStreams are a series of elements emitted overtime. The series potentially has no beginning and no end. Contrast that to arrays, which are a series of elements arranged inmemory. Arrays have a beginning and an end

  • Observables

    No nada novo;

  • Streams are like you twitter feed

  • Sistemas que usam StreamsSistemas que normalmente usam abstraes 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 canmerge two streams. You canfiltera stream to get another one that has only those events you are interested in. You canmapdata values from one stream to another new one.Streams so o centro da reatividade

  • Trends?

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

  • Virtual DOMFAST! FAST! FAST!Isomorfismo;

  • React Compoent Lifecycle

  • WebPackWebpack, code bundler

  • React Native

  • F8 App

  • Duvidas?Obrigado!

    Organizaes que trabalham em diferentes ramos, esto independentemente descobrindo padres aleatrios para criarem sistemas semelhantes. Esses sistemas so mais robustos, mais resistentes, mais flexveis e melhor posicionados para sustentar as demandas modernas.Essas transformaes esto acontecendo por causa dos requisitos que mudaram drasticamente nos ltimos anosRoland Kuhn e Jonas Bonr => akka project*Quicknessand apositive user experienceunder various conditions, such as failure of an external system or a spike of traffic, depends on the two traits of a Reactive application:resilienceandscalability. Amessage-driven architectureprovides the overall foundation for a responsive system.*

    *Take another example of synchrony, the single-threaded event loop. This is typical of event-based frameworks such as Node.jsevents 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.*A stream is a sequence ofongoing events ordered in time. It can emit three different things: a value (of some type), an error, or a completed signal.*