Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"

Про шаблонизаторы вообще
и BEMHTML в частности
Сергей Бережной
руководитель отдела
разработки поисковых интерфейсов

Я.Субботник, Москва, 8 сентября 2012 года

про шаблонизаторЫ
вообще

и
BEMHTML
в частности

Шаблонизаторы вообще…

3

Шаблонизаторы вообще
Задачи

4

Задачи
— HTML

5

Задачи
— HTML
— текст

6

Задачи
— HTML
— текст
— DOM

7

Многообразие видов

— по семантике

9

— интерполяция строк

10


"Шоколад ни в чем не виноват, %username%."

11

– Mustache
– Handlebars
– Dust
– Jade
– …
12

— data bind

13

— 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

— data bind
– Flatiron.js templates
– Transparency
– Angular.js
– Pure
15

— data bind
— live data bind

16

— data bind
— live data bind
– Knockout.js

17

— data bind
— live data bind
— data driven

18

— data driven
<xsl:template match="username">
<span class="name">
<xsl:apply-templates/>
</span>
</xsl:template>

19

— data driven
<span class="name">
</span>
</xsl:template>

Шоколад ни в чем не виноват, <username>John Smith</username>.
Вы просто созданы для лепрозория, <username>veged</username>!

20

— data driven
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.
Вы просто созданы для лепрозория, <span class="name">veged</span>!

21

— data bind
— live data bind
— data driven
– XSLT
– BEMHTML
22

— по синтаксису

23

— текст в финальном виде + вставки

24


<span class="name">[% username %]</span>

25

— сокращённый синтаксис

26


span.name #{username}

27

— предметно-ориентированный синтаксис

28

<span class="name">
</span>
</xsl:template>

29

var html = 'Шоколад ни в чем не виноват,<span class="name"/>.'
, data = { username: 'John Smith' }
, map = plates.Map();

map.class('name').to('username');
plates.bind(html, data, map);

30

— по базовому языку

31

— один базовый язык

32

— один базовый язык
— компилируется в несколько языков

33


34

…и BEMHTML в частности

35

Задачи

36

Задачи

Задачи
— разделение HTML и логики представления

38

Задачи
— гибкая библиотека блоков

39

Задачи
[% BLOCK menu %]
<ul>
[% FOREACH item IN items %]
<li>[% item %]</li>
[% END %]
</ul>
[% END %]

40

Задачи
[% BLOCK menu %]
<ul>
[% FOREACH item IN items %]
[% PROCESS item content = i %]
[% END %]
</ul>
[% END %]

41

Задачи
— скорость

42

Задачи
— скорость
— БЭМ

43

Что получилось

44


— БЭМ-дерево ⟹ HTML

46



{ block: 'button', content: 'Найти' }

<input
class="button"
type="button"
value="Найти"/>

47


{
block: 'button',
mods: { size: 'm' },
content: 'Найти'
}

<input
class="button button_size_m"
type="button" value="Найти"/>

48


— синтаксис

49


— чуть больше чем JavaScript

50


— шаблоны с предикатами

51


— шаблоны с предикатами
— БЭМ
— несколько ключевых слов

52


block button, tag: 'input'

53


block button {
tag: 'input'
attrs: ({ type: 'button' })
}

54


block button {
tag: 'input'
attrs: ({
type: 'button',
value: apply('content')
})
content: ''
}

55


{ block: 'button', content: 'Найти' }

<input
class="button"
type="button"
value="Найти"/>

56


— гибкость и расширяемость "по построению"

57

block button, attrs: ({ type: 'button' })

58

block button, attrs: ({ type: 'button' })

block button, mod type submit, attrs: ({
type: 'submit'
})

59


— многопроходность

60


{ block: 'box', content: 'text' }

61



<div class="box">
<div class="box__top"></div>
<div class="box__content">text</div>
<div class="box__bottom"></div>
</div>

62

block box, content: [
{ elem: 'top' },
{
elem: 'content',
content: applyNext()
},
{ elem: 'bottom' }
]

63



<div class="box">
<div class="box__top"></div>
<div class="box__content">text</div>
<div class="box__bottom"></div>
</div>

64


— полноценный JavaScript

65


block box, content: {
var res = { /* ... */ };
// ...
return res;
}

66


— XJST: bit.ly/xjst

67

Где применять

68

— возможность исполнять JavaScript

70

— на сервере
— на клиенте

71

— много HTML

72

— много HTML
— HTML+CSS пишут отдельные специалисты

73

— много HTML
— БЭМ

74

— много HTML
— БЭМ, хотя бы в CSS

75

— много HTML
— частые итерации изменения HTML+CSS

76

— много HTML
— частые итерации изменения HTML+CSS
— есть общие блоки

77

Где лучше попробовать

78

— cтанок CSS-верстальщика

80

— Node.js проект "с нуля"

81

— Node.js проект "с нуля"
— Клиентское приложение "с нуля"

82

Как попробовать

83

— шаблон проекта: bit.ly/bem-stub

85

— документация bem-tools: bit.ly/bem-tools

86

— документация bem-tools: bit.ly/bem-tools
— документация про BEMHTML: bit.ly/bemhtml

87

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

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"

More Related Content

Viewers also liked

Similar to Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"

More from Yandex

Сергей Бережной "Про шаблонизаторы вообще и BEMHTML в частности"