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

styled-components or emotion?

Avatar for ponday ponday
January 25, 2019
Programming
720
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.6k
TypeScriptの型表現
Avatar for ponday honda
10
3.1k
Web Componentsの今
Avatar for ponday honda
1
470
これまでのReact、これからのReact
Avatar for ponday honda
0
340
Gatsbyお試し
Avatar for ponday honda
0
130
Web ComponentsとAngular
Avatar for ponday honda
0
150
Atomic Design周りについての私見
Avatar for ponday honda
1
790
え、まだWeb Componentsを未来の技術だと思ってるの？
Avatar for ponday honda
2
880
Web Componentsの動向とPolymer
Avatar for ponday honda
4
2.7k

Other Decks in Programming

See All in Programming
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
220
Hive Metastoreを通して学ぶIceberg REST Catalog ― 仕様から実装まで
Avatar for okumin okumin
0
260
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
120
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
Avatar for おおいし bicstone
2
840
今さら聞けないCancellationToken
Avatar for tkym htkym
0
170
AWSはOSSをどのように 考えているのか？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
130
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
320
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
160
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
390
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
1
670
Agentic AI & UI: Arcitecture, HITL, Emerging Standards
Avatar for Manfred Steyer manfredsteyer
PRO
0
130

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
370
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
290
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
280
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
54k

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