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 - O lodash para React
Search
Labcodes Software Studio
December 01, 2018
Programming
2
99
Recompose - O lodash para React
Palestra apresentada no JSDay Recife 2018
Labcodes Software Studio
December 01, 2018
Tweet
Share
More Decks by Labcodes Software Studio
See All by Labcodes Software Studio
Sua aplicação web aguenta o tranco?
labcodes
0
25
Como Gerenciar Trocas de Contexto em tempo de Pandemia
labcodes
0
56
Débito Técnico: Porque isso vai estragar teu Software
labcodes
1
370
80 tiros não são disparados por engano
labcodes
0
66
Aprendendo com os erros
labcodes
3
190
Usando recursos avançados da ORM do Django para consultas mais eficientes
labcodes
2
280
Making smarter queries with advanced ORM resources
labcodes
2
210
Explorando QuerySets do Django
labcodes
2
200
O que desenvolvedores deveriam aprender sobre design
labcodes
0
270
Other Decks in Programming
See All in Programming
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.2k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
130
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
840
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
WindowInsetsだってテストしたい
ryunen344
1
190
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
270
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Code Reviewing Like a Champion
maltzj
524
40k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Raft: Consensus for Rubyists
vanstee
140
7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Facilitating Awesome Meetings
lara
54
6.4k
How to Ace a Technical Interview
jacobian
277
23k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building an army of robots
kneath
306
45k
KATA
mclloyd
29
14k
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