Построение сложносоставных блоков в шаблонизаторе...
DESCRIPTION
Сергей Бережной, Яндекс С 2005 года работает веб-разработчиком в Яндексе. За это время успел поучаствовать в разработке целого ряда сервисов, например, Поиска по блогам, Я.ру, Яндекс.Почты, Поиска, Картинок, Видео. Помимо внешних проектов активно занимается развитием различных внутренних инструментов для полного цикла создания сайтов. Больше всего на свете любит жену и программирование. Тема доклада Построение сложносоставных блоков в шаблонизаторе bemhtml. Тезисы Предметно-ориентированный шаблонизатор bemhtml позволяет создавать шаблоны блоков согласно методологии БЭМ. После компиляции получаются быстрые plain JavaScript-шаблоны, которые можно исполнить как на сервере, так и на клиенте. Эта технология используется в библиотеке блоков bem-bl, а также на некоторых сервисах Яндекса. Мастер-класс демонстрирует одно из преимуществ шаблонизатора bemhtml — возможность построения сложносоставных блоков. Во время мастер-класса вы узнаете об идее и синтаксисе шаблонизатора, получите готовые рецепты для решения типовых задач и анализ возможностей bemhtml.TRANSCRIPT
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