YaC, Москва, 19 сентября 2011 года
Сергей Бережной
BEMHTMLNOT yet another øшàаáбëлîоíнèиçзàаòтîоðр
who is"шаблонизатор"
?
BlackBox
BlackBox
ctx
HTML
<ul> [% IF weather %] <li>[% weather.temp %]</li> [% END %] [% IF traffic %] <li>[% traffic.level %]</li> [% END %]</ul>
Text
добавить элемент
добавить элементизменить HTML
<ul> [% IF weather %] <li>[% weather.temp %]</li> [% END %] [% IF traffic %] <li>[% traffic.level %]</li> [% END %] [% IF mail %] <li>[% mail.unread %]</li> [% END %]</ul>
<ul> [% IF weather %] <li><i> [% weather.temp %] </i></li> [% END %] [% IF traffic %] <li><i> [% traffic.level %] </i></li> [% END %]</ul>
BlackBox BlackBox
data ctx
HTML
BlackBox
BlackBox
view ctx
data ctx
HTML
BlackBox
BEMHTML
view ctx
var items = [];
if(weather) items.push({ elem: 'item', content: weather.temp });
if(traffic) items.push({ elem: 'item', content: traffic.level });
return { block: 'menu', content: items };
block menu elem item weather.temp elem item traffic.level
block menu { tag: 'ul' elem item, tag: 'li'}
block menu, elem item {
tag: 'li'
content: { tag: 'i', content: this.ctx.content }
}
project
library
library
project1 project2 project3
[% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul>[% END %]
[% BLOCK item %] <li><i>[% content %]</i></li>[% END %]
[% BLOCK menu %] <ul> [% FOREACH i IN items %] [% PROCESS item content = i %] [% END %] </ul>[% END %]
block menu { tag: 'ul' elem item, tag: 'li'}
block menu, elem item, content: { block: 'icon', content: this.ctx.content}
[% BLOCK menu %]
[% BLOCK item %]
block menu, elem item, this.ctx.bla, content: 'bla'
гипотеза Сепира — Уорфа
Text
Вавилонsmallbay.ru
JavaScript
БЭМ
CSS
CSS ~ JS
CSS ~ JS ~ HTML
data ctx
HTML
BlackBox
BEMHTML
БЭМ-дерево
blocks/ myblock/ myblock.css myblock.js myblock.bemhtml
производительность выразительность
что роботу хорошо, то человеку смерть
инлайнинг
инлайнингстатические вычисления
инлайнингстатические вычисления
т.д. и т.п.
инлайнингстатические вычисления
т.д. и т.п.profiling based
clubs.ya.ru/bem/replies.xml?item_no=992
clck.ru/KNAq
