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

Содержание

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

БЭМ — о чем это вообще

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

БЭМ позволяет

• инкапсулировать реализацию блока

Нейминг

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

БЭМ позволяет

• инкапсулировать реализацию блока
• наследовать блоки друг от друга

БЭМ позволяет

• инкапсулировать реализацию блока
• наследовать блоки друг от друга
• полиморфизм в терминах модификаторов

3 источника, 3 составные части

• Методология
• Инструменты
• Библиотеки готовых блоков

Преимущества

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

Отличия БЭМ

• Абстракция над DOM — мыслим в терминах блоков

BEMJSON

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

Отличия БЭМ

• Абстракция над DOM — мыслим в терминах блоков
• Разделение на блоки отражено и на файловой системе

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

prj/
    blocks/
        header/
            header.css
            header.js
            header.tmpl
            header.svg
            header.md
		

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

prj/
    blocks/
        header/
            _theme/
        	    header_theme_simple.css
        	    header_theme_full.css
            __logo/
                header__logo.css
		

Отличия БЭМ

• Абстракция над DOM — мыслим в терминах блоков
• Разделение на блоки отражено и на файловой системе
• Декларативность во всем

BEMHTML

 block button {
    tag: 'input'
    attrs: { type: 'button'}
}

История

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

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

• Компонентный веб — будущее уже наступило!
• 20 блоков и это не предел
• Тестируем все и вся
• OpenSourced, scaled, delivered — it's yours!

bem-components / состав

bem-components / в тренде

• компонентный подход
• CSS-препроцессор
• автопрефиксер

bem-components / обгоняя тренды

• в браузерах еще вчера
• уровни переопределения
• сборка
• декларативность
• дизайн опционально

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

• ручное
• unit-тесты для JS
• тесты на шаблоны
• тесты на верстку (gemini)
• проверка кодстайла
• CI

Quick start

• bem.info
• git clone https://github.com/bem/project-stub.git
• npm i
• ./node_modules/.bin/bem server

Ведь приходилось делать

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

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

• библиотеки
• инструменты
• JS-фреймворк
• шаблонизатор
• движок для сбора документации и примеров
• тесты для блоков
• много чего еще

Кто мы

• Служба разработки БЭМ
• Лего и разработчики сервисов Яндекса
• Разработчики, использующие БЭМ

Что мы делаем

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

Арсенал

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

Арсенал

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

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

• Помогаем консультациями
• Реагируем на фидбек
• Отвечаем на фичреквесты
• Продвигаем вместе