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

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
0
680

styled-components or emotion?

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

ponday

January 25, 2019
Tweet

More Decks by ponday

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

Other Decks in Programming

See All in Programming
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
390
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
120
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
430
Benchmark
Avatar for 송상윤 sysong
0
200
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
2
630
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
Avatar for Tomohiro Inoue tomoino
0
160
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
960
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
790
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
360
Create a website using Spatial Web
Avatar for Akio Itaya akkeylab
0
290
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
200

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k

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 !!