BEMTREE – генерируй
дерево
Сергей Максимов
BEMup в рамках YaC 2013, Москва
Генерация страницы

data

HTML

2
Шаблонизаторы

Тысячи их
Template Toolkit 2

4
Генерация страницы

data

html

5
TT: шаблон

[% SET title = 'Hello World' %]
<h1>[% title %]</h1>

6
TT: конструкции
[% IF name == 'admin' %]
<button>Drop DB</button>
[% END %]
[% FOREACH i IN items %]
* [% i %]
[% END %]

...
TT: шаблон посложнее
[%~ MACRO b_banner_preview(options) BLOCK; ~%]
<div class="[% class.join(' ') %]">
b_banner_preview__...
Template Toolkit 2
Плюсы
простой
без компиляции
возможны perl-вставки
Минусы
медленный
невыразительный
14
Двухпроходная шаблонизация

data ctx

view ctx

view

15
Двухпроходная шаблонизация

data

bemjson

html

16
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.js
blocks[‘page’] = function(data) {
var title = data.title;
return {
block: ‘page’,
title: title,
content: blocks[‘p...
priv.js
Плюсы
просто
быстро
сердито
Минусы
неудобно
22
BEMTREE – технология генерации
БЭМ-дерева, синтаксически схожа
с BEMHTML

23
Генерация страницы

data

BEMTREE

bemjson

BEMHTML

html

24
Генерация страницы

data

html

25
Шаблоны блоков

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’ },...
BEMTREE: page__head
block page, elem head, content: [
{ elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup
javascript’ },...
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-core
https://github.com/bem/bem-core/blob/v1/.bem/techs/
bemtree.js

35
Сергей Максимов
Руководитель группы интерфейсов
Справочника и Директа
@dosyara
ddos@yandex-team.ru

36
Спасибо, %username
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Сергей Максимов — BEMTREE — генерируй дерево
Upcoming SlideShare
Loading in...5
×

Сергей Максимов — BEMTREE — генерируй дерево

591

Published on

Рассказ о том, как мы дошли до двухпроходной шаблонизации. Как можно шаблонизировать данные, если не верстка, а структура диктует построение шаблонов. И как мы генерируем БЭМ-дерево с помощью технологии BEMTREE.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Сергей Максимов — BEMTREE — генерируй дерево

  1. 1. BEMTREE – генерируй дерево Сергей Максимов BEMup в рамках YaC 2013, Москва
  2. 2. Генерация страницы data HTML 2
  3. 3. Шаблонизаторы Тысячи их
  4. 4. Template Toolkit 2 4
  5. 5. Генерация страницы data html 5
  6. 6. TT: шаблон [% SET title = 'Hello World' %] <h1>[% title %]</h1> 6
  7. 7. TT: конструкции [% IF name == 'admin' %] <button>Drop DB</button> [% END %] [% FOREACH i IN items %] * [% i %] [% END %] 7
  8. 8. 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
  9. 9. Template Toolkit 2 Плюсы простой без компиляции возможны perl-вставки Минусы медленный невыразительный 14
  10. 10. Двухпроходная шаблонизация data ctx view ctx view 15
  11. 11. Двухпроходная шаблонизация data bemjson html 16
  12. 12. BEMJSON – JavaScriptпредставление БЭМ-дерева 17
  13. 13. BEMJSON: page { block: 'page', content: [ { elem: ‘head’, content: [...] }, { elem: ‘body’, content: [...] } ] } 18
  14. 14. HTML: page <!DOCTYPE html> <html> <head> </head> <body> </body> </html> 19
  15. 15. priv.js – технология геренации БЭМ-дерева с использованием чистого JavaScript 20
  16. 16. priv.js blocks[‘page’] = function(data) { var title = data.title; return { block: ‘page’, title: title, content: blocks[‘page__body’](data) } } 21
  17. 17. priv.js Плюсы просто быстро сердито Минусы неудобно 22
  18. 18. BEMTREE – технология генерации БЭМ-дерева, синтаксически схожа с BEMHTML 23
  19. 19. Генерация страницы data BEMTREE bemjson BEMHTML html 24
  20. 20. Генерация страницы data html 25
  21. 21. Шаблоны блоков 26
  22. 22. BEMJSON: page { block: 'page', content: [ { elem: ‘head’, content: [...] }, { elem: ‘body’, content: [...] } ] } 27
  23. 23. BEMTREE: page block page { content: [ { elem: ‘head’ }, { elem: ‘body’ } ] } 28
  24. 24. BEMTREE: page__head block page, elem head, content: [ { elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ }, { elem: ‘title’, content: this.data.title } ] 29
  25. 25. BEMTREE: page__head block page, elem head, content: [ { elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ }, { elem: ‘title’, content: this.data.title } ] 30
  26. 26. BEMTREE: page__body block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ] } 31
  27. 27. BEMTREE: page__body block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ] } 32
  28. 28. BEMTREE. Асинхронность Блоки умеют ходить за данными 33
  29. 29. BEMTREE Плюсы синтаксис декларативность БЭМ-ориентированность Минусы синтаксис компиляция 34
  30. 30. Ссылки bem-core https://github.com/bem/bem-core/blob/v1/.bem/techs/ bemtree.js 35
  31. 31. Сергей Максимов Руководитель группы интерфейсов Справочника и Директа @dosyara ddos@yandex-team.ru 36
  32. 32. Спасибо, %username
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×