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

  • 6,597 views
Uploaded on

Сергей Бережной, Яндекс …

Сергей Бережной, Яндекс

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

Тема доклада
Построение сложносоставных блоков в шаблонизаторе bemhtml.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,597
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
17
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. BEMHTMLNOT 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>
  • 11. BlackBox BlackBox
  • 12. data ctx BlackBox view ctx BlackBox HTML
  • 13. data ctx BlackBox view ctx BEMHTML HTML
  • 14. 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 };
  • 15. block menu elem item weather.temp elem item traffic.level
  • 16. block menu { tag: ul elem item, tag: li}
  • 17. block menu, elem item { tag: li content: { tag: i, content: this.ctx.content }}
  • 18. project
  • 19. library
  • 20. libraryproject1 project2 project3
  • 21. [% BLOCK menu %] <ul> [% FOREACH item IN items %] <li>[% item %]</li> [% END %] </ul>[% END %]
  • 22. [% BLOCK item %] <li><i>[% content %]</i></li>[% END %]
  • 23. [% BLOCK menu %] <ul> [% FOREACH i IN items %] [% PROCESS item content = i %] [% END %] </ul>[% END %]
  • 24. block menu { tag: ul elem item, tag: li}
  • 25. block menu, elem item, content: { block: icon, content: this.ctx.content}
  • 26. [% BLOCK menu %][% BLOCK item %]
  • 27. block menu, elem item, this.ctx.bla, content: bla
  • 28. гипотеза Сепира — Уорфа
  • 29. Text
  • 30. Вавилон smallbay.ru
  • 31. JavaScript
  • 32. БЭМ
  • 33. CSS
  • 34. CSS ~ JS
  • 35. CSS ~ JS ~ HTML
  • 36. data ctx BlackBox БЭМ-дерево BEMHTML HTML
  • 37. blocks/ myblock/ myblock.css myblock.js myblock.bemhtml
  • 38. производительность выразительность
  • 39. что роботу хорошо, то человеку смерть
  • 40. инлайнинг
  • 41. инлайнингстатические вычисления
  • 42. инлайнингстатические вычисления т.д. и т.п.
  • 43. инлайнингстатические вычисления т.д. и т.п. profiling based
  • 44. clubs.ya.ru/bem/replies.xml?item_no=992 clck.ru/KNAq
  • 45. Сергей Бережнойveged@yandex-team.rugithub.com/veged