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
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
250
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
830
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.9k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
150
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Visualization
eitanlees
146
16k
Designing for Performance
lara
610
69k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Bash Introduction
62gerente
613
210k
Code Review Best Practice
trishagee
69
19k
A better future with KSS
kneath
238
17k
Building Applications with DynamoDB
mza
95
6.5k
Music & Morning Musume
bryan
46
6.6k
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!