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

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
730
0

styled-components or emotion?

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

Avatar for ponday

ponday

January 25, 2019

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
Avatar for ponday honda
1
1.7k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
480
これまでのReact、これからのReact
Avatar for ponday honda
0
340
Gatsbyお試し
Avatar for ponday honda
0
140
Web ComponentsとAngular
Avatar for ponday honda
0
160
Atomic Design周りについての私見
Avatar for ponday honda
1
810
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
890
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.8k

Other Decks in Programming

See All in Programming
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
110
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
0
290
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
1
250
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
960
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
2
1.5k
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
650
T3DD26: From RAGs to Riches
Avatar for Martin Helmich martinhelmich
0
140
30年振りにコンパイラの定数整数除算を改善した
Avatar for herumi herumi
9
4.4k
Cloudflare is Agents
Avatar for chimame chimame
0
190
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
800
Go 1.27からのGODEBUG / Go 1.27 リリースパーティ #go127party
Avatar for mazrean mazrean
0
290

Featured

See All Featured
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
270
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
200
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k

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