Сайт с нуля на полном стеке БЭМ-технологий

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Сайт с нуля на полном стеке
БЭМ-технологий
Жека Константинов, Дима Белицкий

Дима Белицкий
2
dmtry@yandex-team.ru
@dabelitsky
github.com/dab
Разработчик интерфейсов в
Яндексе

Жека Константинов
3
3
sipayrt@yandex-team.ru
@sipayrt
github.com/sipayrt
разработчик интерфейсов в
Яндексе

О чем поговорим?
Методолгия
Шаблонизация и обмен данными
JavaScript + BEM
Все — на примере демо-проекта
4

БЭМ — что это?
Методология БЭМ на bem.info bit.ly/1hMHNB2
Доклад Вовы Гриненко про методологию БЭМ и БЭМ-платформу bit.l...

Вся история БЭМ
История БЭМ на bem.info bit.ly/1eAsQBo
Доклад Витали Харисова про историю БЭМ bit.ly/1m8ijzQ
6

BEMJSON
bit.ly/bemjson

BEMHTML

Декларативность
9

Декларативность
9
условие {тело шаблона}

$Декларативность 9 условие {тело шаблона} .island__header { display: inline-block; }$

$Декларативность 9 условие {тело шаблона} .island__header { display: inline-block; } block('island').elem('header')( t...$

BEMJSON
входные данные
10

BEMHTML
декларативный шаблон
11

HTML
результат
12

Шаблон BEMHTML. Моды
13

Шаблон BEMHTML. Моды
14

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Шаблон BEMHTML. Моды
14
default — набор и порядок прохождения остальных мод
tag — генерация HTML тэга
js — наличие js ...

Представление БЭМ-сущностей
15

Представление БЭМ-сущностей
15
{ block: 'b-menu' }

Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }

Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color:...

Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color:...

Представление БЭМ-сущностей
15
{ block: 'b-menu' }
{ elem: 'item' }
{
block: 'b-link',
mods: { pseudo: 'yes', color:...

Представление HTML
16

Представление HTML
16
{ block: 'my-block', tag: 'img' }

Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }}

Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }} ...

Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }} ...

