Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
0
700

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

Other Decks in Programming

See All in Programming
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
380
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
160
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
180
AIコーディングエージェント（skywork）
Avatar for kondai kondai24
0
210
Java 25, Nuevas características
Avatar for Carlos Zela Bueno czelabueno
0
110
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
120
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
19k
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
170
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
220
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
330
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
4
1.2k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.8k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
150
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
40k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
440
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.4k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
310
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
93
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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