Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Recompose
Search
Thulio Philipe
December 01, 2018
Programming
1
550
Recompose
Evento: JSDay Recife
Thulio Philipe
December 01, 2018
Tweet
Share
More Decks by Thulio Philipe
See All by Thulio Philipe
CUI & Feature Flags
thulioph
0
59
+97% of Time Reduction to Onboarding New Metrics
thulioph
0
110
Cache, além do CTRL + F5
thulioph
0
94
CSS na era dos Componentes
thulioph
0
370
Styled Components
thulioph
0
380
Redux 101
thulioph
0
240
Cache
thulioph
2
260
Segurança de Aplicações Web - 101
thulioph
0
140
Vuejs
thulioph
5
1k
Other Decks in Programming
See All in Programming
クラス設計の手順
akikogoto
0
120
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
120
Storybookの情報をMCPサーバー化する
shota_tech
3
1.3k
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
82
21k
Cursor/Devin全社導入の理想と現実
saitoryc
29
22k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
120
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
170
VibeCoding時代のエンジニアリング
daisuketakeda
0
240
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
170
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
640
データベースの技術選定を突き詰める ~複数事例から考える最適なデータベースの選び方~
nnaka2992
3
2.2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
71
4.8k
Typedesign – Prime Four
hannesfritz
41
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GitHub's CSS Performance
jonrohan
1031
460k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Producing Creativity
orderedlist
PRO
344
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Transcript
Recompose O lodash para React
github.com/thulioph twitter.com/thulioph_ thulioph.com
github.com/thulioph twitter.com/thulioph_ thulioph.com
github.com/labcodes twitter.com/labcodes labcodes.com.br
None
None
Avisos
•Não se preocupe com os links, todos estão nos slides.
•Não se preocupe com os links, todos estão nos slides.
•Todo material será disponibilizado no final da apresentação.
•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.
•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!
Composição
– Dicionário “Ação ou efeito de compor, formar um todo.”
twitter.com/chantastic
youtu.be/YaZg8wg39QQ
None
None
Círculo grande
None
Círculo pequeno
None
Círculo pequeno dentro de um círculo grande
Círculo pequeno dentro de um círculo grande
Círculo pequeno dentro de um círculo grande
None
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado
None
None
Tecnicamente Falando
Círculo Render props context state lifecycle events
Círculo grande Render props context state lifecycle events Círculo pequeno
Render props context state lifecycle events
SMART Render props context state lifecycle events DUMB Render props
context state lifecycle events
CONTAINER Render props context state lifecycle events PRESENTATION Render props
context state lifecycle events
CONTROLLER Render props context state lifecycle events VIEW Render props
context state lifecycle events
DATA Render props context state lifecycle events DISPLAY Render props
context state lifecycle events
CÍRCULO GRANDE Render props context state lifecycle events CÍRCULO PEQUENO
Render props context
STATEFULL COMPONENTE STATELESS COMPONENTE
Divisão de Responsabilidades
Círculo pequeno dentro de um círculo grande
Círculo pequeno dentro de um círculo grande verde
Círculo pequeno dentro de um círculo grande laranja
Círculo pequeno dentro de um círculo grande amarelo
Círculo pequeno dentro de um círculo grande rosa
reutilizando o círculo pequeno
reutilizando o círculo pequeno componente
None
None
None
None
None
CONTAINER COMPONENTE
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado verde
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado laranja
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado amarelo
Círculo pequeno dentro de um círculo grande dentro de um
círculo pontilhado rosa
reutilizando os dois círculos
reutilizando os dois círculos containers
None
None
None
None
None
None
None
None
HIGHER-ORDER COMPONENT
Ferramentas
Lodash lodash.com
Lodash
Lodash
Lodash
npmjs.com/browse/depended
sitepoint.com/lodash-features-replace-es6
Recompose github.com/acdlite/recompose
withState()
Recompose
Recompose
Recompose
withHandlers()
Recompose
Recompose
Recompose
Recompose
lifecycle()
Recompose
Recompose
Recompose
Recompose
branch()
Recompose
Recompose
Recompose
Recompose
Recompose
nest()
Recompose
youtu.be/zD_judE-bXk
Briefing
1.Exibir uma lista de items em formato de card.
1.Exibir uma lista de items em formato de card. 2.Cada
card possui um toggle que exibe/esconde o conteúdo.
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.
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.
codesandbox.io/s/825zovqwm8
LET’S CODE!
parte 1 Exibir uma lista de items em formato de
card
None
None
None
None
None
None
None
codesandbox.io/s/825zovqwm8
parte 2 Cada card possui um toggle que exibe/esconde o
conteúdo
None
None
None
None
None
None
None
None
None
None
None
None
None
codesandbox.io/s/825zovqwm8
parte 3 Os dados dos cards, serão fornecidos por uma
API
None
None
None
None
None
None
None
codesandbox.io/s/825zovqwm8
parte 4 Enquanto carregar os cards, deve-se exibir um loading
None
None
None
None
None
None
None
codesandbox.io/s/825zovqwm8
None
Post-mortem
NÃO É A MÚSICA DO SLAYER
NÃO POSSUI LIGAÇÃO COM MORTE
— Esse que vos fala, agora. “É uma retrospectiva no
fim de um projeto, com o objetivo de analisar os desafios e resultados entregues. ”
lab.codes/devpleno
Obrigado! speakerdeck.com/thulioph/recompose