Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"
1. Про шаблонизаторы вообще
и BEMHTML в частности
Сергей Бережной
руководитель отдела
разработки поисковых интерфейсов
Я.Субботник, Москва, 8 сентября 2012 года
14. Шаблонизаторы вообще
Многообразие видов
— по семантике
— data bind
var html = 'Шоколад ни в чем не виноват,'
+ '<span class="name"/>.'
, data = { username: 'John Smith' }
, map = plates.Map();
map.class('name').to('username');
plates.bind(html, data, map);
14
19. Шаблонизаторы вообще
Многообразие видов
— по семантике
— data driven
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
19
20. Шаблонизаторы вообще
Многообразие видов
— по семантике
— data driven
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
Шоколад ни в чем не виноват, <username>John Smith</username>.
Вы просто созданы для лепрозория, <username>veged</username>!
20
21. Шаблонизаторы вообще
Многообразие видов
— по семантике
— data driven
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.
Вы просто созданы для лепрозория, <span class="name">veged</span>!
21
28. Шаблонизаторы вообще
Многообразие видов
— по семантике
— по синтаксису
— текст в финальном виде + вставки
— сокращённый синтаксис
— предметно-ориентированный синтаксис
28
29. Шаблонизаторы вообще
Многообразие видов
— по семантике
— по синтаксису
— предметно-ориентированный синтаксис
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>
29
30. Шаблонизаторы вообще
Многообразие видов
— по семантике
— по синтаксису
— предметно-ориентированный синтаксис
var html = 'Шоколад ни в чем не виноват,<span class="name"/>.'
, data = { username: 'John Smith' }
, map = plates.Map();
map.class('name').to('username');
plates.bind(html, data, map);
30
38. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
38
39. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
— гибкая библиотека блоков
39
40. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
— гибкая библиотека блоков
[% BLOCK menu %]
<ul>
[% FOREACH item IN items %]
<li>[% item %]</li>
[% END %]
</ul>
[% END %]
40
41. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
— гибкая библиотека блоков
[% BLOCK menu %]
<ul>
[% FOREACH item IN items %]
[% PROCESS item content = i %]
[% END %]
</ul>
[% END %]
41
42. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
— гибкая библиотека блоков
— скорость
42
43. …и BEMHTML в частности
Задачи
— разделение HTML и логики представления
— гибкая библиотека блоков
— скорость
— БЭМ
43
46. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
46
47. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
{ block: 'button', content: 'Найти' }
<input
class="button"
type="button"
value="Найти"/>
47
48. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
{
block: 'button',
mods: { size: 'm' },
content: 'Найти'
}
<input
class="button button_size_m"
type="button" value="Найти"/>
48
49. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
49
50. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
50
51. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
— шаблоны с предикатами
51
52. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
— шаблоны с предикатами
— БЭМ
— несколько ключевых слов
52
53. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
block button, tag: 'input'
53
54. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
block button {
tag: 'input'
attrs: ({ type: 'button' })
}
54
55. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
block button {
tag: 'input'
attrs: ({
type: 'button',
value: apply('content')
})
content: ''
}
55
56. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
{ block: 'button', content: 'Найти' }
<input
class="button"
type="button"
value="Найти"/>
56
57. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
57
58. …и BEMHTML в частности
Что получилось
— гибкость и расширяемость "по построению"
block button, attrs: ({ type: 'button' })
58
59. …и BEMHTML в частности
Что получилось
— гибкость и расширяемость "по построению"
block button, attrs: ({ type: 'button' })
block button, mod type submit, attrs: ({
type: 'submit'
})
59
60. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
60
61. …и BEMHTML в частности
Что получилось
— многопроходность
{ block: 'box', content: 'text' }
61
62. …и BEMHTML в частности
Что получилось
— многопроходность
{ block: 'box', content: 'text' }
<div class="box">
<div class="box__top"></div>
<div class="box__content">text</div>
<div class="box__bottom"></div>
</div>
62
63. …и BEMHTML в частности
Что получилось
— многопроходность
block box, content: [
{ elem: 'top' },
{
elem: 'content',
content: applyNext()
},
{ elem: 'bottom' }
]
63
64. …и BEMHTML в частности
Что получилось
— многопроходность
{ block: 'box', content: 'text' }
<div class="box">
<div class="box__top"></div>
<div class="box__content">text</div>
<div class="box__bottom"></div>
</div>
64
65. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
— полноценный JavaScript
65
66. …и BEMHTML в частности
Что получилось
— полноценный JavaScript
block box, content: {
var res = { /* ... */ };
// ...
return res;
}
66
67. …и BEMHTML в частности
Что получилось
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
— полноценный JavaScript
— XJST: bit.ly/xjst
67
70. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
70
71. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— на сервере
— на клиенте
71
72. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
72
73. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
73
74. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ
74
75. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
75
76. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
— частые итерации изменения HTML+CSS
76
77. …и BEMHTML в частности
Где применять
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
— частые итерации изменения HTML+CSS
— есть общие блоки
77