Recompose

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

5. None
6. None

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

16. None
17. None

18. Círculo grande

19. None

20. Círculo pequeno

21. None

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

25. None

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
30. None
31. None

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

49. None
50. None
51. None
52. None
53. None

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

62. None
63. None
64. None
65. None
66. None
67. None
68. None
69. None

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
110. None
111. None
112. None
113. None
114. None
115. None
116. None

117. codesandbox.io/s/825zovqwm8

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

     conteúdo
119. None
120. None
121. None
122. None
123. None
124. None
125. None
126. None
127. None
128. None
129. None
130. None
131. None

132. codesandbox.io/s/825zovqwm8

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

     API
134. None
135. None
136. None
137. None
138. None
139. None
140. None

141. codesandbox.io/s/825zovqwm8

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

143. None
144. None
145. None
146. None
147. None
148. None
149. None

150. codesandbox.io/s/825zovqwm8

151. None

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