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
styled-components or emotion?
Search
ponday
January 25, 2019
Programming
0
690
styled-components or emotion?
React勉強会@福岡 vol.1(2019/01/25)の発表資料3つめです。
すごく簡易的な検証なのでいろいろなシーンで追加の検証をしていきたい。
ponday
January 25, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.3k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
320
Gatsbyお試し
honda
0
120
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
720
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
840
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
3
1.3k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
What's new in Spring Modulith?
olivergierke
1
160
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
500
Go言語はstack overflowの夢を見るか?
logica0419
0
380
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
640
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
440
チームの境界をブチ抜いていけ
tokai235
0
190
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
160
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Code Review Best Practice
trishagee
72
19k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf 2023
tenderlove
30
1.3k
Mobile First: as difficult as doing things right
swwweet
225
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
The Invisible Side of Design
smashingmag
302
51k
We Have a Design System, Now What?
morganepeng
53
7.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
styled-components or emotion ? React勉強会@福岡 vol.1 / Jan 25th, 2019
ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like
: TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます
Reactでよく聞くCSS in JS
styled-components
emotion
で、 結局どっち使えばいいの?
styled-components vs emotion - styled-componentsのほうが人気っぽい - GitHubのstar数はstyled-componentsのほうが多い - emotionも伸びてきている -
emotionのほうが後発で高機能 - 開発はどちらもアクティブ - styled-components v4で速くなったらしい
検証してみた
速度検証 - スタイル付きのリスト(1万件)の表示速度を図る - componentWillMount 〜 componentDidMountまで - 10回平均 -
以下の3つのコードで検証 - styled-components - emotion (CSS style) - emotion (styled)
styled-components
emotion (CSS style)
emotion (styled)
結果 styled-components emotion (CSS style) emotion (styled) キャッシュなし キャッシュあり 762ms
1103ms 507ms 596ms 1033ms 421ms
検証 - @emotion/styledが速そう? - styled-componentsも実用レベル - 意外とemotion標準のオブジェクト型が遅い - 簡易的な検証なのでいろいろ試していきたい
Thank you !!