Recompose

Transcript

1. 1.

   Recompose O lodash para React

2. 2.

   github.com/thulioph twitter.com/thulioph_ thulioph.com

3. 3.

   github.com/thulioph twitter.com/thulioph_ thulioph.com

4. 4.

   github.com/labcodes twitter.com/labcodes labcodes.com.br

5. 5.

   None
6. 6.

   None
7. 7.

   Avisos

8. 8.

   •Não se preocupe com os links, todos estão nos slides.

9. 9.

   •Não se preocupe com os links, todos estão nos slides.

   •Todo material será disponibilizado no final da apresentação.
10. 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. 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. 12.

    Composição

13. 13.

    – Dicionário “Ação ou efeito de compor, formar um todo.”

14. 14.

    twitter.com/chantastic

15. 15.

    youtu.be/YaZg8wg39QQ

16. 16.

    None
17. 17.

    None
18. 18.

    Círculo grande

19. 19.

    None
20. 20.

    Círculo pequeno

21. 21.

    None
22. 22.

    Círculo pequeno dentro de um círculo grande

23. 23.

    Círculo pequeno dentro de um círculo grande

24. 24.

    Círculo pequeno dentro de um círculo grande

25. 25.

    None
26. 26.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado
27. 27.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado
28. 28.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado
29. 29.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado
30. 30.

    None
31. 31.

    None
32. 32.

    Tecnicamente Falando

33. 33.

    Círculo Render props context state lifecycle events

34. 34.

    Círculo grande Render props context state lifecycle events Círculo pequeno

    Render props context state lifecycle events
35. 35.

    SMART Render props context state lifecycle events DUMB Render props

    context state lifecycle events
36. 36.

    CONTAINER Render props context state lifecycle events PRESENTATION Render props

    context state lifecycle events
37. 37.

    CONTROLLER Render props context state lifecycle events VIEW Render props

    context state lifecycle events
38. 38.

    DATA Render props context state lifecycle events DISPLAY Render props

    context state lifecycle events
39. 39.

    CÍRCULO GRANDE Render props context state lifecycle events CÍRCULO PEQUENO

    Render props context
40. 40.

    STATEFULL COMPONENTE STATELESS COMPONENTE

41. 41.

    Divisão de Responsabilidades

42. 42.

    Círculo pequeno dentro de um círculo grande

43. 43.

    Círculo pequeno dentro de um círculo grande verde

44. 44.

    Círculo pequeno dentro de um círculo grande laranja

45. 45.

    Círculo pequeno dentro de um círculo grande amarelo

46. 46.

    Círculo pequeno dentro de um círculo grande rosa

47. 47.

    reutilizando o círculo pequeno

48. 48.

    reutilizando o círculo pequeno componente

49. 49.

    None
50. 50.

    None
51. 51.

    None
52. 52.

    None
53. 53.

    None
54. 54.

    CONTAINER COMPONENTE

55. 55.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado
56. 56.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado verde
57. 57.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado laranja
58. 58.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado amarelo
59. 59.

    Círculo pequeno dentro de um círculo grande dentro de um

    círculo pontilhado rosa
60. 60.

    reutilizando os dois círculos

61. 61.

    reutilizando os dois círculos containers

62. 62.

    None
63. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    None
67. 67.

    None
68. 68.

    None
69. 69.

    None
70. 70.

    HIGHER-ORDER COMPONENT

71. 71.

    Ferramentas

72. 72.

    Lodash lodash.com

73. 73.

    Lodash

74. 74.

    Lodash

75. 75.

    Lodash

76. 76.

    npmjs.com/browse/depended

77. 77.

    sitepoint.com/lodash-features-replace-es6

78. 78.

    Recompose github.com/acdlite/recompose

79. 79.

    withState()

80. 80.

    Recompose

81. 81.

    Recompose

82. 82.

    Recompose

83. 83.

    withHandlers()

84. 84.

    Recompose

85. 85.

    Recompose

86. 86.

    Recompose

87. 87.

    Recompose

88. 88.

    lifecycle()

89. 89.

    Recompose

90. 90.

    Recompose

91. 91.

    Recompose

92. 92.

    Recompose

93. 93.

    branch()

94. 94.

    Recompose

95. 95.

    Recompose

96. 96.

    Recompose

97. 97.

    Recompose

98. 98.

    Recompose

99. 99.

    nest()

100. 100.

     Recompose

101. 101.

     youtu.be/zD_judE-bXk

102. 102.

     Briefing

103. 103.

     1.Exibir uma lista de items em formato de card.

104. 104.

     1.Exibir uma lista de items em formato de card. 2.Cada

     card possui um toggle que exibe/esconde o conteúdo.
105. 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. 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. 107.

     codesandbox.io/s/825zovqwm8

108. 108.

     LET’S CODE!

109. 109.

     parte 1 Exibir uma lista de items em formato de

     card
110. 110.

     None
111. 111.

     None
112. 112.

     None
113. 113.

     None
114. 114.

     None
115. 115.

     None
116. 116.

     None
117. 117.

     codesandbox.io/s/825zovqwm8

118. 118.

     parte 2 Cada card possui um toggle que exibe/esconde o

     conteúdo
119. 119.

     None
120. 120.

     None
121. 121.

     None
122. 122.

     None
123. 123.

     None
124. 124.

     None
125. 125.

     None
126. 126.

     None
127. 127.

     None
128. 128.

     None
129. 129.

     None
130. 130.

     None
131. 131.

     None
132. 132.

     codesandbox.io/s/825zovqwm8

133. 133.

     parte 3 Os dados dos cards, serão fornecidos por uma

     API
134. 134.

     None
135. 135.

     None
136. 136.

     None
137. 137.

     None
138. 138.

     None
139. 139.

     None
140. 140.

     None
141. 141.

     codesandbox.io/s/825zovqwm8

142. 142.

     parte 4 Enquanto carregar os cards, deve-se exibir um loading

143. 143.

     None
144. 144.

     None
145. 145.

     None
146. 146.

     None
147. 147.

     None
148. 148.

     None
149. 149.

     None
150. 150.

     codesandbox.io/s/825zovqwm8

151. 151.

     None
152. 152.

     Post-mortem

153. 153.

     NÃO É A MÚSICA DO SLAYER

154. 154.

     NÃO POSSUI LIGAÇÃO COM MORTE

155. 155.

     — Esse que vos fala, agora. “É uma retrospectiva no

     fim de um projeto, com o objetivo de analisar os desafios e resultados entregues. ”
156. 156.

     lab.codes/devpleno

157. 157.

     Obrigado! speakerdeck.com/thulioph/recompose