bem-components — from a methodology to a full stack platform
66
-
Upload
yelena-jetpyspayeva -
Category
Technology
-
view
28 -
download
2
Transcript of bem-components — from a methodology to a full stack platform
2
bem-components: от методологиидо full stack платформы
Владимир Гриненко, Елена Джетпыспаева
3 октября, РИФ-Воронеж 20143
О нас— Владимир Гриненко
— руковожу службой разработки БЭМ
— @tadatuta
— github.com/tadatuta
4
О нас— Мурся
— 3 года в Яндексе
— Я.Субботники, YaC, группа собственных мероприятий…
— маркетинг технологий, коммуникации,
Developer Relations & BEM
— @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
@bem_ru #b_ Спасибо!
66
