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
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
5つのアンチパターンから学ぶLT設計
narihara
1
170
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
160
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
Featured
See All Featured
Scaling GitHub
holman
460
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Site-Speed That Sticks
csswizardry
10
690
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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!