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
Rethinking Components
Search
Vinicius Dacal
June 02, 2016
Programming
0
97
Rethinking Components
Repensando sua aplicação com componentes e React.
Vinicius Dacal
June 02, 2016
Tweet
Share
More Decks by Vinicius Dacal
See All by Vinicius Dacal
Reducing boilerplate with Redux Arc
viniciusdacal
0
64
Evoluindo aplicações legadas
viniciusdacal
0
60
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Porting a visionOS App to Android XR
akkeylab
0
470
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Optimizing for Happiness
mojombo
379
70k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Being A Developer After 40
akosma
90
590k
How GitHub (no longer) Works
holman
314
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
690
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
COMPONENTS RETHINKING
VINICIUS DACAL @vinicius_dacal viniciusdacal
Desenvolvedor Front-end
None
RETHINK APPLICATION
None
RETHINK COMPONENTS
CONTAINER & PRESENTATIONAL
CONTAINER COMPONENTS How things work Subscribe to state Dispatch actions
Aware of behavior
PRESENTATIONAL COMPONENTS How things look Read data from props Invoke
callbacks from props Unaware of behavior
None
None
CRIANDO COMPONENTES DE FORMA ISOLADA
REACT STORYBOOK
None
None
CSS!
OLD WAY
None
None
NÃO ESCALA
Namespace Global (Isolamento) Eliminação de código morto Dependência da ordem
do carregamento Dificuldade de configuração
OOCSS, SMACSS, BEM
CSS PROCESSORS Less Sass Stylus PostCSS cssnext
REACT WAYS
None
INLINE STYLES
None
VANTAGENS Estilo isolado sem seletores Seu estilo fica independente de
ordem Eliminação de código morto Extremamente expressivo
PROBLEMAS DESSA ABORDAGEM Pseudo Elements Pseudo States Media Queries
LIBS Radium React Style
Radium
React Styles
OUTRA ABORDAGEM JSS Aphrodite
JSS
Aphrodite
VANTAGENS EM COMPARAÇÃO AO INLINE Rules Caching Rules Sharing All
css features included Performance
CSS MODULES RULES ARE LOCAL BY DEFAULT
None
None
QUAL A MELHOR ABORDAGEM?
NO ONE KNOWS YET
OBRIGADO!