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
620
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
0
1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
370
これまでのReact、これからのReact
honda
0
260
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
570
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
710
Web Componentsの動向とPolymer
honda
4
2.3k
Other Decks in Programming
See All in Programming
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
유연한 Composable 설계
l2hyunwoo
0
380
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
小さな開発会社を作った理由
polidog
0
1.9k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
CSC307 Lecture 07
javiergs
PRO
0
220
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Featured
See All Featured
Code Review Best Practice
trishagee
58
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
For a Future-Friendly Web
brad_frost
173
9.2k
Six Lessons from altMBA
skipperchong
24
3.2k
Unsuck your backbone
ammeep
666
57k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Visualization
eitanlees
139
14k
Designing for Performance
lara
604
67k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
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 !!