React is the new black - FrontInRio 2015

Por que todo mundo está falando de ReactJS? Aprenda os conceitos básicos da tecnologia mais quente dessa estação e entre na moda você também.

Transcript

1. por Darlene Medeiros
2. INMATE MEDEIROS DARLENE VENDING Software Developer atualmente na Globo.com 1234-5678
4. O que é ReactJS? Uma biblioteca para criar interfaces através de componentes. Trabalha com Virtual DOM. Re-renderiza as alterações na página.
5. O AngularJS é um framework, ou seja, um conjunto de ferramentas para resolver diferentes problemas. O ReactJS é uma biblioteca e como tal se dispõe a resolver um único problema, renderizar componentes. Qual a diferença pro AngularJS?
6. O ReactJS é o “V” de MVC? ReactJS não segue o padrão MVC. O MVC é bom para lidar com estado de dados mas é péssimo para estados de aplicação (como o dado será exibido) e resulta em problemas de comunicação.
7. Arquiteta sua interface utilizando componentes. Thinking in React
8. Por que o ReactJS foi criado? Quando você possui uma aplicação muito grande, lidar com todos os eventos se torna muito complexo.
9. Como funciona: Permite comunicação entre componentes usando publish/subscribe sem que um componente conheça o outro. Problema: Quando há muitos eventos sendo chamados por outros eventos, a ordem de execução fica obscura. Global event bus
10. Como funciona: Você cria observers que chamam callbacks, quando determinado dado muda, garantindo que ele foi atualizado corretamente. Problema: Callbacks disparando sem que você espere, você não sabe quais os efeitos colaterais de uma alteração. Data binding
12. Re-renderizar “tudo” remove a parte complicada de orquestrar as renderizações parciais e lidar com seus efeitos colaterais. Utilizar a DOM tree como fluxo da informação. The React Way
13. O Backbone também re-renderiza Backbone React
15. Virtual DOM O ReactJS cria uma cópia virtual do DOM e só depois aplica no DOM real. Manipulações no DOM são lentas, por isso o ReactJS cria uma cópia virtual do DOM, com a qual sua aplicação interage, depois faz um diff das alterações e aplica no DOM real.
16. Algoritmo de Diff A primeira vez que um componente é iniciado, o método render é chamado e cria uma representação bem simples (virtual DOM), a partir dela um markup é gerado e injetado no documento. Quando os dados mudam, o render é chamado novamente, um diff é feito, resultando em um mínimo de alterações a serem aplicadas ao DOM.
18. HTML junto com JS O ReactJS não usa templates. Separar HTML e Javascript é muito mais uma separação de tecnologias do que de responsabilidades, afinal, seu código acaba muito acoplado ao markup pois depende dos seletores.
19. E o tal JSX? É apenas uma forma mais fácil de escrever, se não gostar, você pode usar apenas Javascript.
21. Renderizando um componente 1 // Sem JSX 2 React.render( 3 React.createElement('h1', null, 'Título'), 4 document.getElementById('content') 5 ); 1 // COM JSX 2 React.render( 3 <h1>Título</h1>, 4 document.getElementById('content') 5 )
22. Lidando com mais componentes 1 var Chamada = React.createClass({ 2 render: function(){ 3 return ( 4 <div> 5 <h1>Título</h1> 6 <Subtitulo /> 7 </div> 8 ); 9 } 10 }); 11 12 React.render( 13 <Chamada />, 14 document.getElementById('content') 15 ); 1 var Subtitulo = React.createClass({ 2 render: function(){ 3 return ( 4 <h2>Subtítulo</h2> 5 ); 6 } 7 });
23. 1 class ListaES6 extends React.Component { 2 render(){ 3 return ( 4 <h1>Lista</h1> 5 ) 6 } 7 }; 8 9 React.render( 10 <ListaES6 />, 11 document.getElementById('content') 12 ); Usando ES6
24. Especificação e Ciclo de Vida - render - getInitialState - componentWillMount - componentDidMount - shouldComponentUpdate https://facebook.github.io/react/docs/component-specs.html
25. props vs state Ambos exibem dados no HTML, ambos disparam o render update, como diferenciar? props - Como a informação é passada de um componente “pai” para um “filho” state - Atributo do componente
26. props vs state 1. Ele é passado pelo pai via props? SIM 2. Ele muda com o tempo? NÃO 3. Ele pode ser calculado baseado em outros states ou props do seu componente? SIM Provavelmente é props
27. props vs state 1 var Chamada = React.createClass({ 2 render: function(){ 3 return ( 4 <div> 5 <h1>Título</h1> 6 <Subtitulo subtitulo=”lala” /> 7 </div> 8 ); 9 } 10 }); 11 12 React.render( 13 <Chamada />, 14 document.getElementById('content') 15 ); 1 var Subtitulo = React.createClass({ 2 render: function(){ 3 return ( 4 <h2>{this.props.subtitulo}</h2> 5 ); 6 } 7 });
29. Como testar? Test Utilities Jest vs Jasmine JSDom vs Shallow Rendering (não renderiza subcomponentes) Shallow Rendering é uma funcionalidade experimental (07/2015) que lhe permite fazer asserções sobre os componentes sem a necessidade de instanciá-los ou renderizá-los, ou seja, não necessita do DOM.
30. Quem usa?
31. Web Components Você pode utilizar Web Components como qualquer outra tag HTML https://github.com/facebook/react/commit/c3addeb6422b514a7eabd06bd3cb8449a9598912 Web Components e Polymer se aproximam cada vez mais do navegador enquanto o ReactJS se afasta
32. Além do browser React Canvas https://github.com/Flipboard/react-canvas React Server https://github.com/mhart/react-server-example https://github.com/facebook/react/tree/master/examples/server-rendering React Native https://facebook.github.io/react-native/ http://www.reactnative.com/ React “Gibbon” https://www.youtube.com/watch?v=eNC0mRYGWgc
34. Referências História do ReactJS http://codewinds.com/podcast/004.html Thinking in React https://facebook.github.io/react/docs/thinking-in-react.html Khan Academy - migrando do BackboneJS pro ReactJS http://joelburget.com/backbone-to-react/ http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html WebComponents vs ReactJS http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web- components-polymer Série sobre ReactJS http://willianjusten.com.br/series/
35. Referências MVC http://www.code-experience.com/react-js-vs-traditional-mvc-backbone-ember-angular/ http://www.code-experience.com/why-you-might-not-need-mvc-with-reactjs/ Shallow Rendering http://simonsmith.io/unit-testing-react-components-without-a-dom/ Renderizando no servidor http://www.crmarsh.com/react-ssr/ https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html React Gibbon - Netflix https://www.youtube.com/watch?v=eNC0mRYGWgc props vs state https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
36. Dúvidas?