styled-components or emotion?

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

Transcript

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

   View Slide

2. Profile
   - ponday (Honda, Yusuke)
   - 株式会社ベガコーポレーション エンジニア
   - Like : TypeScript / Elixir / Python etc…
   - 日曜フロントエンドエンジニア
   - 副業もやってます
   

   View Slide

3. Reactでよく聞くCSS in JS
   

   View Slide

4. styled-components
   

   View Slide

5. emotion
   

   View Slide

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

   View Slide

7. styled-components vs emotion
   - styled-componentsのほうが人気っぽい
   - GitHubのstar数はstyled-componentsのほうが多い
   - emotionも伸びてきている
   - emotionのほうが後発で高機能
   - 開発はどちらもアクティブ
   - styled-components v4で速くなったらしい
   

   View Slide

8. 検証してみた
   

   View Slide

9. 速度検証
   - スタイル付きのリスト（1万件）の表示速度を図る
   - componentWillMount 〜 componentDidMountまで
   - 10回平均
   - 以下の3つのコードで検証
   - styled-components
   - emotion (CSS style)
   - emotion (styled)
   

   View Slide

10. styled-components
    

    View Slide

11. emotion (CSS style)
    

    View Slide

12. emotion (styled)
    

    View Slide

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

    View Slide

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

    View Slide

15. Thank you !!
    

    View Slide