Существует большое количество разных HTML-шаблонизаторов, и, зная это, мы написали свой, экзотический! Мы расскажем о том, что получилось в итоге и зачем мы это сделали. А также подробнее остановимся на синтаксисе, семантике, оптимизации и компиляции шаблонов в эффективный JavaScript.

1. Экзотическая
шаблонизация
или как писать HTML для блоков
Сергей Бережной
руководитель отдела
разработки поисковых интерфейсов

2. Вступление

3. Вступление
Кто я?

4. Кто я?
• Разработчик интерфейсов Яндекса с 2005 года
• Руководитель отдела разработки поисковых интерфейсов
• БЭМ-соавтор
github.com/veged
@veged
4

5. Вступление
Кто вы?

6. Основная часть

7. Основная часть
Классика

8. Классика
8

9. Классика
{
settings: {
weather: true,
traffic: false
},
weather: { temp: 4 },
traffic: { level: 2 }
}
9

10. Классика
<ul>
[% IF settings.weather %]
<li>[% weather.temp %]</li>
[% END %]
[% IF settings.traffic %]
<li>[% traffic.level %]</li>
[% END %]
</ul>
10

11. Классика
Data → HTML
11

12. Основная часть
Альтернатива

13. Альтернатива
{
settings: {
weather: true,
traffic: false
},
weather: { temp: 4 },
traffic: { level: 2 }
}
13

14. Альтернатива
var items = [];
if(settings.weather) items.push({
elem: 'item',
content: weather.temp });
if(settings.traffic) items.push({
elem: 'item',
content: traffic.level });
return { block: 'menu', content: items };
14

15. Альтернатива
{
block: 'menu',
content: [
{
elem: 'item',
content: 4
}
]
}
15

16. Альтернатива
block menu {
tag: 'ul'
elem item, tag: 'li'
}
16

17. Альтернатива
<ul class="menu">
<li class="menu__item">
+4 °С
</li>
</ul>
17

18. Альтернатива
Data → View → HTML
18

19. Альтернатива
Data → БЭМ-дерево → HTML
19

20. Альтернатива
Data → БЭМ-дерево ⤙BEMHTML⤚ HTML
20

21. Альтернатива
• блоки рисуются сами
21

22. Альтернатива
• блоки рисуются сами
• не нужна интеграция нового HTML в шаблоны
22

23. Альтернатива
<ul>
[% IF settings.weather %]
<li>[% weather.temp %]</li>
[% END %]
[% IF settings.traffic %]
<li>[% traffic.level %]</li>
[% END %]
</ul>
23

24. Альтернатива
• блоки рисуются сами
• не нужна интеграция нового HTML в шаблоны
• можно прототипировать HTML/CSS без реальных данных
24

25. Альтернатива
Data → БЭМ-дерево → HTML
25

26. Альтернатива
Data → БЭМ-дерево → HTML
26

27. Альтернатива
• блоки рисуются сами
• не нужна интеграция нового HTML в шаблоны
• можно прототипировать HTML/CSS без реальных данных
• меньше копипаста, больше повторного использования
27

28. Альтернатива
<ul>
[% IF settings.weather %]
<li>[% weather.temp %]</li>
[% END %]
[% IF settings.traffic %]
<li>[% traffic.level %]</li>
[% END %]
</ul>
28

29. Альтернатива
block menu {
tag: 'ul'
elem item, tag: 'li'
}
29

30. Альтернатива
• блоки рисуются сами
• не нужна интеграция нового HTML в шаблоны
• можно прототипировать HTML/CSS без реальных данных
• меньше копипаста, больше повторного использования
• очень похоже на CSS
30

31. Альтернатива
block menu {
tag: 'ul'
elem item, tag: 'li'
}
31

32. Альтернатива
/* CSS */
.header {
font-size: 140%;
}
// BEMHTML
block header, tag: 'h1'
32

33. Основная часть
Файлы

34. Файлы
blocks/
34

35. Файлы
blocks/
header/
menu/
35

36. Файлы
blocks/
header/
menu/
__item/
36

37. Файлы
blocks/
header/
header.css
menu/
__item/
menu__item.css
menu.css
37

38. Файлы
blocks/
header/
header.css
header.bemhtml
menu/
__item/
menu__item.css
menu__item.bemhtml
menu.css
menu.bemhtml
38

39. Файлы
blocks/
pages/
39

40. Файлы
blocks/
pages/
index/
40

41. Файлы
blocks/
pages/
index/
index.css
41

42. Файлы
pages/index/index.css
@import url(../../blocks/header/header.css);
@import url(../../blocks/menu/menu.css);
@import url(../../blocks/menu/__item/menu__item.css);
42

43. Файлы
bem build
--output-name=index
--decl=pages/index/index.bemdecl.js
--level=blocks/
--tech=css
43

44. Файлы
blocks/
pages/
index/
index.bemdecl.js // декларация
44

45. Файлы
bem build
--output-name=index
--decl=pages/index/index.bemdecl.js
--level=blocks/
--tech=css
--tech=bemhtml
45

46. Файлы
blocks/
pages/
index/
index.bemdecl.js // декларация
46

47. Файлы
blocks/
pages/
index/
index.bemdecl.js // декларация
index.css // сборка
index.bemhtml.js // сборка
47

48. Файлы
bem.info/tools/bem
48

49. Основная часть
Переопределения

50. Переопределения
/* CSS */
.header {
font-size: 140%;
font-weight: bold;
}
50

51. Переопределения
<!-- HTML -->
<h1 class="header">
Заголовок 1
</h1>
51

