ݺߣ

ݺߣShare a Scribd company logo

Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс

•
•
yaevents
yaevents

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

1 of 49
Downloaded 20 times
BEMHTML NOT yet another øшàаáбëлîоíнèиçзàаòтîоðр Сергей Бережной YaC, Москва, 19 сентября 2011 года
who is "шаблонизатор" ?
BlackBox
ctx BlackBox 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>
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
BlackBox BlackBox
data ctx BlackBox view ctx BlackBox HTML
data ctx BlackBox view ctx BEMHTML HTML
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 } }
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
project
library
library project1 project2 project3
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
[% 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 BlackBox БЭМ-дерево BEMHTML HTML
blocks/ myblock/ myblock.css myblock.js myblock.bemhtml
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
производительность выразительность
что роботу хорошо, то человеку смерть
инлайнинг
инлайнинг статические вычисления
инлайнинг статические вычисления т.д. и т.п.
инлайнинг статические вычисления т.д. и т.п. profiling based
clubs.ya.ru/bem/replies.xml?item_no=992 clck.ru/KNAq
Сергей Бережной veged@yandex-team.ru github.com/veged

More Related Content

Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс