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

styled-components or emotion?

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
550
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
140
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
110
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
19k
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.5k
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
390
Cloudflare is Agents
Avatar for chimame chimame
0
170
「人を評価する AI」の 設計と実装 
Avatar for 奈良亮耶 ryoyanara
0
210
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
500
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
980
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
150
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
520

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
240
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
56k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
490
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
210
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
350

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