1.
2

2.
bem-components: от методологии
до full stack платформы
Владимир Гриненко, Елена Джетпыспаева
3 октября, РИФ-Воронеж 2014
3

3.
О нас
— Владимир Гриненко
— руковожу службой разработки БЭМ
— i@tadatuta.com
— @tadatuta
— github.com/tadatuta
4

4.
О нас
— Мурся
— 3 года в Яндексе
— Я.Субботники, YaC, группа собственных мероприятий…
— маркетинг технологий, коммуникации,
Developer Relations & BEM
— mursya@yandex-team.ru
— @mursya_ru
5

5.
Содержание
— История БЭМ: от методологии до платформы
— bem-components — готовая библиотека для ваших проектов
— Сообщество БЭМ
— Пользователям и контрибьюторам
6

6.
БЭМ — о чем это вообще
— БЭМ — это разделение интерфейсы на блоки
— ООП в полный рост
— Единая предметная область
7

7.
БЭМ позволяет
— инкапсулировать реализацию блока
8

8.
Нейминг
Блок__Элемент_Модификатор
9

9.
БЭМ позволяет
— инкапсулировать реализацию блока
— наследовать блоки друг от друга
10

10.
БЭМ позволяет
— инкапсулировать реализацию блока
— наследовать блоки друг от друга
— полиморфизм в терминах модификаторов
11

11.
3 источника, 3 составные части
— Методология
— Инструменты
— Библиотеки готовых блоков
14

12.
Преимущества
— Уменьшение сложности кода
— Упрощение коммуникации
— Реиспользование кода
— Ускорение разработки
15

13.
Как меняется процесс разработки
16

14.
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
17

15.
BEMJSON
{
block: 'button',
mods: { theme: 'promo' },
content: 'Разместить рекламу'
}
18

16.
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
19

17.
Файловая система
prj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 20

18.
Файловая система
prj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 21

19.
Отличия БЭМ
— Абстракция над DOM — мыслим в терминах блоков
— Разделение на блоки отражено и на файловой системе
— Декларативность во всем
22

20.
BEMHTML
block button {
tag: 'input'
attrs: { type: 'button'}
}
23

21.
История БЭМ
24

22.
История
— в Яндексе
— под названием АНБ
— Виталя Харисов и Серега veged Бережной
— bem-bl и bem-tools
— bem-core и bem-components
— c 2006 и по сей день
25

23.
bem-components
26

24.
bem-components — готовая библиотека
для ваших проектов
— Компонентный веб — будущее уже наступило!
— 20 блоков и это не предел
— Тестируем все и вся
— OpenSourced, scaled, delivered — it's yours!
27

25.
bem-components / состав
— link
— button
— input
— attach
— checkbox-group
— radio-group
— menu
— popup
— dropdown
— icon
— image
— spin
— select
— в активной разработке modal
28

26.
bem-components / в тренде
— компонентный подход
— CSS-препроцессор
— автопрефиксер
30

27.
bem-components / обгоняя тренды
— в браузерах еще вчера
— уровни переопределения
— сборка
— декларативность
— дизайн опционально
31

28.
bem-components / тестирование
— ручное
— unit-тесты для JS
— тесты на шаблоны
— тесты на верстку (gemini)
— проверка кодстайла
— CI
32

29.
Как быстро начать разрабатывать на БЭМ
33

30.
Quick start
— bem.info
— git clone https://github.com/bem/project-stub.git
— npm i
— ./node_modules/.bin/bem server
34

31.
Сообщество БЭМ
36

32.
«Когда я спросил Харисова на Я.Субботнике в
2009 (я тогда в Яндексе не работал), почему они
бесплатно рассказывают и выкладывают
наработки, он ответил: „Когда делаешь что-то
долго и хорошо, со временем появляется желание
поделиться“»,
— из разговора с одним неизвестным
БЭМ-разработчиком
“
38

33.
Ведь приходилось делать
— БЭМ — методологию и технологии
— Лего — общепортальную мета-библиотеку блоков Яндекса
— разбираться с багами сервисов (Поиска, Картинок, Видео и т.д.)
— отвечать на запросы
— эвангелизировать
— иногда чуть-чуть жить
41

34.
Не только методология, но и
— библиотеки
— инструменты
— JS-фреймворк
— шаблонизатор
— движок для сбора документации и примеров
— тесты для блоков
— много чего еще
42

35.
БЭМ — первый технологический продукт
Яндекса
45

36.
Кто мы
— Служба разработки БЭМ
— Лего и разработчики сервисов Яндекса
— Разработчики, использующие БЭМ
46

37.
Что мы делаем
— Служба разработки БЭМ — продукт
— Команда Лего — мета-библиотеку Яндекса на этом продукте
— Разработчики сервисов — сервисы на Лего или БЭМ и часто свои
БЭМ-проекты
— Разработчики, использующие БЭМ — проекты на БЭМ, свои БЭМ-
инструменты, библиотеки и даже целые новые методологии :)
47

38.
Пользователям и контрибьюторам
53

39.
Арсенал
— Продукт — библиотека bem-components: 20 блоков, тесты,
документация, демо (coming), пыщ-пыщ!
— Служба разработки продукта — разработчики, тестировщики,
документаторы
— Проекты и пользователи разного уровня сложности, размера, тп
— Онлайн-площадка — bem.info
54

40.
Арсенал
— Продукт — библиотека bem-components: 20 блоков, тесты,
документация, демо (coming), пыщ-пыщ!
— Служба разработки продукта — разработчики, тестировщики,
документаторы
— Проекты и пользователи разного уровня сложности, размера, тп
— Онлайн-площадка — bem.info
— Оффлайн-площадка: BEMup-ы, хакатоны, конференции и семинары
— Мурся, маркетинг, коммьюнити 62

41.
Пользователям и контрибьюторам
— Помогаем консультациями
— Реагируем на фидбек
— Отвечаем на фичреквесты
— Продвигаем вместе
64

42.
БЭМ
Блок__Элемент_Модификатор
ru.bem.info
ru.bem.info/forum
info@bem.info
@bem_ru #b_ Спасибо!
66