BEMHTMLNOT 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>  [% E...
Text
добавить элемент
добавить элемент изменить HTML
<ul>  [% IF weather %]     <li>[% weather.temp %]</li>  [% END %]  [% IF traffic %]     <li>[% traffic.level %]</li>  [% E...
<ul>  [% IF weather %]     <li><i>       [% weather.temp %]     </i></li>  [% END %]  [% IF traffic %]     <li><i>       [...
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,  cont...
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
libraryproject1 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      BlackBox           БЭМ-дерево                   BEMHTML                        HTML
blocks/  myblock/    myblock.css    myblock.js    myblock.bemhtml
производительность   выразительность
что роботу хорошо, то человеку            смерть
инлайнинг
инлайнингстатические вычисления
инлайнингстатические вычисления        т.д. и т.п.
инлайнингстатические вычисления        т.д. и т.п.     profiling based
clubs.ya.ru/bem/replies.xml?item_no=992             clck.ru/KNAq
Сергей Бережнойveged@yandex-team.rugithub.com/veged
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Яндекс
Upcoming SlideShare
Loading in …5
×

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

7,013 views
6,903 views

Published on

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

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

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,013
On SlideShare
0
From Embeds
0
Number of Embeds
5,655
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×