Разработка проекта на полном стеке БЭМ: мастер-класс на конференции OdessaJS 2014 — Евгений Константинов и Дмитрий Белицкий

1. Сайт с нуля на полном стеке
БЭМ-технологий
Жека Константинов, Дима Белицкий

2. Дима Белицкий
2
dmtry@yandex-team.ru
@dabelitsky
github.com/dab
Разработчик интерфейсов в
Яндексе

3. Жека Константинов
3
3
sipayrt@yandex-team.ru
@sipayrt
github.com/sipayrt
разработчик интерфейсов в
Яндексе

4. О чем поговорим?
Методолгия
Шаблонизация и обмен данными
JavaScript + BEM
Все — на примере демо-проекта
4

5. БЭМ — что это?
Методология БЭМ на bem.info bit.ly/1hMHNB2
Доклад Вовы Гриненко про методологию БЭМ и БЭМ-платформу bit.ly/1hMCKk5
5

6. Вся история БЭМ
История БЭМ на bem.info bit.ly/1eAsQBo
Доклад Витали Харисова про историю БЭМ bit.ly/1m8ijzQ
6

7. BEMJSON
bit.ly/bemjson

8. BEMHTML

9. Декларативность
9

10. Декларативность
9
условие {тело шаблона}

11. Декларативность
9
условие {тело шаблона}
.island__header { display: inline-block; }

12. Декларативность
9
условие {тело шаблона}
.island__header { display: inline-block; }
block('island').elem('header')(
tag()('a')
)

13. BEMJSON
входные данные
10

14. BEMHTML
декларативный шаблон
11

15. HTML
результат
12

16. Шаблон BEMHTML. Моды
13

17. Шаблон BEMHTML. Моды
14

18. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод

19. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга

20. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры

21. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности

22. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы

23. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде

24. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js

25. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js
attrs — позволяет задать имена и значения произвольных HTML-атрибутов

26. Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js и параметры
bem — генерация классов БЭМ-сущности
cls — кастомные классы
mix — несколько БЭМ-блоков на одной DOM-ноде
jsAttrs — имя HTML-атрибута для параметров клиентского js
attrs — позволяет задать имена и значения произвольных HTML-атрибутов
content — содержимое HTML-элемента

27. Представление БЭМ-сущностей
15

28. Представление БЭМ-сущностей
15
{ block: 'b-menu' }

29. Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }

30. Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color: 'green' }
}

31. Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color: 'green' }
}
{
elem: 'item',
elemMods: { selected: 'yes' }
}

32. Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color: 'green' }
}
{
elem: 'item',
elemMods: { selected: 'yes' }
}
{
block: 'b-link',
mix: [ { block: 'b-serp-item', elem: 'link' } ]
}

33. Представление HTML
16

34. Представление HTML
16
{ block: 'my-block', tag: 'img' }

35. Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }}

36. Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }}
{ block: 'my-block', cls: 'additional-class' }

37. Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }}
{ block: 'my-block', cls: 'additional-class' }
{ block: ‘page', tag: ‘html', bem: false }

38. Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }}
{ block: 'my-block', cls: 'additional-class' }
{ block: ‘page', tag: ‘html', bem: false }
{ block: ‘my-block', js: true }

39. BEMHTML Руководство пользователя
17

40. BEMHTML Руководство пользователя
17
Это и многое другое на нашем сайте bit.ly/bemhtmlref

41. Двухэтапная
шаблонизация

42. data → view → HTML

43. data → БЭМ-дерево → HTML

44. data + BEMTREE → BEMJSON
!
BEMJSON + BEMHTML → HTML

45. BEMTREE + BEMHTML

46. Декларативная шаблонизация

47. BEMTREE + BEMHTML
24

48. BEMTREE + BEMHTML
24
декларативность

49. BEMTREE + BEMHTML
24
декларативность
уровни переопределения

50. BEMTREE + BEMHTML
24
декларативность
уровни переопределения
работают с предметной областью БЭМ

51. BEMTREE + BEMHTML
24
декларативность
уровни переопределения
работают с предметной областью БЭМ
единый синтаксис

52. JavaScript, BEMTREE и BEMHTML
25

53. JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript

54. JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript конструкции

55. JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript конструкции
компилируются в оптимизированный JavaScript

56. JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript конструкции
компилируются в оптимизированный JavaScript
исполняются на клиенте и сервере

57. Архитектура шаблонизации
26

58. Шаблонизация данных в bem-core
27

59. Шаблонизация данных в bem-core
27
bit.ly/bemcoretpl

60. Терминология
28

61. Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента

62. Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий

63. Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий
Подпредикаты — единичные (элементарные) условия

64. Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий
Подпредикаты — единичные (элементарные) условия
this.ctx — фрагмент БЭМ-дерева с текущим узлом и
вложенными сущностями

65. Шаблон BEMTREE. Моды
29

66. Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного дерева

67. Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного дерева
default — обработка стандартных мод

68. Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного дерева
default — обработка стандартных мод
content — содержимое БЭМ-узла

69. Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного дерева
default — обработка стандартных мод
content — содержимое БЭМ-узла
кастомная мода — пользовательские мода, для специфичной обработки БЭМ-дерева

70. BEMTREE Руководство пользователя
30

71. BEMTREE Руководство пользователя
30
bit.ly/bemtreeref

72. Отличия BEMHTML и BEMTREE
31
BEMTREE BEMHTML
генерация БЭМ-дерева генерация HTML
моды default, content, пустая
все что в BEMTREE + генерация HTML
(tag, js, cls, bem и т.д.)
возвращает Vow-promise возвращает строку
различный набор методов-хелперов

73. Шаблоны. Синтаксис
32

74. Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);

75. Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);
match(подпредикат 1).match(подпредикат 2)(тело1);
match(подпредикат 1).match(подпредикат 3)(тело2)

76. Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);
match(подпредикат 1).match(подпредикат 2)(тело1);
match(подпредикат 1).match(подпредикат 3)(тело2)
match(подпредикат1)(
match(подпредикат2)(тело1),
match(подпредикат3)(тело2)
)

77. Шаблоны. Синтаксис
33

78. Шаблоны. Синтаксис
33
match(
this.block === 'link',
function() { return this.ctx.icon; }
)
.content()(function() {
return [{elem: 'icon'}, this.ctx.content];
});

79. Шаблоны. Синтаксис
33
match(
this.block === 'link',
function() { return this.ctx.icon; }
)
.content()(function() {
return [{elem: 'icon'}, this.ctx.content];
});
block('link').elem('icon')
.content()(function() {
return {block: 'icon'};
});

80. Let’s code
BEMHTML

81. Архитектура приложения
API сервисов - сервер (сборщик данных) - bemjson - html
35

82. Посмотрим
код сервера
BEMTREE

83. JavaScript + БЭМ

84. 38
Модульная система
modules.define('i-bem', ['inherit'], function(provide, inherit) {
var BEM = inherit(/* … */)
provide(BEM)
})

85. 39
Модульная система
modules.require(['i-bem', 'jquery'], function(BEM, $) {
/* код, использующий модули i-bem и jquery */
})

86. i-bem.js

87. Что такое i-bem.js
41

88. Что такое i-bem.js
41
Блок, помогающий делать другие блоки

89. Что такое i-bem.js
41
Блок, помогающий делать другие блоки
Реализация блока i-bem в технологии JavaScript

90. Что такое i-bem.js
41
Блок, помогающий делать другие блоки
Реализация блока i-bem в технологии JavaScript
jQuery для нормализации API браузера

91. Что дает i-bem.js
42

92. Что дает i-bem.js
42
Работа с предметной областью БЭМ

93. Что дает i-bem.js
42
Работа с предметной областью БЭМ
Декларативный подход

94. Что дает i-bem.js
42
Работа с предметной областью БЭМ
Декларативный подход
Возможность доопределения блоков

95. Блоки с JS-представлением

96. 44
Блоки с js-представлением
{!
!!!!block: 'form'!
}

97. 45
Блоки с js-представлением
{!
!!!!block: 'form',!
!!!!js: true!
}

98. 46
Блоки с js-представлением
{!
!!!!block: 'form',!
!!!!js: { p1: 'v1', p2: 'v2', … }!
}

99. 47
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

100. 48
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

101. 49
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

