2

bem-components: от методологиидо full stack платформы

Владимир Гриненко, Елена Джетпыспаева

3 октября, РИФ-Воронеж 20143

О нас— Владимир Гриненко

— руковожу службой разработки БЭМ

— i@tadatuta.com

— @tadatuta

— github.com/tadatuta

4

О нас— Мурся

— 3 года в Яндексе

— Я.Субботники, YaC, группа собственных мероприятий…

— маркетинг технологий, коммуникации,

Developer Relations & BEM

— mursya@yandex-team.ru

— @mursya_ru

5

Содержание— История БЭМ: от методологии до платформы

— bem-components — готовая библиотека для ваших проектов

— Сообщество БЭМ

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

6

БЭМ — о чем это вообще— БЭМ — это разделение интерфейсы на блоки

— ООП в полный рост

— Единая предметная область

7

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

8

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

9

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

— наследовать блоки друг от друга

10

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

— наследовать блоки друг от друга

— полиморфизм в терминах модификаторов

11

3 источника, 3 составные части— Методология

— Инструменты

— Библиотеки готовых блоков

14

Преимущества— Уменьшение сложности кода

— Упрощение коммуникации

— Реиспользование кода

— Ускорение разработки

15

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

16

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

17

BEMJSON{

block: 'button',

mods: { theme: 'promo' },

content: 'Разместить рекламу'

}

18

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

— Разделение на блоки отражено и на файловой системе

19

Файловая системаprj/

blocks/

header/

header.css

header.js

header.tmpl

header.svg

header.md 20

Файловая системаprj/

blocks/

header/

_theme/

header_theme_simple.css

header_theme_full.css

__logo/

header__logo.css 21

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

— Разделение на блоки отражено и на файловой системе

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

22

BEMHTML block button {

tag: 'input'

attrs: { type: 'button'}

}

23

История БЭМ

24

История— в Яндексе

— под названием АНБ

— Виталя Харисов и Серега veged Бережной

— bem-bl и bem-tools

— bem-core и bem-components

— c 2006 и по сей день

25

bem-components

26

bem-components — готовая библиотекадля ваших проектов

— Компонентный веб — будущее уже наступило!

— 20 блоков и это не предел

— Тестируем все и вся

— OpenSourced, scaled, delivered — it's yours!

27

bem-components / состав— link

— button

— input

— attach

— checkbox-group

— radio-group

— menu

— popup

— dropdown

— icon

— image

— spin

— select

— в активной разработке modal

28

bem-components / в тренде— компонентный подход

— CSS-препроцессор

— автопрефиксер

30

bem-components / обгоняя тренды— в браузерах еще вчера

— уровни переопределения

— сборка

— декларативность

— дизайн опционально

31

bem-components / тестирование— ручное

— unit-тесты для JS

— тесты на шаблоны

— тесты на верстку (gemini)

— проверка кодстайла

— CI

32

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

33

Quick start— bem.info

— git clone https://github.com/bem/project-stub.git

— npm i

— ./node_modules/.bin/bem server

34

Сообщество БЭМ

36

«Когда я спросил Харисова на Я.Субботнике в

2009 (я тогда в Яндексе не работал), почему они

бесплатно рассказывают и выкладывают

наработки, он ответил: „Когда делаешь что-то

долго и хорошо, со временем появляется желание

поделиться“»,

— из разговора с одним неизвестным

БЭМ-разработчиком

“

38

Ведь приходилось делать— БЭМ — методологию и технологии

— Лего — общепортальную мета-библиотеку блоков Яндекса

— разбираться с багами сервисов (Поиска, Картинок, Видео и т.д.)

— отвечать на запросы

— эвангелизировать

— иногда чуть-чуть жить

41

Не только методология, но и— библиотеки

— инструменты

— JS-фреймворк

— шаблонизатор

— движок для сбора документации и примеров

— тесты для блоков

— много чего еще

42

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

45

Кто мы— Служба разработки БЭМ

— Лего и разработчики сервисов Яндекса

— Разработчики, использующие БЭМ

46

Что мы делаем— Служба разработки БЭМ — продукт

— Команда Лего — мета-библиотеку Яндекса на этом продукте

— Разработчики сервисов — сервисы на Лего или БЭМ и часто свои

БЭМ-проекты

— Разработчики, использующие БЭМ — проекты на БЭМ, свои БЭМ-

инструменты, библиотеки и даже целые новые методологии :)

47

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

53

Арсенал— Продукт — библиотека bem-components: 20 блоков, тесты,

документация, демо (coming), пыщ-пыщ!

— Служба разработки продукта — разработчики, тестировщики,

документаторы

— Проекты и пользователи разного уровня сложности, размера, тп

— Онлайн-площадка — bem.info

54

Арсенал— Продукт — библиотека bem-components: 20 блоков, тесты,

документация, демо (coming), пыщ-пыщ!

— Служба разработки продукта — разработчики, тестировщики,

документаторы

— Проекты и пользователи разного уровня сложности, размера, тп

— Онлайн-площадка — bem.info

— Оффлайн-площадка: BEMup-ы, хакатоны, конференции и семинары

— Мурся, маркетинг, коммьюнити 62

Пользователям и контрибьюторам— Помогаем консультациями

— Реагируем на фидбек

— Отвечаем на фичреквесты

— Продвигаем вместе

64

БЭМБлок__Элемент_Модификатор

ru.bem.info

ru.bem.info/forum

info@bem.info

@bem_ru #b_ Спасибо!

66