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
94
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
57
Evoluindo aplicações legadas
viniciusdacal
0
54
Other Decks in Programming
See All in Programming
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.9k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.7k
TCA魔法学入門🪄
dazy
0
280
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
Ruby製社内ツールのGo移行
bgpat
2
260
Understanding Ast By Looking
inouehi
0
120
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
Web development in the modern age
philhawksworth
201
10k
The Language of Interfaces
destraynor
150
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Designing for humans not robots
tammielis
247
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Bash Introduction
62gerente
604
210k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
KATA
mclloyd
14
11k
Designing with Data
zakiwarfel
94
4.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Atom: Resistance is Futile
akmur
258
25k
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!