Recompose

 Recompose

Evento: JSDay Recife

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

December 01, 2018
Tweet

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