$30 off During Our Annual Pro Sale. View Details »

styled-components or emotion?

ponday
January 25, 2019

styled-components or emotion?

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

ponday

January 25, 2019
Tweet

More Decks by ponday

Other Decks in Programming

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