Styled-components. Что? Когда? И зачем?

Презентация подготовлена по материалам выступления Даниила Янковского на витебском MiniQ#15, который был проведен 30 мая 2019:
https://vk.com/miniq15;
https://communities.by/events/miniq-vitebsk-15.

Про доклад:
Введение в CSS-in-JS. На примере styled-components будет рассказано о преимуществах данного подхода в React приложениях, сравнительный анализ приложений на CSS, а также плюсы/минусы. В режиме реального времени напишем приложение с использованием styled-components.

1. communities.by

2. STYLED-COMPONENTS
Что? Когда?
И зачем?
MINIQ #15 ДаниилЯнковский
30.05.2019

3. Даниил Янковский
Место работы: EPAM
Должность: Software Engineer

4. План
•Что это такое?
•Почемуименно styled-components?
•Как это работает?
•Показать примеры
•Когда и зачем?

5. История...

6. Чтоэтотакое?

7. Ещёоднаистория...

8. Вьетнам. Флэшбэки.
+ =

9. Почему styled-components?
•Большое сообщество
•Удобство разработки (Хорошая документация)
•Скорость работы
•Кроссплатформенность
•Реализация адаптивной вёрстки
•Серверный рендеринг
•Модульные тесты

10. Сравнение
Oct 12, 2014 Jan 9, 2015 Aug 16, 2016May 27, 2017
stars
forks
issues
used by
4880 6975 23971 8032
2039264107
272 318 1411 494
166 21541 178 13 896 20 561

11. Удобство разработки
Tagged Literal
Templates
(as ex. styled-components)
Object model
(as ex. Radium)

12. Удобство разработки
Наследование
TODO:добавить картинку

13. Удобство разработки
Адаптив
TODO:добавить картинку

14. Удобство разработки
Styled-components CSS
TODO:добавить картинку TODO:добавить картинку

15. Сравнение
Styled-components JSS
TODO:добавить картинку TODO:добавить картинку

16. Сравнение
Styled-components Radium
TODO:добавить картинку TODO:добавить картинку

17. Сравнение
Styled-components Emotion
TODO:добавить картинку TODO:добавить картинку

18. Скорость работы
41
16
15 15
RADIUM STYLED-
COMPONENTS
JSS EMOTION
СКОРОСТЬ МОНТИРОВАНИЯ 1000
УНИКАЛЬНЫХ КОМПОНЕНТОВ В МС

19. Как это работает?
1.Объявляете styled-component
1.Создаётся внешний контекст для компонента
2.Создаётся внутрений контекст, для использования
тем, только если вы использовали Провайдер Темы
2.Разбирает стили для компонента
1.Создаётся уникальное имя класса
2.Собирает стили для дальнейшего добавления
префиксов

20. Как это работает?
3.Добавление автопрефиксов
1.Собранные во 2 пункты стили, передаются в Stylis
2.Stylisвозвращает стили с префиксами относительно
текущего режима сборки
1.Production:только для текущего браузера
2.Development: все возможные стили
4.Добавление стилей
1.Создаёт или ищет тег <style>
2.Стили добавляются только, когда компонент
задействован на странице.
3.Стили добавляются относительно режима сборки:
1.Production: используется CSSStyleSheet.insertRule()
2.Development : используетсяNode.appendChild()
5.Отрисовка компонента

21. Немножечко покодим :)

22. Когда и зачем?

23. Спасибо за внимание!