От автора: я хочу полюбить styled components CSS, действительно хочу. На самом деле, меня настолько взволновали эти симпатичные новые вещи в версии 4, что я потратил одно дождливое субботнее утро на то, чтобы преобразовать проект из Vanilla CSS в стилизованные компоненты. Хотя я мог в это время прыгать в лужах.
Мой процесс: я переименовал файлы CSS в JS и заменил имена классов на экспортированные константы. То, что получилось в результате, довольно интересно:
Теперь: JS. Но раньше, CSS
(Люди, которые беспокоятся о «CSS в JS», успокойтесь — это просто другой механизм для определения отношений между узлами CSS и DOM.) Преобразовав классы CSS в «стилизованные компоненты», я включил их в разметку. До свидания className.
Эта <Panel> была интересной. Раньше это был компонент, который должен был только создавать div с тенью и возвращать дочерние элементы. И я хотел ввести класс, чтобы добавить для этого экземпляра немного дополнительного пространства внизу. В мире стилизованных компонентов я создаю базовый компонент, например, так:
А затем, когда я хочу «расширить» эту панель, чтобы создать вариант:
(Для записи потребовалось 12 минут рефакторинга, чтобы это не выглядело так странно.)
Еще один приятный момент заключается в том, что раньше мне пришлось бы разделять стили между CSS и JS (например, когда я хотел разместить элемент на основе данных).
Большинство вещей, которые влияют на отображение
Еще одна вещь, которая влияет на отображение
Теперь я могу просто создать компонент с именем <Mark>, и он обрабатывает все мои стили. Обратите внимание на свойство left, между top и bottom:
Все стили в одном месте
Я могу избавиться от этих свойств className и style, оставив супер чистый код:
Моему родительскому компоненту больше не нужно знать, как позиционировать элемент, поэтому в JavaScript больше нет синтаксиса CSS.
Эти изменения могут показаться незначительными, но они дают преимущества, как для «разделения проблем», так и для «декларативный прежде императивного».
И если вам интересно, медиа-запросы выглядят точно так же, как и должны выглядеть медиа-запросы:
Итак, все это очень здорово. Я преобразовал все приложение, сделал быстрый перерыв на лужи, и уже собирался нажать кнопку слияния…
Как я уже говорил, самый простой способ сделать быстрый сайт — не делать его медленным. Если вы не добавляете вещи, которые замедляют ваш сайт, он не будет медленным.
Поэтому вопрос, на который я должен был ответить, прежде чем начать слияние — будут ли компоненты замедлять мой сайт? Вот как быстро мое приложение переключается с одной страницы на другую (страница имеет ~2000 узлов DOM). Я повторил тест пять раз для Vanilla CSS и стилизованных компонентов:
Черт!
Это довольно заметное увеличение на 50%. Я ни за что не отправлю это своим пользователям, независимо от того, насколько мне нравится опыт разработки.
Что насчет начального времени загрузки? Пакет styled-components добавляет 13 Кбайт к моим 40 Кбайт ресурсов, поэтому это, вероятно, не очень хорошо — если вы читаете это с маленькими детьми поблизости, я предлагаю вам попросить их смотреть в другую сторону.
Дерьмо!
Черт возьми, это однозначное НЕТ для стилизованных компонентов. Это, наверное, урок номер 482 по производительности веб-сайта: иногда вам придется выбросить всю свою работу в мусор, чтобы ваш сайт оставался быстрым.
Но есть надежда.
Стилизованные компоненты версии 2 были быстрее, чем версия 1. Версия 3 была еще быстрее. Версия 4 еще быстрее. Может быть, в один прекрасный день компоненты станут такими же быстрыми, как vanilla CSS, и в этот день я буду доволен.
А для тех из вас, кто не похож на меня, возможно, производительность не такая уж большая проблема. Если ваш веб-сайт грузится 5 секунд, то увеличение до 5.1 — это не конец света. Или, может быть, вы кодируете информационный портал для Церкви Саентологии; вряд ли ваши пользователи скажут: «О, Боже мой, этот сайт такой медленный, я перехожу к христианам».
В этих двух случаях — и, возможно, в других — этот отличный опыт разработки может перевесить другие факторы.
Подводя итоги, мне нравятся стилизованные компоненты, но мои пользователи, вероятно, этого не разделят. Это конец части статьи, которая связана с заголовком статьи.
Теперь ко второй части. Я был бы самым счастливым парнем на вечеринке, если бы вы нашли диаграммы, используемые в этом посте, интересными. Это мой новый побочный проект.
Я называю это «панель разброса», и идея заключается в том, что она помогает вашему мозгу правильно понять то, что говорят данные, не вводя искусственную информацию, такую как средние значения.
(Я совершенно уверен, что я не первый, кто сделал это, но не смог найти подобного нигде. Может быть, кто-то просветит меня в комментариях.)
Чтобы показать, почему это важно, ниже приводятся два набора данных, где разница в средних значениях составляет 9%.
Справедливости ради, стоит отметить, что из данных первой диаграммы мы не можем сделать никакого вывода.
Диаграмма средних значений, демонстрирующая 9%-ное увеличение для «набора 2»
Изменения для «набора 1» по сравнению с «набором 2» не оказывают существенного влияния. Но посмотрите этот второй пример:
Диаграмма средних значений, демонстрирующая 9%-ное увеличение для «набора 2»
Мы можем с уверенностью сказать, что все, что было изменено в «наборе 2», оказало существенное влияние. Но если бы мы использовали диаграммы, показывающие средние значения, эти две диаграммы были бы идентичны.
Еще одна вещь: линии слегка размыты, поэтому, если у вас есть сотни значений, информация не теряется, когда две точки данных имеют одинаковое значение:
Таким образом, кажется сумасшествием приводить массивы данных к средним значениям и показывать их как единый бар, когда не так и сложно использовать информативные исходные данные.
(Даже выполнение причудливых маневров, таких как показ доверенных интервалов с ошибками, все равно уменьшает информативность исходных данных, заменяя их совокупностью, а затем накладывая некоторые дополнительные вещи).
Это на самом деле просто инструмент для меня, потому что я создаю много диаграмм и хочу знать, действительно ли какое-то изменение имеет значение. Но если вы хотите попробовать его и не имеете ничего против того, что когда-то я это заброшу, вот сайт, а вот репо.
(Профессиональный совет: вы можете вставить диапазон ячеек Excel в поле ввода, если у вас уже есть некоторые данные.)
ОК, это был очень плохо структурированный пост о стилизованных компонентах, а затем о типах диаграмм. Прежде чем я закончу, я хотел бы сказать людям, которые создали стилизованные компоненты — отличная работа. Извините, что я не пришел к выводу, что каждый должен их использовать. Я действительно считаю, что это отличная вещь, и с нетерпением ожидаю, что в недалеком будущем они достигнут скоростей Vanilla CSS.
Автор: David Gilbertson
Источник: https://medium.com/
Редакция: Команда webformyself.
