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
660
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.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
自力でTTSモデルを作った話
zgock999
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
技術を改善し続ける
gumioji
0
180
良いコードレビューとは
danimal141
7
4.5k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
Learning Kotlin with detekt
inouehi
1
180
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
520
GoとPHPのインターフェイスの違い
shimabox
2
210
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
630
Featured
See All Featured
Visualization
eitanlees
146
15k
Six Lessons from altMBA
skipperchong
27
3.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Gamification - CAS2011
davidbonilla
80
5.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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 !!