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
630
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.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
280
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
620
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
740
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
cmp.Or に感動した
otakakot
3
200
CSC509 Lecture 13
javiergs
PRO
0
110
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
960
Jakarta EE meets AI
ivargrimstad
0
670
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
flutterkaigi_2024.pdf
kyoheig3
0
150
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Building Adaptive Systems
keathley
38
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Being A Developer After 40
akosma
87
590k
Become a Pro
speakerdeck
PRO
25
5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Producing Creativity
orderedlist
PRO
341
39k
Automating Front-end Workflow
addyosmani
1366
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
We Have a Design System, Now What?
morganepeng
50
7.2k
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 !!