React / Flux + the new mindset

Transcript

2. Como pensamos FrontEnd? • 2000 - Full server side rendering (Procedural) • 2005 - Full server side rendering (MVC) • 2010 - Single Page APP • Hoje?
3. ReactJS - Como o mundo vê • Engine de renderização de UI baseado em JS. • V do MVC • Somente a camada de view • Uma Biblioteca JavaScript para construção de UI
4. ReactJS - Como eu vejo • Exibir dados na view pode ser complexo • O life cycle do Front na maioria das vezes é diferente do Back • Nos MVW misturamos muito as responsabilidades • Two way data binding parece ter sido um erro • Visualização de um estado da aplicação
5. ReactJS - Hello World
6. ReactJS - JSX • Que merda é aquele HTML no meio do JS!?!? • Totalmente Opcional • Não é template engine • Não tente comparar com Handlebars/Mustache • Encare como um sintax suggar para React.createElement()
7. ReactJS - Hello World
8. ReactJS - um outro exemplo - Clock • Code…
9. ReactJS - Virtual DOM • Manipulação de DOM é caro • Virtualizar o DOM em outra estrutura de dados é uma solução possível • Não é nada novo. Games e flash já faziam algo parecido em alto nível • O gotcha está em calcular o diff entre os estados • Desde que o render seja uma função pura
10. ReactJS - Virtual DOM • render(estado) = vDOM • render(estado’) = vDOM’ • Novo DOM = diff(vDOM’-vDOM) • Vantagem de permitir undo/redo • Memento pattern quase de graça ("o_O")
11. ReactJS - Virtual DOM
12. ReactJS - Lifecycle • componentWillMount(); • componentDidMount(); • componentWillReceiveProps(object nextProps); • shouldComponentUpdate(object nextProps, object nextState); • componentWillUpdate(object nextProps, object nextState); • componentDidUpdate(object prevProps, object prevState); • componentWillUnmount();
13. ReactJS - Lifecycle • Code…
14. ReactJS + Flux • Não é um framework • É um paradigma/arquitetura de aplicação para o ReactJs • Aproveita muitos conceitos da programação reativa/orientada a Eventos.
15. O que é programação reativa? • Manifesto Reativo foi lançado em Set/14 e tem 4 pilares • Elástico: Reage à demanda/carga: aplicações podem fazer uso de múltiplos cores e múltiplos servidores. • Resiliente: Reage à falhas, aplicações reagem e se recuperam de falhas de software, hardware, e de conectividade. • Message Driven: Reage à eventos (event driven): em vez de compor aplicações por múltiplas threads síncrona, sistemas são compostos de gerenciadores de eventos assíncronos e não bloqueantes. • Responsivo: Reage à usuários: aplicações que oferecem interações ricas e “tempo real” com usuários
16. Voltando ao flux…
17. Flux Implementations • Reflux • Redux • Alt • Fluxible • Flummox • etc…
18. Obrigado! • facebook.com/wmsbill • twitter.com/wmsbill