Upgrade to Pro — share decks privately, control downloads, hide ads and more …

styled-components or emotion?

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ponday ponday
January 25, 2019
Programming
720
0

styled-components or emotion?

React勉強会@福岡 vol.1（2019/01/25）の発表資料3つめです。
すごく簡易的な検証なのでいろいろなシーンで追加の検証をしていきたい。

Avatar for ponday

ponday

January 25, 2019

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
Avatar for ponday honda
1
1.6k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
470
これまでのReact、これからのReact
Avatar for ponday honda
0
340
Gatsbyお試し
Avatar for ponday honda
0
130
Web ComponentsとAngular
Avatar for ponday honda
0
150
Atomic Design周りについての私見
Avatar for ponday honda
1
790
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
880
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.7k

Other Decks in Programming

See All in Programming
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
310
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
250
エラー処理の温故知新 / history of error handling technic
Avatar for nakaryo ryotanakaya
6
1.6k
Road to RubyKaigi: Play Hard(ware)
Avatar for makicamel makicamel
1
470
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
110
NakouPAY説明用
Avatar for Annouim0 annouim0
0
270
Back to the roots of date
Avatar for jinroq jinroq
0
480
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
260
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
19
5.5k
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
250
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
230
検索設計から
推論設計への重心移動と
Recall-First Retrieval
Avatar for po3rin po3rin
4
1.2k

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.1k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
440
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
330
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
530
It's Worth the Effort
Avatar for 3n 3n
188
29k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
110

Transcript

  1. styled-components or emotion ? React勉強会＠福岡 vol.1 / Jan 25th, 2019

    ponday (@ponday_dev)

  2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます

  3. Reactでよく聞くCSS in JS

  4. styled-components

  5. emotion

  6. で、 結局どっち使えばいいの？

  7. styled-components vs emotion - styled-componentsのほうが人気っぽい - GitHubのstar数はstyled-componentsのほうが多い - emotionも伸びてきている -

    emotionのほうが後発で高機能 - 開発はどちらもアクティブ - styled-components v4で速くなったらしい

  8. 検証してみた

  9. 速度検証 - スタイル付きのリスト（1万件）の表示速度を図る - componentWillMount 〜 componentDidMountまで - 10回平均 -

    以下の3つのコードで検証 - styled-components - emotion (CSS style) - emotion (styled)

  10. styled-components

  11. emotion (CSS style)

  12. emotion (styled)

  13. 結果 styled-components emotion (CSS style) emotion (styled) キャッシュなし キャッシュあり 762ms

    1103ms 507ms 596ms 1033ms 421ms

  14. 検証 - @emotion/styledが速そう？ - styled-componentsも実用レベル - 意外とemotion標準のオブジェクト型が遅い - 簡易的な検証なのでいろいろ試していきたい

  15. Thank you !!