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
690

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.3k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
430
これまでのReact、これからのReact
Avatar for ponday honda
0
320
Gatsbyお試し
Avatar for ponday honda
0
120
Web ComponentsとAngular
Avatar for ponday honda
0
130
Atomic Design周りについての私見
Avatar for ponday honda
1
710
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
830
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.6k

Other Decks in Programming

See All in Programming
Cache Me If You Can
Avatar for RyuNen344 ryunen344
2
3k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
22
5.9k
GitHubとGitLabと AWS CodePipelineで CI/CDを組み比べてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
4
250
為你自己學 Python - 冷知識篇
Avatar for 高見龍 eddie
1
350
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
120
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
200
楽して成果を出すためのセルフリソース管理
Avatar for clipnote clipnote
0
190
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
3
1.5k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
Avatar for JaiChangPark itsmedreamwalker
0
150
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
710
rage against annotate_predecessor
Avatar for Junichi Kobayashi junk0612
0
170
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
480

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.2k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.1k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M

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