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

styled-components or emotion?

ponday
January 25, 2019
Programming
0
550

styled-components or emotion?

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

ponday

January 25, 2019
Tweet

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
470
TypeScriptの型表現
honda
10
2.6k
Web Componentsの今
honda
1
320
これまでのReact、これからのReact
honda
0
190
Gatsbyお試し
honda
0
89
Web ComponentsとAngular
honda
0
97
Atomic Design周りについての私見
honda
1
410
え、まだWeb Componentsを未来の技術だと思ってるの？
honda
2
570
Web Componentsの動向とPolymer
honda
4
1.7k

Other Decks in Programming

See All in Programming
Swift Concurrency Next Step
shiz
7
1.1k
JUnit 5 wird 5
marcphilipp
1
150
Drupal 10 from the pov of a Symfony 6 core-contributor
nicolasgrekas
1
310
Whyから始めよう！スクラムチームが力強く前に進むための「なぜやるのか」を考える
psj59129
1
480
YJIT: Dive into Ruby's JIT compiler written in Rust / Rust.Tokyo 2022
k0kubun
1
1k
比較演算を壊してみる / php-break-comparison
yammerjp
1
170
Comparing Native Java REST API Frameworks - Seattle JUG 2022
mraible
PRO
1
200
iOSDC2022 - iPadOSDC Japan 2022
hcrane
2
1.3k
Swift Concurrency時代のiOSアプリの作り方
koher
13
2.1k
Micro Frontends for Java Microservices - Dublin JUG 2022
mraible
PRO
1
370
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
manfredsteyer
PRO
0
110
SceneKit AND SwiftUI
akkeylab
0
260

Featured

See All Featured
Done Done
chrislema
175
14k
The Art of Programming - Codeland 2020
erikaheidi
34
11k
Making the Leap to Tech Lead
cromwellryan
113
7.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
640
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Bash Introduction
62gerente
598
210k
How GitHub (no longer) Works
holman
298
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1k
Visualization
eitanlees
126
12k
The Cult of Friendly URLs
andyhume
68
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
656
120k
Clear Off the Table
cherdarchuk
79
290k

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