102. 50
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ !
!!!!!!!form: {!
!!!!!!!!!!p1: 'v1',!
!!!!!!!!!!p2: 'v2',!
!!!!!!!!!!…!
!!!!!!!} !
!!!!!}" ></div>

103. Декларация БЭМ-сущностей

104. 52
Декларация блока
BEMDOM.decl('form', {!
/* методы экземпляра блока */
}, {!
/* методы класса */
});

105. 53
Декларация блока
BEMDOM.decl('form', {!
/* методы экземпляра блока */
}, {!
/* методы класса */
});!
!
.form {!
display: flex;!
}

106. 54
BEMDOM.decl('form', {
myMethod: function() {
// экземпляр
this
// ссылка на класс
this.__self
// статический метод класса
this.__self.myStaticMethod()
// super-call
this.__base()
}
});

107. 55
BEMDOM.decl('form', { /* … */ }, {
myStaticMethod: function() {
// класс
this
// super-call
this.__base()
}
});

108. 56
Реакция на установку модификатора
.form
{
display: flex;
}
!
.form_disabled
{
opacity: .5;
}

109. 57
Реакция на установку модификатора
BEMDOM.decl('form', {!
onSetMod: {!
!!!! disabled: {!
!!!!!!!!!!!'true': function() {!
!!!!!!!!!!!!!!!...!
!!!!!!!!!!!},!
!!!!!!!!!!!'': function() {!
!!!!!!!!!!!!!!!...!
!!!!!!!!!!!}!
!!!! }!
!!!!}!
});

110. 58
Реакция на установку модификатора
BEMDOM.decl('form', {!
onSetMod: {!
!!!! disabled: function(modName, modVal) {!
!
/* как реагировать на установку модификатора */
!
!!!! }!
!!!!}!
});

111. 59
Наследование
BEMDOM.decl({!
block: 'dialog', !
baseBlock: 'form'!
}, {!
/* методы экземпляра блока */
}, {!
/* методы класса */
});

112. Инициализация

113. 61
Инициализация
<div class="form i-bem" !
!!!! data-bem="{ 'form': {} }" /><div>

114. <div class="form i-bem form_js_inited" !
!!!! data-bem="{ 'form': {} }" /><div>
62
Инициализация

115. 63
Инициализация
BEMDOM.decl('form', {!
onSetMod: {!
!!!! js: {!
inited: function() {!
/* конструктор блока */
}!
!!!! }!
!!!!}!
});

116. Набор хелперов

117. Набор хелперов
65

118. Набор хелперов
65
Поиск элементов и других блоков

119. Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами

120. Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами
Работа с событиями

121. Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами
Работа с событиями
Перестроение DOM-дерева

122. 66
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')

123. 67
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')
!
// селекторы элементов
this.findElem('control')
this.elem('control')

124. 68
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')
!
// селекторы элементов
this.findElem('control')
this.elem('control')
!
// работа с модификаторами
this.setMod('status', 'loading')
this.hasMod('status', 'loading')
this.getMod('status')
this.delMod('status')

125. Работа с событиями
69

126. Работа с событиями
69
DOM-события

127. Работа с событиями
69
DOM-события
BEM-события

128. Работа с событиями
69
DOM-события
BEM-события
Каналы

129. 70
Работа с событиями
// DOM-события
this.bindTo('submit', function() { /*…*/ })
this.unbindFrom('submit')

130. 71
Работа с событиями
// DOM-события
this.bindTo('submit', function() { /*…*/ })
this.unbindFrom('submit')
!
// BEM-события
this.on('update', function() { /*…*/ })
this.un('update', function() { /*…*/ })
this.emit('update')

131. И много чего ещё!
72

132. И много чего ещё!
72
Блоки без DOM-представления

133. И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация

134. И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация
Делегирование событий

135. И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация
Делегирование событий
Инстансы элементов

136. Очень полезные ссылки!
!
ym — github.com/ymaps/modules
Генератор проектов — ru.bem.info/tools/bem/bem-stub
Пошаговое руководство по i-bem.js — ru.bem.info/tutorials/bem-js-tutorial
Если лень читать, то можно посмотреть видео — ru.bem.info/talks/bemup-moscow-2014
!
Ссылка на полную презентацию — clck.ru/9FST5
73