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