52. Переопределения
// BEMHTML
block header, tag: 'h1'
52

53. Переопределения
blocks/
header/
header.css
header.bemhtml
53

54. Переопределения
/* CSS */
.header {
font-size: 140%;
font-weight: bold;
}
.header_level_2 {
font-size: 120%;
}
54

55. Переопределения
blocks/
header/
_level/
header_level_2.css
header.css
55

56. Переопределения
<!-- HTML -->
<h2 class="header header_level_2">
Заголовок 2
</h2>
56

57. Переопределения
// BEMHTML
block header, tag: 'h1'
block header, mod level 2, tag: 'h2'
57

58. Переопределения
blocks/
header/
_level/
header_level_2.css
header_level_2.bemhtml
header.css
header.bemhtml
58

59. Переопределения
pages/index/index.css
@import url(../../blocks/header/header.css);
@import url(../../blocks/header/_level/header_level_2.css);
59

60. Переопределения
mylib/
blocks/
header/
_level/
header_level_2.css
header_level_2.bemhtml
header.css
header.bemhtml
60

61. Переопределения
mylib/
blocks/
header/
_level/
header_level_2.css
header_level_2.bemhtml
header.css
header.bemhtml
blocks/
61

62. Переопределения
/* CSS */
.header {
font-weight: normal;
}
62

63. Переопределения
<!-- HTML -->
<h2 class="header">
Заголовок 1
</h2>
<h3 class="header header_level_2">
Заголовок 2
</h3>
63

64. Переопределения
// BEMHTML
block header, tag: 'h2'
block header, mod level 2, tag: 'h3'
64

65. Переопределения
mylib/
blocks/
header/
_level/
header_level_2.bemhtml
header.css
header.bemhtml
65

66. Переопределения
bem build
--output-name=index
--decl=pages/index/index.bemdecl.js
--level=blocks/
--tech=css
--tech=bemhtml
66

67. Переопределения
bem build
--output-name=index
--decl=pages/index/index.bemdecl.js
--level=mylib/blocks/
--level=blocks/
--tech=css
--tech=bemhtml
67

68. Переопределения
pages/index/index.css
@import url(../../mylib/blocks/header/header.css);
@import url(../../blocks/header/header.css);
68

69. Основная часть
Многопроходность

70. Многопроходность
<ul class="menu">
<li class="menu__item">
+4 °С
</li>
</ul>
70

71. Многопроходность
{
block: 'menu',
content: [
{
elem: 'item',
content: 4
}
]
}
71

72. Многопроходность
block menu {
tag: 'ul'
elem item, tag: 'li'
}
72

73. Многопроходность
<ul class="menu">
<li class="menu__item">
<span class="menu__item-wrap">
+4 °С
</span>
</li>
</ul>
73

74. Многопроходность
block menu {
tag: 'ul'
elem item, tag: 'li'
elem item-wrap, tag: 'span'
}
74

75. Многопроходность
{
block: 'menu',
content: [
{
elem: 'item',
content: {
elem: 'item-wrap',
content: 4
}
}
]
}
75

76. Многопроходность
block menu {
tag: 'ul'
elem item {
tag: 'li'
content: {
elem: 'item-wrap',
content: applyNext()
}
}
elem item-wrap, tag: 'span'
}
76

77. Многопроходность
{
block: 'menu',
content: [
{
elem: 'item',
content: 4
}
]
}
77

78. Многопроходность
<ul class="menu">
<li class="menu__item">
<span class="menu__item-wrap">
+4 °С
</span>
</li>
</ul>
78

79. Основная часть
JavaScript

80. JavaScript
80

81. JavaScript
81

82. JavaScript
{
block: 'ya-user',
content: 'veged'
}
82

83. JavaScript
<a
class="ya-user"
href="//i.yandex.ru">
<span class="ya-user__first">
v
</span>
eged
</a>
83

84. JavaScript
block ya-user {
tag: 'a'
attrs: { href: '//i.yandex.ru' }
elem first, tag: 'span'
}
84

85. JavaScript
{
block: 'ya-user',
content: [
{ elem: 'first', content: 'v' },
'eged'
]
}
85

86. JavaScript
block ya-user, content: {
var oldContent = applyNext();
return [
{
elem: 'first',
content: oldContent[0]
},
oldContent.substring(1)
]
}
86

87. JavaScript
{
block: 'ya-user',
content: 'veged'
}
87

88. JavaScript
<a
class="ya-user"
href="//i.yandex.ru">
<span class="ya-user__first">
v
</span>
eged
</a>
88

89. Основная часть
Скорость

90. Скорость
github.com/veged/xjst
90

91. Secinājums

92. Secinājums
• декларативность
92

93. Secinājums
• декларативность
• блоки рисуются сами
92

94. Secinājums
• декларативность
• блоки рисуются сами
• переопределения
92

95. Secinājums
• декларативность
• блоки рисуются сами
• переопределения
• многопроходность
92

96. Secinājums
• декларативность
• блоки рисуются сами
• переопределения
• многопроходность
• БЭМ
92

97. Secinājums
• существуют другие способы писать шаблоны
93

98. Secinājums
• существуют другие способы писать шаблоны
• попробовать БЭМ: github.com/bem/project-stub
93

99. Secinājums
• существуют другие способы писать шаблоны
• попробовать БЭМ: github.com/bem/project-stub
• попробовать: XSLT, XJST, написать своё
93

100. Сергей Бережной
руководитель отдела
разработки
поисковых интерфейсов
veged@yandex-team.ru
github.com/veged
@veged
Спасибо