Представление HTML
16
{ block: 'my-block', tag: 'img' }
{ block: 'my-block', tag: 'img', attrs: { src: ‘…', alt: '' }} ...

BEMHTML Руководство пользователя
17

BEMHTML Руководство пользователя
17
Это и многое другое на нашем сайте bit.ly/bemhtmlref

Двухэтапная
шаблонизация

data → view → HTML

data → БЭМ-дерево → HTML

data + BEMTREE → BEMJSON
!
BEMJSON + BEMHTML → HTML

BEMTREE + BEMHTML

Декларативная шаблонизация

BEMTREE + BEMHTML
24

BEMTREE + BEMHTML
24
декларативность

BEMTREE + BEMHTML
24
декларативность
уровни переопределения

BEMTREE + BEMHTML
24
декларативность
уровни переопределения
работают с предметной областью БЭМ

BEMTREE + BEMHTML
24
декларативность
уровни переопределения
работают с предметной областью БЭМ
единый синтаксис

JavaScript, BEMTREE и BEMHTML
25

JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript

JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript кон...

JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript кон...

JavaScript, BEMTREE и BEMHTML
25
специализированные DSL, расширяющие JavaScript
можно использовать любые JavaScript кон...

Архитектура шаблонизации
26

Шаблонизация данных в bem-core
27

Шаблонизация данных в bem-core
27
bit.ly/bemcoretpl

Терминология
28

Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента

Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий

Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий
Подпредикаты — единичные (э...

Терминология
28
Мода — шаг генерации фрагмента BEMJSON
фрагмента
Предикат — набор условий
Подпредикаты — единичные (э...

Шаблон BEMTREE. Моды
29

Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного...

Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного...

Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного...

Шаблон BEMTREE. Моды
29
пустая мода — имеет смысл только в том случае, если необходимо изменить
принцип обхода входного...

BEMTREE Руководство пользователя
30

BEMTREE Руководство пользователя
30
bit.ly/bemtreeref

Отличия BEMHTML и BEMTREE
31
BEMTREE BEMHTML
генерация БЭМ-дерева генерация HTML
моды default, content, пустая
все чт...

Шаблоны. Синтаксис
32

Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);

Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);
match(подпредикат 1).match(подпредикат 2)(...

Шаблоны. Синтаксис
32
match(подпредикат1, подпредикат2, подпредикат3)(тело);
match(подпредикат 1).match(подпредикат 2)(...

Шаблоны. Синтаксис
33

Шаблоны. Синтаксис
33
match(
this.block === 'link',
function() { return this.ctx.icon; }
)
.content()(function() {
...

Шаблоны. Синтаксис
33
match(
this.block === 'link',
function() { return this.ctx.icon; }
)
.content()(function() {
...

Let’s code
BEMHTML

Архитектура приложения
API сервисов - сервер (сборщик данных) - bemjson - html
35

Посмотрим
код сервера
BEMTREE

JavaScript + БЭМ

38
Модульная система
modules.define('i-bem', ['inherit'], function(provide, inherit) {
var BEM = inherit(/* … */)
prov...

39
Модульная система
modules.require(['i-bem', 'jquery'], function(BEM, $) {
/* код, использующий модули i-bem и jquery...

i-bem.js

Что такое i-bem.js
41

Что такое i-bem.js
41
Блок, помогающий делать другие блоки

Что такое i-bem.js
41
Блок, помогающий делать другие блоки
Реализация блока i-bem в технологии JavaScript

Что такое i-bem.js
41
Блок, помогающий делать другие блоки
Реализация блока i-bem в технологии JavaScript
jQuery для н...

Что дает i-bem.js
42

Что дает i-bem.js
42
Работа с предметной областью БЭМ

Что дает i-bem.js
42
Работа с предметной областью БЭМ
Декларативный подход

Что дает i-bem.js
42
Работа с предметной областью БЭМ
Декларативный подход
Возможность доопределения блоков

Блоки с JS-представлением

44
Блоки с js-представлением
{!
!!!!block: 'form'!
}

45
Блоки с js-представлением
{!
!!!!block: 'form',!
!!!!js: true!
}

46
Блоки с js-представлением
{!
!!!!block: 'form',!
!!!!js: { p1: 'v1', p2: 'v2', … }!
}

47
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

48
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

49
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ form: {} }" ></div>

50
Блоки с js-представлением
<div class="form i-bem" !
!!!! data-bem="{ !
!!!!!!!form: {!
!!!!!!!!!!p1: 'v1',!
!!!!!...

Декларация БЭМ-сущностей

52
Декларация блока
BEMDOM.decl('form', {!
/* методы экземпляра блока */
}, {!
/* методы класса */
});

53
Декларация блока
BEMDOM.decl('form', {!
/* методы экземпляра блока */
}, {!
/* методы класса */
});!
!
.form {!...

$54 BEMDOM.decl('form', { myMethod: function() { // экземпляр this // ссылка на класс this.__self // статический мет...$

$55 BEMDOM.decl('form', { /* … */ }, { myStaticMethod: function() { // класс this // super-call this.__base() } });$

$56 Реакция на установку модификатора .form { display: flex; } ! .form_disabled { opacity: .5; }$

57
Реакция на установку модификатора
BEMDOM.decl('form', {!
onSetMod: {!
!!!! disabled: {!
!!!!!!!!!!!'true': functio...

58
Реакция на установку модификатора
BEMDOM.decl('form', {!
onSetMod: {!
!!!! disabled: function(modName, modVal) {!
...

59
Наследование
BEMDOM.decl({!
block: 'dialog', !
baseBlock: 'form'!
}, {!
/* методы экземпляра блока */
}, {!
/* ...

Инициализация

61
Инициализация
<div class="form i-bem" !
!!!! data-bem="{ 'form': {} }" /><div>

$<div class="form i-bem form_js_inited" ! !!!! data-bem="{ 'form': {} }" /><div> 62 Инициализация$

63
Инициализация
BEMDOM.decl('form', {!
onSetMod: {!
!!!! js: {!
inited: function() {!
/* конструктор блока */
}!
...

Набор хелперов

Набор хелперов
65

Набор хелперов
65
Поиск элементов и других блоков

Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами

Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами
Работа с событиями

Набор хелперов
65
Поиск элементов и других блоков
Работа с модификаторами
Работа с событиями
Перестроение DOM-дерева

66
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')

67
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')
!
// ...

68
// селекторы блоков
this.findBlockInside('button')
this.findBlockOutside('page')
this.findBlockOn('dialog')
!
// ...

Работа с событиями
69

Работа с событиями
69
DOM-события

Работа с событиями
69
DOM-события
BEM-события

Работа с событиями
69
DOM-события
BEM-события
Каналы

70
Работа с событиями
// DOM-события
this.bindTo('submit', function() { /*…*/ })
this.unbindFrom('submit')

71
Работа с событиями
// DOM-события
this.bindTo('submit', function() { /*…*/ })
this.unbindFrom('submit')
!
// BEM-...

И много чего ещё!
72

И много чего ещё!
72
Блоки без DOM-представления

И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация

И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация
Делегирование событий

И много чего ещё!
72
Блоки без DOM-представления
Отложенная инициализация
Делегирование событий
Инстансы элементов

Очень полезные ссылки!
!
ym — github.com/ymaps/modules
Генератор проектов — ru.bem.info/tools/bem/bem-stub
Пошаговое р...