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
0
1.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
270
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
600
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
720
Web Componentsの動向とPolymer
honda
4
2.3k
Other Decks in Programming
See All in Programming
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
私のEbitengineの第一歩
qt_luigi
0
450
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
API Platform for Laravel
dunglas
0
320
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
Jakarta EE meets AI
ivargrimstad
1
520
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Swiftコードバトル必勝法
toshi0383
0
170
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
GoのIteratorに詳しくなってしまう
inatonix
1
200
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
Building Applications with DynamoDB
mza
90
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
BBQ
matthewcrist
83
9.2k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Code Review Best Practice
trishagee
62
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Visualization
eitanlees
142
15k
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 !!