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