Vladimir Grinenko - "Dependencies in component web done right"
0 likes193 views
Документ описывает подходы к сборке фронтенд-компонентов, включая декларативное многослойное наследование и использование современных технологий, таких как React и Web Components. Он выделяет проблемы ручного труда и неудобнические пути подключения компонентов, предлагая решения для улучшения процесса сборки. Также приводятся примеры использования библиотеки и философии BEM для управления зависимостями и стилизацией компонентов.
![index.decl.js
['button', 'link']
Стало
17
› Много ручной работы
› Вербозно
› Захардкоджены пути
› Медленно
› Мухи и котлеты](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-17-320.jpg)
![Объединение
24
Декларация 1 Декларация 2 Декларация 3
[ [ [
'header', 'header', 'header',
'button', 'button', 'button',
'link', 'link',
'attach', + = 'attach',
'menu', 'menu',
'image', 'image',
'checkbox', 'checkbox',
'popup' 'popup',
'textarea' 'textarea'
] ] ]](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-24-320.jpg)
![Пересечение
25
Декларация 1 Декларация 2 Декларация 3
[ [ [
'header', 'header', 'header',
'input', 'menu',
'link', ⋂ 'button', =
'attach', 'input',
'checkbox', 'image',
'textarea', 'popup',
'footer' 'footer' 'footer'
] ] ]](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-25-320.jpg)
![Вычитание
26
Декларация 1 Декларация 2 Декларация 3
[ [ [
'button', 'button',
'checkbox', 'checkbox',
'textarea', 'textarea',
'suggest' 'suggest'
'header',
- 'input', =
'button',
'menu'
] ] ]](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-26-320.jpg)
![my-component.deps.js
['button', 'link']
Стало
29](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-29-320.jpg)
![my-component.deps.js
{
mustDeps: ['button'],
shouldDeps: ['link']
}
Стало
30](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-30-320.jpg)
![['button']
Стало
42](https://image.slidesharecdn.com/grinenko-170417071743/85/Vladimir-Grinenko-Dependencies-in-component-web-done-right-42-320.jpg)
Vladimir Grinenko - "Dependencies in component web done right"
- 1. 1
- 2. 2
- 3. 3
- 4. 4
- 5. 5 THE FOLLOWING VIDEOHAS BEEN APPROVED FOR ВЕРСТАЛЬЩИКИ AND НОРМАЛЬНЫЕ РАЗРАБОТЧИКИ ALIKE BY UNITED DEV CONF THE FOLLOWING TALK HAS BEEN RATED RESTRICTED UNDER 18 REQUIRES NO PARENTLY SUPERVISION OPENSOURCING ELEMENTS INCLUDING SOURCE CODE, SLIDES AND CLEVER THOUGHTS IS HIGHLY APPRECIATED Я
- 6. › Как обычно собирается фронтенд › Как сборку можно улучшить › Декларативное множественное наследование › Слои для компонентов › Как начать использовать новое знание О чём речь 6
- 7. › Bootstrap › БЭМ › React › Web Components › тысячи их Компонентный подход везде 7
- 8. 8
- 9. 9
- 10. › Найти все компоненты на FS › Написать require/import в каждой технологии Сборка при компонентном подходе 10
- 11. › Собираем лишнее › Не можем гарантировать порядок Найти все компоненты на FS 11
- 12. › Много ручной работы › Вербозно › Захардкоджены пути › Медленно › Мухи и котлеты Написать require/import в каждой технологии 12
- 13. 13
- 14. 14
- 15. 15
- 16. index.css @import "../../path/to/button/button.css"; @import "../../path/to/link/link.css"; /* project styles */ Было 16 index.js require('../../path/to/button/button.js'); require('../../path/to/link/link.js'); /* project logic */
- 17. index.decl.js ['button', 'link'] Стало 17 › Много ручной работы › Вербозно › Захардкоджены пути › Медленно › Мухи и котлеты
- 18. › Не говорим, где физически находятся файлы › Не говорим, какие технологии нужны Декларируем бандл в терминах компонентов 18
- 19. Декларация — что и в каком порядке подключать в сборку
- 20. › Интроспекция с файловой системы › Написание руками › Генерация по описанию страницы Получение декларации 20
- 21. Генерация по описанию страницы 21 <button class="button"></button> <a class="link"></a>
- 23. › Объединение › Пересечение › Вычитание Алгебра деклараций 23
- 24. Объединение 24 Декларация 1 Декларация 2 Декларация 3 [ [ [ 'header', 'header', 'header', 'button', 'button', 'button', 'link', 'link', 'attach', + = 'attach', 'menu', 'menu', 'image', 'image', 'checkbox', 'checkbox', 'popup' 'popup', 'textarea' 'textarea' ] ] ]
- 25. Пересечение 25 Декларация 1 Декларация 2 Декларация 3 [ [ [ 'header', 'header', 'header', 'input', 'menu', 'link', ⋂ 'button', = 'attach', 'input', 'checkbox', 'image', 'textarea', 'popup', 'footer' 'footer' 'footer' ] ] ]
- 26. Вычитание 26 Декларация 1 Декларация 2 Декларация 3 [ [ [ 'button', 'button', 'checkbox', 'checkbox', 'textarea', 'textarea', 'suggest' 'suggest' 'header', - 'input', = 'button', 'menu' ] ] ]
- 28. my-component.css @import "../../path/to/button/button.css"; @import "../../path/to/link/link.css"; /* my-component styles */ Было 28 my-component.js require('../../path/to/button/button.js'); require('../../path/to/link/link.js'); /* my-component logic */ Пример
- 32. 32
- 34. Модификаторы 34 А шаблоны? <button class="button"> <button class="button button_type_submit"> <button class="button button_type_submit button_disabled">
- 36. › Дешево обновлять библиотечный код › Разделять общие части реализации блоков от частных › Разделять проект на платформы › Разный код в разработке и продакшене › Держать темы отдельно от общей логики Слои позволяют 36
- 37. library-components/ # Уровень библиотеки input/ button/ # Базовая реализация блока button popup/ project/ # Уровень проекта input/ button/ # Измененная реализация блока button header/ Пример 37
- 38. common.blocks/button/button.css .button { height: 25px; } touch.block/button/button.css .button { height: 50px; tap-highlight-color: #ccc; } Пример 38
- 39. 39
- 41. @import "library/common.blocks/button/button.css"; @import "library/touch.block/button/button.css"; @import "library/design/common.block/button/button.css"; @import "library/design/touch.block/button/button.css"; @import "project/common.blocks/button/button.css"; @import "project/touch.blocks/button/button.css"; Было 41 И аналогично для JS.
- 43. 43
- 44. import Button from 'b:button'; Как еще может быть 44
- 45. Как начать использовать новое знание
- 46. › Для React + Пример › Для всех остальных + Пример Как начать использовать 46
- 47. › bem.info/methodology/build › bem.info/forum › t.me/bem_ru › слайды Что дальше 47
- 48. 48
- 49. Ваши вопросы!
- 50. Владимир Гриненко Руководитель группы общих компонентов интерфейсов tadatuta@yandex-team.ru tadatuta tadatuta tadatuta