Recompose

Evento: JSDay Recife

Transcript

1. Recompose
   O lodash para React
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

6. View Slide

7. Avisos
   

   View Slide

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

   View Slide

9. •Não se preocupe com os links, todos estão nos slides.
   •Todo material será disponibilizado no final da
   apresentação.
   

   View Slide

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.
    

    View Slide

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!
    

    View Slide

12. Composição
    

    View Slide

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

    View Slide

14. twitter.com/chantastic
    

    View Slide

15. youtu.be/YaZg8wg39QQ
    

    View Slide

16. View Slide

17. View Slide

18. Círculo grande
    

    View Slide

19. View Slide

20. Círculo pequeno
    

    View Slide

21. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
    

    View Slide

27. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
    

    View Slide

28. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
    

    View Slide

29. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
    

    View Slide

30. View Slide

31. View Slide

32. Tecnicamente
    Falando
    

    View Slide

33. Círculo
    Render
    props
    context
    state
    lifecycle
    
    events
    

    View Slide

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

    View Slide

35. SMART
    Render
    props
    context
    state
    lifecycle
    
    events
    DUMB
    Render
    props
    context
    state
    lifecycle
    
    events
    

    View Slide

36. CONTAINER
    Render
    props
    context
    state
    lifecycle
    
    events
    PRESENTATION
    Render
    props
    context
    state
    lifecycle
    
    events
    

    View Slide

37. CONTROLLER
    Render
    props
    context
    state
    lifecycle
    
    events
    VIEW
    Render
    props
    context
    state
    lifecycle
    
    events
    

    View Slide

38. DATA
    Render
    props
    context
    state
    lifecycle
    
    events
    DISPLAY
    Render
    props
    context
    state
    lifecycle
    
    events
    

    View Slide

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

    View Slide

40. STATEFULL COMPONENTE STATELESS COMPONENTE
    

    View Slide

41. Divisão de
    Responsabilidades
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. reutilizando o
    círculo pequeno
    

    View Slide

48. reutilizando o
    círculo pequeno
    componente
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. CONTAINER COMPONENTE
    

    View Slide

55. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado
    

    View Slide

56. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado verde
    

    View Slide

57. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado laranja
    

    View Slide

58. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado amarelo
    

    View Slide

59. Círculo pequeno dentro de um círculo grande dentro de um círculo pontilhado rosa
    

    View Slide

60. reutilizando os
    dois círculos
    

    View Slide

61. reutilizando os
    dois círculos
    containers
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. HIGHER-ORDER COMPONENT
    

    View Slide

71. Ferramentas
    

    View Slide

72. Lodash
    lodash.com
    

    View Slide

73. Lodash
    

    View Slide

74. Lodash
    

    View Slide

75. Lodash
    

    View Slide

76. npmjs.com/browse/depended
    

    View Slide

77. sitepoint.com/lodash-features-replace-es6
    

    View Slide

78. Recompose
    github.com/acdlite/recompose
    

    View Slide

79. withState()
    

    View Slide

80. Recompose
    

    View Slide

81. Recompose
    

    View Slide

82. Recompose
    

    View Slide

83. withHandlers()
    

    View Slide

84. Recompose
    

    View Slide

85. Recompose
    

    View Slide

86. Recompose
    

    View Slide

87. Recompose
    

    View Slide

88. lifecycle()
    

    View Slide

89. Recompose
    

    View Slide

90. Recompose
    

    View Slide

91. Recompose
    

    View Slide

92. Recompose
    

    View Slide

93. branch()
    

    View Slide

94. Recompose
    

    View Slide

95. Recompose
    

    View Slide

96. Recompose
    

    View Slide

97. Recompose
    

    View Slide

98. Recompose
    

    View Slide

99. nest()
    

    View Slide

100. Recompose
     

     View Slide

101. youtu.be/zD_judE-bXk
     

     View Slide

102. Briefing
     

     View Slide

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

     View Slide

104. 1.Exibir uma lista de items em formato de card.
     2.Cada card possui um toggle que exibe/esconde
     o conteúdo.
     

     View Slide

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.
     

     View Slide

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.
     

     View Slide

107. codesandbox.io/s/825zovqwm8
     

     View Slide

108. LET’S CODE!
     

     View Slide

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

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

117. codesandbox.io/s/825zovqwm8
     

     View Slide

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

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. codesandbox.io/s/825zovqwm8
     

     View Slide

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

     View Slide

134. View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. codesandbox.io/s/825zovqwm8
     

     View Slide

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

     View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. codesandbox.io/s/825zovqwm8
     

     View Slide

151. View Slide

152. Post-mortem
     

     View Slide

153. NÃO É A MÚSICA DO SLAYER
     

     View Slide

154. NÃO POSSUI LIGAÇÃO COM MORTE
     

     View Slide

155. — Esse que vos fala, agora.
     “É uma retrospectiva no fim de um
     projeto, com o objetivo de analisar os
     desafios e resultados entregues. ”
     

     View Slide

156. lab.codes/devpleno
     

     View Slide

157. Obrigado!
     speakerdeck.com/thulioph/recompose
     

     View Slide