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

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

Про шаблонизаторы вообще

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

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

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

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

3

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

4

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

5

— HTML

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

6

— HTML

— текст

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

7

— HTML

— текст

— DOM

Шаблонизаторы вообщеМногообразие видов

Многообразие видовШаблонизаторы вообще

9

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

Многообразие видовШаблонизаторы вообще

10

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

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

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

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

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

11

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

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

Многообразие видовШаблонизаторы вообще

12

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

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

– Mustache

– Handlebars

– Dust

– Jade

– …

Многообразие видовШаблонизаторы вообще

13

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

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

— data bind

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

— 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

Многообразие видовШаблонизаторы вообще

15

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

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

— data bind

– Flatiron.js templates

– Transparency

– Angular.js

– Pure

Многообразие видовШаблонизаторы вообще

16

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

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

— data bind

— live data bind

Многообразие видовШаблонизаторы вообще

17

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

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

— data bind

— live data bind

– Knockout.js

Многообразие видовШаблонизаторы вообще

18

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

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

— data bind

— live data bind

— data driven

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

— data driven

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

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

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

19

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

— data driven

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

<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </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

Многообразие видовШаблонизаторы вообще

22

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

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

— data bind

— live data bind

— data driven

– XSLT

– BEMHTML

Многообразие видовШаблонизаторы вообще

23

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

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

Многообразие видовШаблонизаторы вообще

24

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

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

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

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

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

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

25

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

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

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

Многообразие видовШаблонизаторы вообще

26

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

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

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

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

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

span.name #{username}

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

27

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

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

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

Многообразие видовШаблонизаторы вообще

28

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

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

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

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

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

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

<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </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

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

36

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

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

38

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

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

39

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

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

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

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

Задачи

[% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul>[% END %]

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

40

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

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

Задачи

[% BLOCK menu %] <ul> [% FOREACH item IN items %] [% PROCESS item content = i %] [% END %] </ul>[% END %]

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

41

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

42

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

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

— скорость

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

43

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

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

— скорость

— БЭМ

Что получилось…и BEMHTML в частности

44

…и BEMHTML в частностиЧто получилось

Что получилось…и BEMHTML в частности

46

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

Что получилось…и BEMHTML в частности

47

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

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

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

Что получилось…и BEMHTML в частности

48

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

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

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

Что получилось…и BEMHTML в частности

49

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

— синтаксис

Что получилось…и BEMHTML в частности

50

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

— синтаксис

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

Что получилось…и BEMHTML в частности

51

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

— синтаксис

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

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

Что получилось…и BEMHTML в частности

52

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

— синтаксис

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

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

— БЭМ

— несколько ключевых слов

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

block button, tag: 'input'

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

53

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

— синтаксис

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

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

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

54

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

— синтаксис

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

— синтаксис

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

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

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

55

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

— синтаксис

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

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

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

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

56

Что получилось…и BEMHTML в частности

57

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

— синтаксис

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

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

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

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

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

58

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

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

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

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

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

59

Что получилось…и BEMHTML в частности

60

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

— синтаксис

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

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

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

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

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

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

61

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

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

{ 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

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

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

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

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

63

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

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

{ 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

Что получилось…и BEMHTML в частности

65

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

— синтаксис

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

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

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

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

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

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

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

66

Что получилось…и BEMHTML в частности

67

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

— синтаксис

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

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

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

— XJST: bit.ly/xjst

Где применять…и BEMHTML в частности

68

…и BEMHTML в частностиГде применять

Где применять…и BEMHTML в частности

70

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

Где применять…и BEMHTML в частности

71

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

— на сервере

— на клиенте

Где применять…и BEMHTML в частности

72

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

— много HTML

Где применять…и BEMHTML в частности

73

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

— много HTML

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

Где применять…и BEMHTML в частности

74

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

— много HTML

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

— БЭМ

Где применять…и BEMHTML в частности

75

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

— много HTML

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

— БЭМ, хотя бы в CSS

Где применять…и BEMHTML в частности

76

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

— много HTML

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

— БЭМ, хотя бы в CSS

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

Где применять…и BEMHTML в частности

77

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

— много HTML

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

— БЭМ, хотя бы в CSS

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

— есть общие блоки

Где лучше попробовать…и BEMHTML в частности

78

…и BEMHTML в частностиГде лучше попробовать

Где лучше попробовать…и BEMHTML в частности

80

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

Где лучше попробовать…и BEMHTML в частности

81

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

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

Где лучше попробовать…и BEMHTML в частности

82

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

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

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

Как попробовать…и BEMHTML в частности

83

…и BEMHTML в частностиКак попробовать

Как попробовать…и BEMHTML в частности

85

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

Как попробовать…и BEMHTML в частности

86

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

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

Как попробовать…и BEMHTML в частности

87

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

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

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

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

@vegedgithub.com/veged