Слайды к докладу Сергея Бережного "Шаблонизатор BEMHTML" на YAC2011

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