Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
Bemer: декларативная 
шаблонизация на 
учебном примере 
Артём Курбатов 
MoscowJS 14, 28 августа 2014 
2
Артём Курбатов 
3 
tenorok@yandex-team.ru 
@tenorak 
github.com/tenorok 
разработчик интерфейсов в Яндексe
Содержание 
• Общие принципы 
• Шаблонизатор Bemer 
• Демонстрация 
4
Block 
Element 
Modifier 
5
6 
ru.bem.info
7 
БЭМ — это просто!
Императивный? 
8 
<h1 style="font-size: 24px; color: red;">Title</h1> 
<p style="font-size: 14px; line-height: 1.5">Paragr...
Декларативный! 
9 
h1 { 
font-size: 24px; 
color: red; 
} 
! 
p { 
font-size: 14px; 
line-height: 1.5; 
} 
<h1>Title</h1> ...
Императивный… 
10 
<ul class="menu"> 
{{#for items}} 
<li> 
{{#if current}} 
<b></b> 
{{else}} 
<a></a> 
{{/if}} 
</li> 
{...
Декларативный! 
11 
bemer 
.match('menu', { 
tag: 'ul' 
}) 
.match('menu__item', { 
tag: 'li', 
content: {tag: 'a'} 
}); 
...
Абстракции в БЭМ-терминах 
• CSS — из коробки 
! 
! 
12
Абстракции в БЭМ-терминах 
• CSS — из коробки 
• шаблоны — БЭМ-шаблонизаторы 
! 
13
Абстракции в БЭМ-терминах 
• CSS — из коробки 
• шаблоны — БЭМ-шаблонизаторы 
• клиентский JavaScript: i-bem.js 
14 
bower...
Шаблонизатор Bemer 
15
Преимущества 
• Простота 
• чистый JavaScript без компиляции 
• синтаксис как в i-bem.js 
16
Преимущества 
17 
• Гибкость 
• звёздочки в любой части селектора 
! 
! 
! 
! 
! 
input__*_theme_*
Преимущества 
18 
• Гибкость 
• звёздочки в любой части селектора 
! 
input__*_theme_* 
! 
• селекторы на элемент блока с ...
Преимущества 
• Гибкость 
• звёздочки в любой части селектора 
! 
! 
• селекторы на элемент блока с модификатором 
! 
! 
•...
Недостатки 
• Чистый JavaScript без сахара 
• Медленнее аналогов 
! 
! 
! 
20
Другие шаблонизаторы 
• BH 
! 
! 
• BEMHTML 
21 
github.com/enb-make/bh 
ru.bem.info/technology/bemhtml
Шаблонизатор Bemer 
Использование 
22
Установка 
23 
Bower 
bower install bemer 
NPM 
npm install bemer
Подключение 
24 
В браузере 
<script src="bower_components/bemer/bemer.min.js"></script> 
В Node.js 
var bemer = require('...
Шаблонизатор Bemer 
Демонстрация 
25 
tenorok.github.io/bemer
Что дальше? 
26 
github.com/tenorok/bemer
27 
! 
ru.bem.info 
ru.bem.info/forum 
@bem_ru #b_ 
info@bem.info 
БЭМ — это просто!
Артём Курбатов 
Разработчик интерфейсов 
tenorok@yandex-team.ru 
github.com/tenorok 
Спасибо 
28
Upcoming SlideShare
Loading in …5
×

Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. MoscowJS 14

Видео: http://youtu.be/4uFDrReOIpA

  • Login to see the comments

  • Be the first to like this

Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. MoscowJS 14

  1. 1. 1
  2. 2. Bemer: декларативная шаблонизация на учебном примере Артём Курбатов MoscowJS 14, 28 августа 2014 2
  3. 3. Артём Курбатов 3 tenorok@yandex-team.ru @tenorak github.com/tenorok разработчик интерфейсов в Яндексe
  4. 4. Содержание • Общие принципы • Шаблонизатор Bemer • Демонстрация 4
  5. 5. Block Element Modifier 5
  6. 6. 6 ru.bem.info
  7. 7. 7 БЭМ — это просто!
  8. 8. Императивный? 8 <h1 style="font-size: 24px; color: red;">Title</h1> <p style="font-size: 14px; line-height: 1.5">Paragraph 1</p>
  9. 9. Декларативный! 9 h1 { font-size: 24px; color: red; } ! p { font-size: 14px; line-height: 1.5; } <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p>
  10. 10. Императивный… 10 <ul class="menu"> {{#for items}} <li> {{#if current}} <b></b> {{else}} <a></a> {{/if}} </li> {{/for}} </ul>
  11. 11. Декларативный! 11 bemer .match('menu', { tag: 'ul' }) .match('menu__item', { tag: 'li', content: {tag: 'a'} }); bemer.match('menu__item_current', { content: {tag: 'b'} });
  12. 12. Абстракции в БЭМ-терминах • CSS — из коробки ! ! 12
  13. 13. Абстракции в БЭМ-терминах • CSS — из коробки • шаблоны — БЭМ-шаблонизаторы ! 13
  14. 14. Абстракции в БЭМ-терминах • CSS — из коробки • шаблоны — БЭМ-шаблонизаторы • клиентский JavaScript: i-bem.js 14 bower install i-bem ru.bem.info/libs/bem-bl/dev/desktop/i-bem
  15. 15. Шаблонизатор Bemer 15
  16. 16. Преимущества • Простота • чистый JavaScript без компиляции • синтаксис как в i-bem.js 16
  17. 17. Преимущества 17 • Гибкость • звёздочки в любой части селектора ! ! ! ! ! input__*_theme_*
  18. 18. Преимущества 18 • Гибкость • звёздочки в любой части селектора ! input__*_theme_* ! • селекторы на элемент блока с модификатором ! input_size_m__clear !
  19. 19. Преимущества • Гибкость • звёздочки в любой части селектора ! ! • селекторы на элемент блока с модификатором ! ! • весь код разделён на модули 19 input__*_theme_* input_size_m__clear tenorok.github.io/bemer/jsdoc
  20. 20. Недостатки • Чистый JavaScript без сахара • Медленнее аналогов ! ! ! 20
  21. 21. Другие шаблонизаторы • BH ! ! • BEMHTML 21 github.com/enb-make/bh ru.bem.info/technology/bemhtml
  22. 22. Шаблонизатор Bemer Использование 22
  23. 23. Установка 23 Bower bower install bemer NPM npm install bemer
  24. 24. Подключение 24 В браузере <script src="bower_components/bemer/bemer.min.js"></script> В Node.js var bemer = require('bemer');
  25. 25. Шаблонизатор Bemer Демонстрация 25 tenorok.github.io/bemer
  26. 26. Что дальше? 26 github.com/tenorok/bemer
  27. 27. 27 ! ru.bem.info ru.bem.info/forum @bem_ru #b_ info@bem.info БЭМ — это просто!
  28. 28. Артём Курбатов Разработчик интерфейсов tenorok@yandex-team.ru github.com/tenorok Спасибо 28

×