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
410
Recompose
Evento: JSDay Recife
Thulio Philipe
December 01, 2018
Tweet
Share
More Decks by Thulio Philipe
See All by Thulio Philipe
+97% of Time Reduction to Onboarding New Metrics
thulioph
0
68
Cache, além do CTRL + F5
thulioph
0
62
CSS na era dos Componentes
thulioph
0
290
Styled Components
thulioph
0
310
Redux 101
thulioph
0
170
Cache
thulioph
2
190
Segurança de Aplicações Web - 101
thulioph
0
110
Vuejs
thulioph
5
860
MEAN Jedi
thulioph
0
110
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
200
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
300
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
410
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Git Lint
bkuhlmann
4
750
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
550
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
Going beyond Apache Parquet's default settings
xhochy
0
120
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
400
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Happy Clients
brianwarren
92
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
[RailsConf 2023] Rails as a piece of cake
palkan
26
4k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Web development in the modern age
philhawksworth
203
10k
GitHub's CSS Performance
jonrohan
1025
450k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
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