Successfully reported this slideshow.
Your SlideShare is downloading. ×

Шаблонизатор BEMHTML

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Documents in JavaScript
Documents in JavaScript
Loading in …3
×

Check these out next

1 of 49 Ad

More Related Content

Advertisement

Recently uploaded (20)

Advertisement

Шаблонизатор BEMHTML

  1. 1. BEMHTML NOT 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. library project1 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.ru github.com/veged

×