Шаблонизатор BEMHTML

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

Сергей Бережной[email protected]

github.com/veged