Библиотека BEM Core

bem-core — это библиотека с открытым кодом, которая предоставляет набор блоков для разработки веб-интерфейсов. Содержит необходимый минимум для разработки клиентского JS и HTML-шаблонов.

Примечание. Информация о библиотеке в более информативном виде доступна на bem.info. This README is also available in English.

Содержание

• Уровни

• Блоки

• Использование

• Поддерживаемые браузеры

• Технологии

• API

• Разработка

• Команда основной разработки

• Рабочий процесс

Дополнительная информация

• История изменений

• Миграция на последующие версии

Уровни переопределения

• common.blocks — поддержка всех устройств и браузеров;

• desktop.blocks — поддержка всех десктопных браузеров;

• touch.blocks — реализация специфических особенностей для touch-платформ.

Блоки

• i-bem — базовый блок с хелперами для JS и HTML;

• i-bem-dom — базовый блок с хелперами для HTML;

• strings — хелперы для JS-строк;

• objects — хелперы для JS-объектов;

• functions — хелперы для JS-функций;

• events — JS-события;

• querystring — работа со строкой запроса;

• tick — глобальный таймер;

• idle — IDLE-событие;

• next-tick — полифил для nextTick/setTimeout(0, ...);

• inherit — ООП-хелперы;

• jquery — jQuery;

• clearfix — CSS-трюк clearfix;

• identify — идентификация JS-объектов;

• cookie — хелперы для работы с браузерными куками;

• vow — реализация Promises/A+;

• dom — хелперы для работы с DOM;

• loader — загрузчик для JS-файлов;

• ua — определение возможностей браузера;

• uri — декодирование строки из формата URI;

• keyboard — хелперы для работы с клавиатурой;

• page — скелет для html/head/body.

Использование

Наиболее простым способом начать проект с использованием bem-core является project-stub.

Поддерживаемые браузеры

Мы поддерживаем браузеры на основе статистики, получаемой на сервисах Яндекса.

Браузеры с долей:

• более 2% пользователей — полная совместимость.

• более 0.5% — частичная совместимость (означает, что данные будут доступны, но возможна деградация).

• менее 0.5% — не поддерживаются.

Desktop

Полная совместимость

• Google Chrome 29+;

• Firefox 24+;

• Yandex 1.7+;

• Opera 12.16;

• MSIE 10.0;

• MSIE 9.0;

• MSIE 8.0;

• Opera 12.15.

Частичная совместимость

• Opera 17.0;

• Opera 16.0;

• Opera 12.14;

• Opera 12.2;

• Firefox 23.

Touch

Полная совместимость

• iOS 6+;

• Android 2.3+;

• Opera Mobile 12+;

• Windows Phone 7+.

Частичная совместимость

• iOS 5;

• Android 2.2.

Технологии

• vanilla.js + browser.js;

• DEPS;

• bemhtml;

• bemtree.

API

Автосгенерированную документацию на JavaScript API блоков (JSDoc) можно посмотреть на bem.info. Например, для блока i-bem она доступна по ссылке https://ru.bem.info/libs/bem-core/current/desktop/i-bem/jsdoc/.

Разработка

• Рабочая копия

• Модульное тестирование

  • Покрытие кода тестами

Рабочая копия

• Получаем исходники нужной версии (например, v4):

  $ git clone -b v4 git://github.com/bem/bem-core.git
  $ cd bem-core
  

• Устанавливаем зависимости:

  $ npm install
  

  Для последующего запуска локально установленных npm-зависимостей нам потребуется export PATH=./node_modules/.bin:$PATH или любой альтернативный способ.

• Устанавливаем зависимые библиотеки:

  $ npm run deps
  

• Собираем примеры и тесты:

  $ npm test
  

• Запускаем разработческий сервер:

  $ npm start
  

Модульное тестирование

Сборка дефолтного тестового бандла для functions__debounce:

$ magic make desktop.specs/functions__debounce

После сборки тестового бандла вы увидите результаты выполнения тестов в консоли. Их также можно посмотреть в браузере, открыв desktop.specs/functions__debounce/spec-js+browser-js+bemhtml/spec-js+browser-js+bemhtml.html.

По аналогии можно запустить тесты для других БЭМ-сущностей, имеющих реализацию в технологии spec.js.

Покрытие кода тестами

Чтобы собрать статистику покрытия кода тестами, необходимо добавить переменную окружения ISTANBUL_COVERAGE=yes в сборке тестового бандла:

$ ISTANBUL_COVERAGE=yes magic make desktop.specs && istanbul report html

Сбор статистики покрытия тестами так же работает для запуска тестов конкретной БЭМ-сущности.

Пример для functions__debounce:

$ ISTANBUL_COVERAGE=yes magic make desktop.specs/functions__debounce && istanbul report html

После завершения выполнения тестов, можно посмотреть отчет о покрытии кода тестами, открыв в браузере страницу coverage/index.html.

Полный отчет и статистику покрытия кода библиотеки тестами можно посмотреть на странице профиля bem-core в проекте Coveralls.

Для сборки и запуска тестов используется библиотека enb-bem-specs. См. подробную информацию про инфраструктуру тестирования.

Команда основной разработки

• veged

• dfilatov

• tadatuta

Рабочий процесс

Список текущих задач отображается на специальном Agile Board.

Статусы задач:

• backlog — неразобранные задачи, которые требуют обсуждения командой для оценки и принятия решения о реализации. В таком статусе также могут находиться задачи, по которым нужна дополнительная информация.

• ready — разобранные задачи, решение о реализации которых принято.

• in progress — задачи с конкретным исполнителем, которые находятся в работе.

• done — задачи, закрытые за последние семь дней (это временное техническое ограничение выбранного Agile Board).

Лицензия

© 2012 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.