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

styled-components or emotion?

52604f94a6d2172df2cad5ab45189940?s=47 ponday
January 25, 2019
Programming
0
500

styled-components or emotion?

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

52604f94a6d2172df2cad5ab45189940?s=128

ponday

January 25, 2019
Tweet

More Decks by ponday

See All by ponday
52604f94a6d2172df2cad5ab45189940?s=48 honda
0
290
52604f94a6d2172df2cad5ab45189940?s=48 honda
10
2.5k
52604f94a6d2172df2cad5ab45189940?s=48 honda
1
310
52604f94a6d2172df2cad5ab45189940?s=48 honda
0
150
52604f94a6d2172df2cad5ab45189940?s=48 honda
0
75
52604f94a6d2172df2cad5ab45189940?s=48 honda
0
57
52604f94a6d2172df2cad5ab45189940?s=48 honda
1
340
52604f94a6d2172df2cad5ab45189940?s=48 honda
2
500
52604f94a6d2172df2cad5ab45189940?s=48 honda
4
1.4k

Other Decks in Programming

See All in Programming
6e704ad00f166b420eba3d174713c82b?s=48 urushiyama
0
380
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
320
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
1.4k
491bde095856f2097f08f8034dabd998?s=48 tajimathememer
0
230
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
2
370
E41c91eb3efe7a796b8ae20c51a07f06?s=48 takoba
1
200
1bc80e2eee2adeaa8bb577798d92e9d0?s=48 antonarhipov
0
130
D8da26d8c2f31098cb33d5d6087e6668?s=48 shuheiyamada
0
450
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho
0
190
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
130
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
1
250
45fec3b965f9269bc8d6d2cf5bd93a13?s=48 haru067
2
270

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
171
7.7k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
8.1k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
21
1.1k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
348
27k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
227
8.9k

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