Styled-components — artalar — React Moscow Meetup #4

Transcript

1. www.csssr.ru 1 фанат JS, покоритель DX, любитель OS, CS мечтатель Артём Арутюнян @artalar
2. www.csssr.ru 2 Styled Components библиотека для построения атомарных компонентов отображения • Знакомство; • Архитектура; • Проблемы и решения; • API; • DX и окружение; • Известные проблемы; • Обзор использования в больших проектах; • Ссылки на материалы; • Вопросы.
3. Артём Арутюнян @artalar www.csssr.ru 3 Более 20 публичных production приложений 16к звёзд на GitHub Сотня связанных материалов Компоненты, гриды, хелперы, тесты, шаблоны, реальные приложения в open source. Styled Components styled-components в массах
4. Артём Арутюнян @artalar www.csssr.ru 4 Styled Components styled-components в массах А вы всё ещё на static build css? Более 20 публичных production приложений 16к звёзд на GitHub Сотня связанных материалов Компоненты, гриды, хелперы, тесты, шаблоны, реальные приложения в open source.
5. Артём Арутюнян @artalar www.csssr.ru 5 Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress История и предпосылки CSS in JS Страдания от решения проблемы динамических стилей ES6 и template literals Компонентный подход
6. Артём Арутюнян @artalar 6 • HTML, CSS, JS; • JSX; • ООП — это про объекты и их взаимодействие; • Компонентный подход; • Абстракция над задачей, а не технологией; • SC делает атомарные компоненты отображения правильно. Архитектура Новый взгляд www.csssr.ru
7. Артём Арутюнян @artalar 7 Архитектура Новый взгляд www.csssr.ru
8. Артём Арутюнян @artalar 8 Архитектура Новый взгляд www.csssr.ru
9. Артём Арутюнян @artalar 9 Архитектура Новый взгляд www.csssr.ru
10. Артём Арутюнян @artalar www.csssr.ru 10 Новый Взгляд Styled-components. Архитектура Separation of Concenrs JS HTML CSS Button Date Picker Modal List List-Item Media
11. Артём Арутюнян @artalar 11 1. Динамические стили (через классы или инлайн); 2. Коллизия имен (глобальный скоуп); 3. Сахар: константы, селекторы (Sass, Less нужно учить); 4. Dead CSS (сложно отследить); 5. Critical CSS; 6. Сборка. Проблемы и решения Проблемы до styled-components www.csssr.ru
12. Артём Арутюнян @artalar 12 1. Стили — функция от аргументов; 2. Динамическая генерация классов (+ их минификация); 3. Вся мощь JS; 4. Компонентный подход; 5. Lazy loading; 6. Runtime. Проблемы и решения Решения со styled-components www.csssr.ru
13. Артём Арутюнян @artalar 13 • Inline-стили (нет); • Всё, что было сказано выше; • CSS — это не язык программирования, а язык описания внешнего вида документа; • Houdini; • И вообще, это хотели ещё в 2006. Проблемы и решения Почему CSS in JS www.csssr.ru
14. Артём Арутюнян @artalar 14 API API ‘’Styled’’ www.csssr.ru
15. Артём Арутюнян @artalar 15 API API ‘’styled.attrs’’ www.csssr.ru
16. www.csssr.ru 16 Styled Components API селекторы • sc-block; • sc-selector; • sc-declaration; • sc-property; • sc-value.
17. Артём Арутюнян @artalar 17 • styled().extend deprecated; • styled().withComponent; • styled().innerRef; • import { css } from 'styled-components'; • import { keyframes } from 'styled-components'; • import { injectGlobal } from 'styled-components'; • import { withTheme } from 'styled-components'; • import { isStyledComponent } from ‘styled-components'. API www.csssr.ru
18. Артём Арутюнян @artalar 18 • Документация по экосистеме с “awesome list”; • Stylelint и подсветка кода; • babel-plugin-styled-components; • Yoga, React Native; • yo-yo, choo.js. DX и окружение www.csssr.ru
19. Артём Арутюнян @artalar 19 • Привязка к фреймворку React.js; • Размер бандла: 42.3kB minified, 15.8 kB minified + gzipped; • Дебаг миксинов; • Свойства с зарезервированными названиями. • Постпроцессоры? • Типизация? • Скорость? Известные проблемы www.csssr.ru
20. Артём Арутюнян @artalar 20 Real world app www.csssr.ru Темизация • Константы; • Анимации; • Миксины; • Фабрики миксинов; • polished; • styled-system; • Rebass.
21. Артём Арутюнян @artalar 21 • Константы; • Анимации; • Миксины; • Фабрики миксинов; • polished; • styled-system; • Rebass. Real world app www.csssr.ru Темизация
22. Артём Арутюнян @artalar 22 Real world app www.csssr.ru Темизация • Константы; • Анимации; • Миксины; • Фабрики миксинов; • polished; • styled-system; • Rebass.
23. Артём Арутюнян @artalar 23 Real world app www.csssr.ru Темизация • Константы; • Анимации; • Миксины; • Фабрики миксинов; • polished; • styled-system; • Rebass.
24. Артём Арутюнян @artalar 24 Real world app www.csssr.ru Cелекторы
25. Артём Арутюнян @artalar 25 Real world app www.csssr.ru Cелекторы
26. Артём Арутюнян @artalar 26 Real world app www.csssr.ru Cелекторы
27. Артём Арутюнян @artalar 27 • Официальная документация; • Сделано со styled-components; • Краткая история CSS in JS; • Про CSS Houdini; • UI-kit Rebass; • Вес собранного пакета библиотеки; • Файл темы в material-ui; • Описание последнего мажорного обновления styled-components. Ссылки на материалы по теме www.csssr.ru
28. Артём Арутюнян @artalar 28 Спасибо за внимание www.csssr.ru
29. Артём Арутюнян @artalar 29 Вопросы www.csssr.ru