Vamos falar de estados com Fernando Daciuk

O objetivo da talk é mostrar o significado de estados no desenvolvimento de software. Vamos entender o que são estados e como utilizá-los em nossas aplicações.

Transcript

1. Vamos falar de estados?
2. Fernando Daciuk $ npx fdaciuk
3. Fernando Daciuk $ npx fdaciuk
4. Vamos falar de estados?
5. O que é estado? ?
6. “conjunto de qualidades ou características com que as coisas se apresentam; Definição
7. conjunto de condições em que se encontram em determinado momento. “ Definição
8. “ características com que as coisas se apresentam em um determinado momento. Definição (resumo) “
9. Como você está se sentindo hoje? ?
10. Pergunta genérica
11. Emocional?
12. Físico?
13. Fome?
14. Temperatura?
15. Especificar o estado
16. Qual o seu estado emocional atual? ?
17. Feliz / triste?
18. (Des)Animado(a)?
19. Trazendo para a web
20. Qual o estado desse checkbox?
21. E agora?
22. temos, ao menos, 3 tipos de estado
23. Especificar o estado
24. O que é estado? ?
25. “ características com que as coisas se apresentam em um determinado momento. Definição (resumo) “
26. temos, ao menos, 3 tipos de estado
27. 1. checked
28. 1. checked checkado (true)
29. 1. checked não checkado (false)
30. 1. checked indeterminado (?)
31. 2. tema
32. 2. tema primary
33. 2. tema secondary
34. 2. tema default
35. 3. habilitado
36. 3. habilitado habilitado (true)
37. 3. habilitado desabilitado (false)
38. “ características com que as coisas se apresentam em um determinado momento. Definição (resumo) “
39. “ características com que as coisas se apresentam em um determinado momento. Definição (resumo) “
40. Estados podem mudar
41. Triste > Feliz
42. Com fome > Saciado(a)
43. Um fator externo pode mudar um estado
44. Triste > Feliz estado inicial
45. Triste > Feliz fator externo (ex. boa notícia)
46. Triste > Feliz estado atualizado
47. Com fome > Saciado(a) estado inicial
48. Com fome > Saciado(a) fator externo (ex. coffee break)
49. Com fome > Saciado(a) estado atualizado
50. Água (H²O)
51. 3 possíveis estados:
52. Sólido
53. Líquido
54. Gasoso
55. Quem muda o estado da água? ?
56. Temperatura fator externo
57. Representando em dados
59. Por que o estado da água NÃO está no objeto? ?
60. Temperatura é um estado
61. Estado da água muda com base na temperatura
63. estado
64. define estado da água com base na temperatura
65. exibe o estado atualizado
66. Como ocorre a mudança da temperatura? ?
67. Ambiente controlado
68. Ex. Ar Condicionado
69. Representando na aplicação
71. recebe a frase renderizada
72. controle para mudança da temperatura
74. renderiza a frase no navegador
75. renderiza a informação com o estado inicial
76. aumenta a temperatura e atualiza a frase
77. reduz a temperatura e atualiza a frase
78. renderização inicial
80. clique para aumentar a temperatura
83. Considerações importantes
84. Sempre algum fator externo vai mudar um estado;
85. Um estado pode ser alterado com base em outro;
86. Um estado deve SEMPRE ter um valor inicial.
87. estado inicial
88. Onde armazenar o estado? ?
89. Variável global? ?
90. Dentro da função onde esse estado é usado? ?
91. Tipos de estado
92. Hardcoded (fixo, direto no código) estado estático
93. O texto dos botões é um exemplo de estado estático.
94. O mais próximo possível de onde será usado estado local
95. No componente pai de todos os outros que irão usar esse estado estado compartilhado
96. No componente principal da app ou fora dela (ex. Redux) estado global
97. Que tipo de informações podemos armazenar no estado? ?
98. Apenas dados serializáveis
99. Apenas dados serializáveis https://www.json.org
100. Tipos primitivos: String, Number, Boolean, null Tipos de objetos: Object, Array
101. Dicas
102. Trate separadamente dados no estado e criação de UI
103. Mantenha o mesmo tipo de dado do início ao fim do seu ciclo
104. Sua UI precisa estar sempre pronta para renderizar os dados do estado
105. E quando a informação é preenchida somente após uma ação assíncrona? ?
106. Inicie seu estado com o menor valor possível
107. zero (0) Number
108. String vazia ‘’ String
109. false Boolean
110. Array vazio [] Array
111. Objeto vazio {} Object
112. Podemos usar null para casos específicos null
113. Desde que você verifique se o valor existe antes de usá-lo null
114. Como saber quando a informação assíncrona está pronta para ser renderizada? ?
115. Podemos usar 3 estados para representar ações assíncronas:
116. 1. vai começar! Ações assíncronas (ex. requests)
117. 2. finalizado com sucesso Ações assíncronas (ex. requests)
118. 3. finalizado com erro Ações assíncronas (ex. requests)
119. Representando na aplicação
120. estado inicial
121. request iniciado
122. request iniciado
123. request finalizado (sucesso)
124. request finalizado (sucesso)
125. request finalizado (sucesso)
126. request finalizado (erro)
127. request finalizado (erro)
128. request finalizado (erro)
129. Transformação de dados
130. Array.map: transformar itens do array, mantendo o tamanho
131. Array.reduce: transformar array em qualquer outro tipo de dado
132. Iterar objetos: transforme-os em arrays
133. Object.keys
134. Object.values
135. Object.entries
136. Renderização condicional
137. Array.find
138. Array.filter
139. Array.some
140. Array.every
141. Use para renderizar um estado condicionalmente
142. Onde continuar aprendendo? ?
146. Fernando Daciuk $ npx fdaciuk