Recompose - O lodash para React

Palestra apresentada no JSDay Recife 2018

Transcript

1. Recompose O lodash para React
2. github.com/thulioph twitter.com/thulioph_ thulioph.com
3. github.com/thulioph twitter.com/thulioph_ thulioph.com
4. github.com/labcodes twitter.com/labcodes labcodes.com.br
7. Avisos
8. •Não se preocupe com os links, todos estão nos slides.
9. •Não se preocupe com os links, todos estão nos slides. •Todo material será disponibilizado no final da apresentação.
10. •Não se preocupe com os links, todos estão nos slides. •Todo material será disponibilizado no final da apresentação. •Tome nota de alguns termos, podem ser úteis para pesquisas futuras.
11. •Não se preocupe com os links, todos estão nos slides. •Todo material será disponibilizado no final da apresentação. •Tome nota de alguns termos, podem ser úteis para pesquisas futuras. •Comunique-se!
12. Composição
13. – Dicionário “Ação ou efeito de compor, formar um todo.”
14. twitter.com/chantastic
15. youtu.be/YaZg8wg39QQ
18. Círculo grande
20. Círculo pequeno
22. Círculo pequeno dentro de um círculo grande
23. Círculo pequeno dentro de um círculo grande
24. Círculo pequeno dentro de um círculo grande
26. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
27. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
28. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
29. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
32. Tecnicamente Falando
33. Círculo Render props context state lifecycle events
34. Círculo grande Render props context state lifecycle events Círculo pequeno Render props context state lifecycle events
35. SMART Render props context state lifecycle events DUMB Render props context state lifecycle events
36. CONTAINER Render props context state lifecycle events PRESENTATION Render props context state lifecycle events
37. CONTROLLER Render props context state lifecycle events VIEW Render props context state lifecycle events
38. DATA Render props context state lifecycle events DISPLAY Render props context state lifecycle events
39. CÍRCULO GRANDE Render props context state lifecycle events CÍRCULO PEQUENO Render props context
40. STATEFULL COMPONENTE STATELESS COMPONENTE
41. Divisão de Responsabilidades
42. Círculo pequeno dentro de um círculo grande
43. Círculo pequeno dentro de um círculo grande verde
44. Círculo pequeno dentro de um círculo grande laranja
45. Círculo pequeno dentro de um círculo grande amarelo
46. Círculo pequeno dentro de um círculo grande rosa
47. reutilizando o círculo pequeno
48. reutilizando o círculo pequeno componente
54. CONTAINER COMPONENTE
55. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
56. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado verde
57. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado laranja
58. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado amarelo
59. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado rosa
60. reutilizando os dois círculos
61. reutilizando os dois círculos containers
70. HIGHER-ORDER COMPONENT
71. Ferramentas
72. Lodash lodash.com
73. Lodash
74. Lodash
75. Lodash
76. npmjs.com/browse/depended
77. sitepoint.com/lodash-features-replace-es6
78. Recompose github.com/acdlite/recompose
79. withState()
80. Recompose
81. Recompose
82. Recompose
83. withHandlers()
84. Recompose
85. Recompose
86. Recompose
87. Recompose
88. lifecycle()
89. Recompose
90. Recompose
91. Recompose
92. Recompose
93. branch()
94. Recompose
95. Recompose
96. Recompose
97. Recompose
98. Recompose
99. nest()
100. Recompose
101. youtu.be/zD_judE-bXk
102. Briefing
103. 1.Exibir uma lista de items em formato de card.
104. 1.Exibir uma lista de items em formato de card. 2.Cada card possui um toggle que exibe/esconde o conteúdo.
105. 1.Exibir uma lista de items em formato de card. 2.Cada card possui um toggle que exibe/esconde o conteúdo. 3.Os dados dos cards, serão fornecidos por uma API.
106. 1.Exibir uma lista de items em formato de card. 2.Cada card possui um toggle que exibe/esconde o conteúdo. 3.Os dados dos cards, serão fornecidos por uma API. 4.Enquanto carregar os cards, deve-se exibir um loading.
107. codesandbox.io/s/825zovqwm8
108. LET’S CODE!
109. parte 1 Exibir uma lista de items em formato de card
117. codesandbox.io/s/825zovqwm8
118. parte 2 Cada card possui um toggle que exibe/esconde o conteúdo
132. codesandbox.io/s/825zovqwm8
133. parte 3 Os dados dos cards, serão fornecidos por uma API
141. codesandbox.io/s/825zovqwm8
142. parte 4 Enquanto carregar os cards, deve-se exibir um loading
150. codesandbox.io/s/825zovqwm8
152. Post-mortem
153. NÃO É A MÚSICA DO SLAYER
154. NÃO POSSUI LIGAÇÃO COM MORTE
155. — Esse que vos fala, agora. “É uma retrospectiva no fim de um projeto, com o objetivo de analisar os desafios e resultados entregues. ”
156. lab.codes/devpleno
157. Obrigado! speakerdeck.com/thulioph/recompose