Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в...
-
Upload
yandex -
Category
Technology
-
view
1.487 -
download
2
Transcript of Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в...
![Page 1: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/1.jpg)
Я.Субботник, Москва, 8 сентября 2012 года
Сергей Бережнойруководитель отделаразработки поисковых интерфейсов
Про шаблонизаторы вообще
и BEMHTML в частности
![Page 2: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/2.jpg)
про шаблонизаторЫ вообще
и BEMHTMLв частности
![Page 3: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/3.jpg)
Шаблонизаторы вообще…
3
![Page 4: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/4.jpg)
ЗадачиШаблонизаторы вообще
4
![Page 5: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/5.jpg)
ЗадачиШаблонизаторы вообще
5
— HTML
![Page 6: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/6.jpg)
ЗадачиШаблонизаторы вообще
6
— HTML
— текст
![Page 7: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/7.jpg)
ЗадачиШаблонизаторы вообще
7
— HTML
— текст
— DOM
![Page 8: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/8.jpg)
Шаблонизаторы вообщеМногообразие видов
![Page 9: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/9.jpg)
Многообразие видовШаблонизаторы вообще
9
— по семантике
![Page 10: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/10.jpg)
Многообразие видовШаблонизаторы вообще
10
— по семантике
— интерполяция строк
![Page 11: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/11.jpg)
Многообразие видов
"Шоколад ни в чем не виноват, %username%."
Шаблонизаторы вообще
11
— по семантике
— интерполяция строк
![Page 12: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/12.jpg)
Многообразие видовШаблонизаторы вообще
12
— по семантике
— интерполяция строк
– Mustache
– Handlebars
– Dust
– Jade
– …
![Page 13: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/13.jpg)
Многообразие видовШаблонизаторы вообще
13
— по семантике
— интерполяция строк
— data bind
![Page 14: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/14.jpg)
— по семантике
— 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
![Page 15: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/15.jpg)
Многообразие видовШаблонизаторы вообще
15
— по семантике
— интерполяция строк
— data bind
– Flatiron.js templates
– Transparency
– Angular.js
– Pure
![Page 16: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/16.jpg)
Многообразие видовШаблонизаторы вообще
16
— по семантике
— интерполяция строк
— data bind
— live data bind
![Page 17: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/17.jpg)
Многообразие видовШаблонизаторы вообще
17
— по семантике
— интерполяция строк
— data bind
— live data bind
– Knockout.js
![Page 18: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/18.jpg)
Многообразие видовШаблонизаторы вообще
18
— по семантике
— интерполяция строк
— data bind
— live data bind
— data driven
![Page 19: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/19.jpg)
— по семантике
— data driven
Многообразие видов
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Шаблонизаторы вообще
19
![Page 20: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/20.jpg)
— по семантике
— data driven
Многообразие видов
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Шоколад ни в чем не виноват, <username>John Smith</username>.Вы просто созданы для лепрозория, <username>veged</username>!
Шаблонизаторы вообще
20
![Page 21: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/21.jpg)
— по семантике
— data driven
Многообразие видов
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.Вы просто созданы для лепрозория, <span class="name">veged</span>!
Шаблонизаторы вообще
21
![Page 22: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/22.jpg)
Многообразие видовШаблонизаторы вообще
22
— по семантике
— интерполяция строк
— data bind
— live data bind
— data driven
– XSLT
– BEMHTML
![Page 23: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/23.jpg)
Многообразие видовШаблонизаторы вообще
23
— по семантике
— по синтаксису
![Page 24: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/24.jpg)
Многообразие видовШаблонизаторы вообще
24
— по семантике
— по синтаксису
— текст в финальном виде + вставки
![Page 25: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/25.jpg)
Многообразие видов
<span class="name">[% username %]</span>
Шаблонизаторы вообще
25
— по семантике
— по синтаксису
— текст в финальном виде + вставки
![Page 26: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/26.jpg)
Многообразие видовШаблонизаторы вообще
26
— по семантике
— по синтаксису
— текст в финальном виде + вставки
— сокращённый синтаксис
![Page 27: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/27.jpg)
Многообразие видов
span.name #{username}
Шаблонизаторы вообще
27
— по семантике
— по синтаксису
— сокращённый синтаксис
![Page 28: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/28.jpg)
Многообразие видовШаблонизаторы вообще
28
— по семантике
— по синтаксису
— текст в финальном виде + вставки
— сокращённый синтаксис
— предметно-ориентированный синтаксис
![Page 29: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/29.jpg)
Многообразие видов
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Шаблонизаторы вообще
29
— по семантике
— по синтаксису
— предметно-ориентированный синтаксис
![Page 30: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/30.jpg)
Многообразие видов
var html = 'Шоколад ни в чем не виноват,<span class="name"/>.' , data = { username: 'John Smith' } , map = plates.Map();
map.class('name').to('username');plates.bind(html, data, map);
Шаблонизаторы вообще
30
— по семантике
— по синтаксису
— предметно-ориентированный синтаксис
![Page 31: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/31.jpg)
Многообразие видовШаблонизаторы вообще
31
— по семантике
— по синтаксису
— по базовому языку
![Page 32: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/32.jpg)
Многообразие видовШаблонизаторы вообще
32
— по семантике
— по синтаксису
— по базовому языку
— один базовый язык
![Page 33: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/33.jpg)
Многообразие видовШаблонизаторы вообще
33
— по семантике
— по синтаксису
— по базовому языку
— один базовый язык
— компилируется в несколько языков
![Page 34: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/34.jpg)
Многообразие видовШаблонизаторы вообще
34
— по семантике
— по синтаксису
— по базовому языку
![Page 35: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/35.jpg)
…и BEMHTML в частности
35
![Page 36: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/36.jpg)
Задачи…и BEMHTML в частности
36
![Page 37: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/37.jpg)
…и BEMHTML в частностиЗадачи
![Page 38: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/38.jpg)
Задачи…и BEMHTML в частности
38
— разделение HTML и логики представления
![Page 39: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/39.jpg)
Задачи…и BEMHTML в частности
39
— разделение HTML и логики представления
— гибкая библиотека блоков
![Page 40: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/40.jpg)
— разделение HTML и логики представления
— гибкая библиотека блоков
Задачи
[% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul>[% END %]
…и BEMHTML в частности
40
![Page 41: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/41.jpg)
— разделение HTML и логики представления
— гибкая библиотека блоков
Задачи
[% BLOCK menu %] <ul> [% FOREACH item IN items %] [% PROCESS item content = i %] [% END %] </ul>[% END %]
…и BEMHTML в частности
41
![Page 42: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/42.jpg)
Задачи…и BEMHTML в частности
42
— разделение HTML и логики представления
— гибкая библиотека блоков
— скорость
![Page 43: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/43.jpg)
Задачи…и BEMHTML в частности
43
— разделение HTML и логики представления
— гибкая библиотека блоков
— скорость
— БЭМ
![Page 44: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/44.jpg)
Что получилось…и BEMHTML в частности
44
![Page 45: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/45.jpg)
…и BEMHTML в частностиЧто получилось
![Page 46: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/46.jpg)
Что получилось…и BEMHTML в частности
46
— БЭМ-дерево ⟹ HTML
![Page 47: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/47.jpg)
Что получилось…и BEMHTML в частности
47
— БЭМ-дерево ⟹ HTML
{ block: 'button', content: 'Найти' }
<input class="button" type="button" value="Найти"/>
![Page 48: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/48.jpg)
Что получилось…и BEMHTML в частности
48
— БЭМ-дерево ⟹ HTML
{ block: 'button', mods: { size: 'm' }, content: 'Найти'}
<input class="button button_size_m" type="button" value="Найти"/>
![Page 49: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/49.jpg)
Что получилось…и BEMHTML в частности
49
— БЭМ-дерево ⟹ HTML
— синтаксис
![Page 50: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/50.jpg)
Что получилось…и BEMHTML в частности
50
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
![Page 51: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/51.jpg)
Что получилось…и BEMHTML в частности
51
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
— шаблоны с предикатами
![Page 52: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/52.jpg)
Что получилось…и BEMHTML в частности
52
— БЭМ-дерево ⟹ HTML
— синтаксис
— чуть больше чем JavaScript
— шаблоны с предикатами
— БЭМ
— несколько ключевых слов
![Page 53: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/53.jpg)
Что получилось
block button, tag: 'input'
…и BEMHTML в частности
53
— БЭМ-дерево ⟹ HTML
— синтаксис
![Page 54: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/54.jpg)
Что получилось
block button { tag: 'input' attrs: ({ type: 'button' })}
…и BEMHTML в частности
54
— БЭМ-дерево ⟹ HTML
— синтаксис
![Page 55: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/55.jpg)
— БЭМ-дерево ⟹ HTML
— синтаксис
Что получилось
block button { tag: 'input' attrs: ({ type: 'button', value: apply('content') }) content: ''}
…и BEMHTML в частности
55
![Page 56: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/56.jpg)
— БЭМ-дерево ⟹ HTML
— синтаксис
Что получилось
{ block: 'button', content: 'Найти' }
<input class="button" type="button" value="Найти"/>
…и BEMHTML в частности
56
![Page 57: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/57.jpg)
Что получилось…и BEMHTML в частности
57
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
![Page 58: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/58.jpg)
— гибкость и расширяемость "по построению"
Что получилось
block button, attrs: ({ type: 'button' })
…и BEMHTML в частности
58
![Page 59: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/59.jpg)
— гибкость и расширяемость "по построению"
Что получилось
block button, attrs: ({ type: 'button' })
block button, mod type submit, attrs: ({ type: 'submit'})
…и BEMHTML в частности
59
![Page 60: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/60.jpg)
Что получилось…и BEMHTML в частности
60
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
![Page 61: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/61.jpg)
— многопроходность
Что получилось
{ block: 'box', content: 'text' }
…и BEMHTML в частности
61
![Page 62: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/62.jpg)
— многопроходность
Что получилось
{ block: 'box', content: 'text' }
<div class="box"> <div class="box__top"></div> <div class="box__content">text</div> <div class="box__bottom"></div></div>
…и BEMHTML в частности
62
![Page 63: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/63.jpg)
— многопроходность
Что получилось
block box, content: [ { elem: 'top' }, { elem: 'content', content: applyNext() }, { elem: 'bottom' }]
…и BEMHTML в частности
63
![Page 64: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/64.jpg)
— многопроходность
Что получилось
{ block: 'box', content: 'text' }
<div class="box"> <div class="box__top"></div> <div class="box__content">text</div> <div class="box__bottom"></div></div>
…и BEMHTML в частности
64
![Page 65: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/65.jpg)
Что получилось…и BEMHTML в частности
65
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
— полноценный JavaScript
![Page 66: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/66.jpg)
— полноценный JavaScript
Что получилось
block box, content: { var res = { /* ... */ }; // ... return res;}
…и BEMHTML в частности
66
![Page 67: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/67.jpg)
Что получилось…и BEMHTML в частности
67
— БЭМ-дерево ⟹ HTML
— синтаксис
— гибкость и расширяемость "по построению"
— многопроходность
— полноценный JavaScript
— XJST: bit.ly/xjst
![Page 68: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/68.jpg)
Где применять…и BEMHTML в частности
68
![Page 69: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/69.jpg)
…и BEMHTML в частностиГде применять
![Page 70: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/70.jpg)
Где применять…и BEMHTML в частности
70
— возможность исполнять JavaScript
![Page 71: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/71.jpg)
Где применять…и BEMHTML в частности
71
— возможность исполнять JavaScript
— на сервере
— на клиенте
![Page 72: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/72.jpg)
Где применять…и BEMHTML в частности
72
— возможность исполнять JavaScript
— много HTML
![Page 73: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/73.jpg)
Где применять…и BEMHTML в частности
73
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
![Page 74: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/74.jpg)
Где применять…и BEMHTML в частности
74
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ
![Page 75: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/75.jpg)
Где применять…и BEMHTML в частности
75
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
![Page 76: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/76.jpg)
Где применять…и BEMHTML в частности
76
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
— частые итерации изменения HTML+CSS
![Page 77: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/77.jpg)
Где применять…и BEMHTML в частности
77
— возможность исполнять JavaScript
— много HTML
— HTML+CSS пишут отдельные специалисты
— БЭМ, хотя бы в CSS
— частые итерации изменения HTML+CSS
— есть общие блоки
![Page 78: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/78.jpg)
Где лучше попробовать…и BEMHTML в частности
78
![Page 79: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/79.jpg)
…и BEMHTML в частностиГде лучше попробовать
![Page 80: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/80.jpg)
Где лучше попробовать…и BEMHTML в частности
80
— cтанок CSS-верстальщика
![Page 81: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/81.jpg)
Где лучше попробовать…и BEMHTML в частности
81
— cтанок CSS-верстальщика
— Node.js проект "с нуля"
![Page 82: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/82.jpg)
Где лучше попробовать…и BEMHTML в частности
82
— cтанок CSS-верстальщика
— Node.js проект "с нуля"
— Клиентское приложение "с нуля"
![Page 83: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/83.jpg)
Как попробовать…и BEMHTML в частности
83
![Page 84: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/84.jpg)
…и BEMHTML в частностиКак попробовать
![Page 85: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/85.jpg)
Как попробовать…и BEMHTML в частности
85
— шаблон проекта: bit.ly/bem-stub
![Page 86: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/86.jpg)
Как попробовать…и BEMHTML в частности
86
— шаблон проекта: bit.ly/bem-stub
— документация bem-tools: bit.ly/bem-tools
![Page 87: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/87.jpg)
Как попробовать…и BEMHTML в частности
87
— шаблон проекта: bit.ly/bem-stub
— документация bem-tools: bit.ly/bem-tools
— документация про BEMHTML: bit.ly/bemhtml
![Page 88: Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"](https://reader033.fdocument.pub/reader033/viewer/2022052621/557ec941d8b42ae27f8b48c4/html5/thumbnails/88.jpg)
Сергей Бережнойруководитель отделаразработки поисковых интерфейсов[email protected]
@vegedgithub.com/veged