Styled-components. Что? Когда? И зачем?
0 likes118 views
Документ представляет собой руководство по использованию библиотеки styled-components, включая ее функционал и преимущества. Основное внимание уделяется тому, как styled-components упрощает разработку, обеспечивает кроссплатформенность и адаптивную верстку. Также рассматриваются аспекты производительности и внутренние механизмы работы библиотеки.
Styled-components. Что? Когда? И зачем?
- 2. STYLED-COMPONENTS Что? Когда? И зачем? MINIQ #15 Даниил Янковский 30.05.2019
- 3. Даниил Янковский Место работы: EPAM Должность: Software Engineer
- 4. План • Что это такое? • Почему именно styled-components? • Как это работает? • Показать примеры • Когда и зачем?
- 5. История...
- 9. Почему styled-components? • Большое сообщество • Удобство разработки (Хорошая документация) • Скорость работы • Кроссплатформенность • Реализация адаптивной вёрстки • Серверный рендеринг • Модульные тесты
- 10. Сравнение Oct 12, 2014 Jan 9, 2015 Aug 16, 2016 May 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. Отрисовка компонента
- 22. Когда и зачем?