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

styled-components or emotion?

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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.6k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
460
これまでのReact、これからのReact
Avatar for ponday honda
0
320
Gatsbyお試し
Avatar for ponday honda
0
130
Web ComponentsとAngular
Avatar for ponday honda
0
140
Atomic Design周りについての私見
Avatar for ponday honda
1
770
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
870
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.7k

Other Decks in Programming

See All in Programming
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
180
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
160
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
650
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
140
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
810
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
210
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
440
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
450
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.7k

Featured

See All Featured
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
53
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
920
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
170
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k

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