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

1. BEMHTML
NOT yet another øшàаáбëлîоíнèиçзàаòтîоðр
Сергей Бережной
YaC, Москва, 19 сентября 2011 года

2. who is
"шаблонизатор"
?

3. BlackBox

4. ctx
BlackBox
HTML

5. <ul>
[% IF weather %]
<li>[% weather.temp %]</li>
[% END %]
[% IF traffic %]
<li>[% traffic.level %]</li>
[% END %]
</ul>

6. Text

7. добавить элемент

8. добавить элемент
изменить HTML

9. <ul>
[% IF weather %]
<li>[% weather.temp %]</li>
[% END %]
[% IF traffic %]
<li>[% traffic.level %]</li>
[% END %]
[% IF mail %]
<li>[% mail.unread %]</li>
[% END %]
</ul>

10. <ul>
[% IF weather %]
<li><i>
[% weather.temp %]
</i></li>
[% END %]
[% IF traffic %]
<li><i>
[% traffic.level %]
</i></li>
[% END %]
</ul>

12. BlackBox BlackBox

13. data ctx
BlackBox
view ctx
BlackBox
HTML

14. data ctx
BlackBox
view ctx
BEMHTML
HTML

15. 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 };

16. block menu
elem item
weather.temp
elem item
traffic.level

17. block menu {
tag: 'ul'
elem item, tag: 'li'
}

18. block menu, elem item {
tag: 'li'
content: {
tag: 'i',
content: this.ctx.content }
}

20. project

21. library

22. library
project1 project2 project3

24. [% BLOCK menu %]
<ul>
[% FOREACH item IN items %]
<li>[% item %]</li>
[% END %]
</ul>
[% END %]

25. [% BLOCK item %]
<li><i>[% content %]</i></li>
[% END %]

26. [% BLOCK menu %]
<ul>
[% FOREACH i IN items %]
[% PROCESS item content = i %]
[% END %]
</ul>
[% END %]

27. block menu {
tag: 'ul'
elem item, tag: 'li'
}

28. block menu, elem item, content: {
block: 'icon',
content: this.ctx.content
}

29. [% BLOCK menu %]
[% BLOCK item %]

30. block menu,
elem item,
this.ctx.bla,
content: 'bla'

31. гипотеза Сепира — Уорфа

32. Text

33. Вавилон smallbay.ru

34. JavaScript

35. БЭМ

36. CSS

37. CSS ~ JS

38. CSS ~ JS ~ HTML

39. data ctx
BlackBox
БЭМ-дерево
BEMHTML
HTML

40. blocks/
myblock/
myblock.css
myblock.js
myblock.bemhtml

42. производительность выразительность

43. что роботу хорошо, то человеку
смерть

44. инлайнинг

45. инлайнинг
статические вычисления

46. инлайнинг
статические вычисления
т.д. и т.п.

47. инлайнинг
статические вычисления
т.д. и т.п.
profiling based

48. clubs.ya.ru/bem/replies.xml?item_no=992
clck.ru/KNAq

49. Сергей Бережной
veged@yandex-team.ru
github.com/veged