Hello React!

Nesse workshop foi apresentado uma introdução sobre a biblioteca React com Gui Diego (https://www.linkedin.com/in/guilhermediego/) e Vinicius Lemes (https://www.linkedin.com/in/vlemes/) na Trilha Full Stack JavaScript.

Transcript

2. React Uma biblioteca JavaScript para construir interfaces Vinicius Lemes @lemes
3. Primeiras impressões
4. Primeiras impressões WTF?!
5. “Reações” ao React “Feio.”
6. “Reações” ao React “Feio.” “Cadê a separação de conceitos!!??”
7. “Reações” ao React “Feio.” “Ah, React é pra criar templates” “Cadê a separação de conceitos!!??”
8. “Reações” ao React • JSX • É apenas JavaScript • Não é uma linguagem para template
9. Fundamentos
10. #1 Tudo é Componente
11. React não tem...
12. React não tem... ...controllers
13. React não tem... ...controllers ...directives
14. React não tem... ...controllers ...directives ....templates
15. React não tem... ...controllers ...directives ....templates ....global event listeners
16. React não tem... ...controllers ...directives ....templates ....global event listeners ...models
17. React não tem... ...controllers ...directives ....templates ....global event listeners ...models ....view models
18. React não tem... ...controllers ...directives ....templates ....global event listeners ...models ....view models Just Components
19. NÓS NÃO PRECISAMOS DE
22. E se separássemos de outra forma?
23. App
24. App SearchBar JobList
25. App SearchBar JobList JobItem
26. Separação de Conceitos Componentes
27. Separação de Conceitos Componentes Composable
28. Separação de Conceitos Componentes Composable Reutilizável
29. Separação de Conceitos Componentes Composable Reutilizável Maintainable
30. Separação de Conceitos Componentes Composable Reutilizável Maintainable Testable
31. Separação de Conceitos Componentes Composable Reutilizável Maintainable Testable Componentes são independentes
32. #2 Single Source of Truth
33. Fluxos de dados tradicionais
34. Fluxos de dados tradicionais Sem framework: qualquer componente pode se comunicar com qualquer outro componente
35. Fluxos de dados tradicionais Sem framework: qualquer componente pode se comunicar com qualquer outro componente Backbone: Pub-sub item.on(‘change:name’, function() { ...
36. Fluxos de dados tradicionais Sem framework: qualquer componente pode se comunicar com qualquer outro componente Backbone: Pub-sub item.on(‘change:name’, function() { ... Angular: 2-way data binding e $digest loop $scope.name = ...
37. Fluxos de dados tradicionais Sem framework: qualquer componente pode se comunicar com qualquer outro componente Backbone: Pub-sub item.on(‘change:name’, function() { ... Angular: 2-way data binding e $digest loop $scope.name = ... React: 1-way data flow
38. Dados são passados de pai para filho check. props.
39. Acessando props
40. Acessando props
41. Acessando props
42. Acessando props
43. Acessando props
44. Props são imutáveis
45. Props são imutáveis
46. Props são imutáveis
47. Props são imutáveis Don’t touch my stuff!
48. State é mutável Whatever you say, dude.
49. State pode se tornar props
50. App <div> <SearchBar search={this.state.search} onChange={this.handleChange} /> <JobList list={this.state.list} /> </div>
51. App <div> <SearchBar search={this.state.search} onChange={this.handleChange} /> <JobList list={this.state.list} /> </div> JobList this.props.list.map(job => <JobItem key={job.id} job={job} /> );
52. App <div> <SearchBar search={this.state.search} onChange={this.handleChange} /> <JobList list={this.state.list} /> </div> SearchBar changeSearch = (e) => { … does stuff this.props.onChange(e.target.value); }
53. App <div> <SearchBar search={this.state.search} onChange={this.handleChange} /> <JobList list={this.state.list} /> </div> SearchBar changeSearch = (e) => { … does stuff this.props.onChange(e.target.value); } <input value={this.props.value} onChange={this.changeSearch} />
54. App <div> <SearchBar search={this.state.search} onChange={this.handleChange} /> <JobList list={this.state.list} /> </div> SearchBar changeSearch = (e) => { … does stuff this.props.onChange(e.target.value); } <input value={this.props.value} onChange={this.changeSearch} />
55. DATA FLOWS DOWN
56. DATA FLOWS DOWN EVENTS FLOW UP
57. DATA FLOWS DOWN EVENTS FLOW UP Just like the DOM
58. Data flows down, events flow up Just like the DOM
59. # Virtual DOM
60. Touching the DOM is evil
61. Touching the DOM is evil É inconsistente
62. É inconsistente É difícil de testar Touching the DOM is evil
63. Touching the DOM is evil É inconsistente É difícil de testar É frágil
64. Touching the DOM is evil É inconsistente É difícil de testar É frágil É CUSTOSO
65. De volta ao JSX
66. JSX Compilado
67. É apenas JavaScript
68. O que o render() faz então? O que button() retorna? Quando o render() é chamado?
69. Virtual DOM
70. Virtual DOM • É JavaScript puro em memória representando o DOM
71. Virtual DOM • É JavaScript puro em memória representando o DOM • render() é executado sempre que alguma coisa muda
72. Virtual DOM • É JavaScript puro em memória representando o DOM • render() é executado sempre que alguma coisa muda • React modifica o DOM real para corresponder com o virtual
73. Virtual DOM • É JavaScript puro em memória representando o DOM • render() é executado sempre que alguma coisa muda • React modifica o DOM real para corresponder com o virtual • É RÁPIDO
74. DOM TRAVOLTA
75. Virtual DOM ParentComponent ChildComponent ChildComponent ChildComponent ChildComponent ChildComponent
76. EACH UPDATE
77. EACH UPDATE Build a new Virtual DOM tree
78. EACH UPDATE Build a new Virtual DOM tree Diff algorithm with old
79. EACH UPDATE Build a new Virtual DOM tree Diff algorithm with old Compute minimal sets of mutation and put in a queue
80. EACH UPDATE Build a new Virtual DOM tree Diff algorithm with old Compute minimal sets of mutation and put in a queue Bath executes all updates
81. Old tree
82. Old tree Mutations
83. Old tree Mutations New Tree
84. EACH UPDATE Build a new Virtual DOM tree Diff algorithm with old Compute minimal sets of mutation and put in a queue Bath executes all updates Re-render the DOM
85. Why all this is awesome
86. Why all this is awesome • One-way data flow mantem complexidade sobre controle
87. Why all this is awesome • One-way data flow mantem complexidade sobre controle • Componentes autônomos são mais fáceis de testar
88. Why all this is awesome • One-way data flow mantem complexidade sobre controle • Componentes autônomos são mais fáceis de testar • Biblioteca não dita como se usar
89. Why all this is awesome • One-way data flow mantem complexidade sobre controle • Componentes autônomos são mais fáceis de testar • Biblioteca não dita como se usar • Grande potencial
90. Why all this is awesome • One-way data flow mantem complexidade sobre controle • Componentes autônomos são mais fáceis de testar • Biblioteca não dita como se usar • Grande potencial • Processo de desenvolvimento é simples!