Embed Size (px)
DESCRIPTION
Рассказ о том, как мы дошли до двухпроходной шаблонизации. Как можно шаблонизировать данные, если не верстка, а структура диктует построение шаблонов. И как мы генерируем БЭМ-дерево с помощью технологии BEMTREE.
Citation preview
BEMTREE – генерируй деревоСергей МаксимовBEMup в рамках YaC 2013, Москва
Генерация страницы
2
data HTML
Шаблонизаторы
Тысячи их
Template Toolkit 2
4
Генерация страницы
5
data html
TT: шаблон
[% SET title = 'Hello World' %]
<h1>[% title %]</h1>
6
TT: конструкции[% IF name == 'admin' %]
<button>Drop DB</button>
[% END %]
[% FOREACH i IN items %]
* [% i %]
[% END %]
7
TT: шаблон посложнее[%~ MACRO b_banner_preview(options) BLOCK; ~%]
<div class="[% class.join(' ') %]">
b_banner_preview__title(options);
b_banner_preview__body(options);
b_banner_preview__footer(options);
b_banner_preview__alert(options) IF options.alert;
</div>
[%~ END; ~%]8
Template Toolkit 2Плюсы
простой
без компиляции
возможны perl-вставки
Минусы
медленный
невыразительный14
Двухпроходная шаблонизация
15
data ctx viewview ctx
Двухпроходная шаблонизация
16
data htmlbemjson
BEMJSON – JavaScript-представление БЭМ-дерева
17
BEMJSON: page
{
block: 'page',
content: [
{ elem: ‘head’, content: [...] },
{ elem: ‘body’, content: [...] }
]
}
18
HTML: page
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
19
priv.js – технология геренации БЭМ-дерева с использованием чистого JavaScript
20
priv.jsblocks[‘page’] = function(data) {
var title = data.title;
return {
block: ‘page’,
title: title,
content: blocks[‘page__body’](data)
}
}21
priv.js
Плюсы
просто
быстро
сердито
Минусы
неудобно
22
BEMTREE – технология генерации БЭМ-дерева, синтаксически схожа с BEMHTML
23
Генерация страницы
24
BEMTREE BEMHTMLdata bemjson html
Генерация страницы
25
data html
Шаблоны блоков
26
BEMJSON: page
{
block: 'page',
content: [
{ elem: ‘head’, content: [...] },
{ elem: ‘body’, content: [...] }
]
}
27
BEMTREE: page
block page {
content: [
{ elem: ‘head’ },
{ elem: ‘body’ }
]
}
28
BEMTREE: page__head
block page, elem head, content: [
{ elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ },
{ elem: ‘title’, content: this.data.title }
]
29
BEMTREE: page__head
block page, elem head, content: [
{ elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ },
{ elem: ‘title’, content: this.data.title }
]
30
BEMTREE: page__body
block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ]
}
31
BEMTREE: page__body
block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ]
}
32
BEMTREE. Асинхронность
Блоки умеют ходить за данными
33
BEMTREEПлюсы
синтаксис
декларативность
БЭМ-ориентированность
Минусы
синтаксис
компиляция34
Ссылки
bem-corehttps://github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.js
35
Спасибо, %username
