We live in a component-based world. Complex components are based on simple ones. This implies the need to express dependencies between them. Most existing methods have notable disadvantages: hardcode, refactoring complexity, large amount of manual work and so on. Let’s fix it!

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>

22. Алгебра деклараций

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'
] ] ]

27. Композиция.
Зависимости между
компонентами

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 */
Пример

29. my-component.deps.js
['button', 'link']
Стало
29

30. my-component.deps.js
{
mustDeps: ['button'],
shouldDeps: ['link']
}
Стало
30

31. Зависимость как
технология компонента

32. 32

33. Декларативное
множественное
наследование

34. Модификаторы
34
А шаблоны?
<button class="button">
<button class="button button_type_submit">
<button class="button button_type_submit button_disabled">

35. Слои для компонентов

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

40. 40
index.decl.js levels
index.deps.js
TMPLSCSS JS

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.

42. ['button']
Стало
42

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