Анонс новой версии Styled Components v5: Звериный оскал

[comerc]

Styled-components и так уже была одной из самых быстрых CSS-in-JS библиотек, но теперь мы еще быстрее

Внезапно, reshadow benchmarks

[JustDont]

Звучит как мантра, ага. Я не знаю, как можно писать про «одну из самых быстрых», когда получить тормоза c styled-components всегда можно было на совершенно даже реалистичных количествах элементов (что оно 100 разных дивов у вас в бенчмарке рисует за 4 с лишним секунды — оно вот очень показательно).

[Carduelis]

Глянул пример — там используется какой-то сюр. Использование & > & селекторов априори будет медленным. Про это написано во всех подобных библиотеках. На практике, в продакшене, такое используется крайне редко. А когда используется, обычно это касается одного вложения, а не динамического.

Подобные селекторы, по факту, ломают весь подход модульности и отсутствия явных зависимостей, который был в свое время выведен в принципах БЭМ.

Так что этот бенчмарк исключительно для того, чтобы кинуть огород в данный подход.

[JustDont]

Использование & > & селекторов априори будет медленным.

Если это правило выкосить, то styled-components продолжает давать самые плохие по скорости результаты из представленных 4х либ. Даже если в других 3х либах его не убирать.

Я понимаю, что во имя любимой либы сову вам совсем не жалко, и если реальность расходится с вашими чувствами — то тем хуже для реальности, но всё же не надо так.

[skyline405]

Забавные результаты получаются.

Для тех, кому лень (все значения в ms):

Тест по 100 элементов

emotion
1. 559.8350
2. 1032.8100
3. 1398.5800
4. 1802.5850
5. 20314.7800

reshadow
1. 127.0800
2. 94.9450
3. 91.5700
4. 165.0350
5. 87.8300

styled-components
1. 4440.0950
2. 11411.1450
3. 19085.5300
4. 26732.8200
5. 34924.7750

styled-jss
1. 219.4550
2. 130.5550
3. 114.9750
4. 109.5250
5. 116.9450

Тест по 1000 элементов

emotion
1. 71179.1099
2. не дождался (более 2 минут)

reshadow
1. 858.4750
2. 500.0750
3. 421.8500
4. 425.3050
5. 424.2450

styled-components
1. не дождался (более 5 минут)

styled-jss
1. 2025.6500
2. 869.1750
3. 825.1700
4. 826.5250
5. 1009.4450

Самые стойкие, тест по 10000 элементов

reshadow
1. 7749.1400
2. 4351.0700
3. 3916.0950
4. 4137.9400
5. 4462.1500

styled-jss
1. 51991.8850
2. 40918.3700
3. 40199.5600
4. 45733.6900
5. 40006.5250

Что делать с этой информацией, решайте сами.

[Carduelis]

Повторюсь, это сферические в вакууме примеры тестирования самого слабого места этих (да и любых подобных) библиотек. Это вот подобные селекторы: & > & или & > div.

Во-первых, все пишут в своих документациях об осторожном их использовании, так как это влияет на производительность.

Во-вторых, это не про модульность и отсутствие сайд-эффектов. Нельзя писать такое в продакшене, так как этот дочерний каскадный стиль будет влиять на другие компоненты самым нежелательным образом.

Так, что, это как выстрелить себе в ногу. Можно, но совершенно не нужно.

[comerc]

Автор reshadow максимально отзывчивый. К тому же это отечественный производитель. Очень надеюсь, что вывезет. Я лично вступил в ряды ранних последователей. Посмотрите, какая многообещающая презентация.

[Carduelis]

Напишите что-нибудь о ней!
Я заметил, что в библиотеке используются css-переменные, что довольно-таки интересно в мире non-ie11.