dist-поставка bem-core/bem-components, или Использование в стиле «как Бутстрап»

Существует несколько способов подключения bem-библиотек на свой проект.

Здесь я рассмотрю варианты подключения заранее собранных версий, их 4:

Подключить напрямую с CDN Яндекса
Установить собранные библиотеки через bower
Самостоятельно собрать из исходников
Воспользоваться альфа-версией кастомного билдера

Каждый вариант отличается только первым шагом, дальнейшее использование совпадает.

Подключить напрямую с CDN Яндекса

Это самый простой способ. Достаточно подключить необходимые файлы (см. раздел «Состав») в HTML и готово:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Более полный вариант базовой HTML-разметки, включающий поддержку IE8 и определение наличия JS в браузере см. в конце поста.

Установить собранные библиотеки через bower

При условии, что bower у вас уже установлен, достаточно выполнить bower i bem/bem-components-dist#v2 (либо bower i bem/bem-core-dist#v2).

Далее просто прописать путь к необходимым файлам в HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components dist</title>
    <link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <!-- write your code here -->
    <script src="bower_components/bem-components-dist/desktop/bem-components.js+bh.js"></script>
</body>
</html>

Самостоятельно собрать из исходников

Этот вариант подойдет тем, кто хочет собрать еще не выпущенную версию. Для этого потребуется:

git clone https://github.com/bem/bem-components.git
cd bem-components
npm i
npm run dist

В результате в корне bem-components появится папка dist со всеми необходимыми файлами.

Подключение не отличается от предыдущего варианта.

Воспользоваться альфа-версией кастомного билдера

Важно! На данный момент билдер не тестируется и в целом работоспособность сервиса никак не гарантируется. Используйте на собственный страх и риск.

В качестве эксперимента поднята веб-морда, позволяющая собрать код только для необходимых на проекте блоков.

Чтобы получить бандлы, нужно отметить нужные блоки. В ответ будут сгенерированы ссылки на скачивание.

Как работать с подключенными библиотеками

Тут снова возникает несколько вариантов.

Общая часть состоит в том, чтобы найти нужные блоки на bem.info.

Допустим, нужен блок select. Среди примеров нужно найти тот, который больше всего подходит.

Далее 3 варианта:

Просто скопировать нужный HTML из примера и поправить его под свои нужды (для этого нужно нажать на HTML в шапке примера). Этот вариант максимально простой, но очевидно, что при обновлении шаблонов в последующих версиях библиотеки апдейт потребует ручного внесения изменений в каждый обновленный блок.
Воспользоваться шаблонизацией на клиенте (dist включает предсобранные шаблоны BEMHTML и BH на выбор).

Для этого вместо готового HTML-кода следует брать из документации с примерами BEMJSON (кнопка рядом). Получится что-то типа:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components as a library</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
<script>
modules.require(['i-bem__dom', 'BEMHTML', 'jquery'], function(BEMDOM, BEMHTML, $) {
    var html = BEMHTML.apply({
        block : 'select',
        mods : { mode : 'check', theme : 'islands', size : 'm' },
        name : 'select1',
        val : [2, 3],
        text : 'Программа конференции',
        options : [
            { val : 1, text : 'Доклад' },
            { val : 2, text : 'Мастер-класс' },
            { val : 3, text : 'Круглый стол' }
        ]
    });

    BEMDOM.append($('.page'), html);
});
</script>
</body>
</html>

Такой код гораздо удобнее обновлять, но он не будет индексироваться, поэтому подойдет скорее для веб-приложений и прочих админок.

А третий вариант — это выполнять {BEMHTML,BH}.apply() на ноде и отдавать браузеру уже готовый HTML:

var BEMHTML = require('./dist/desktop/bem-components.bemhtml.js').BEMHTML;

BEMHTML.apply({
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}); // вернется HTML-строка

Разумеется, все три варианта можно произвольно комбинировать.

Как еще можно пользоваться dist-ом

Т.к. файлы теперь доступны с CDN, можно использовать их на разнообраных песочницах вроде jsfiddle: https://jsfiddle.net/bmu7bkne/4/ или http://jsfiddle.net/bmu7bkne/

Состав

bem-core

Доступны отдельные наборы файлов для двух платформ:

desktop
touch

Каждый набор включает в себя:

bem-core.css # стили
bem-core.js # JS
bem-core.bemhtml.js # BEMHTML-шаблоны
bem-core.bh.js # BH-шаблоны
bem-core.js+bemhtml.js # JS + BEMHTML
bem-core.js+bh.js # JS + BH

И аналогичные dev-версии (с сохранием форматирования и комментариев):

bem-core.dev.css
bem-core.dev.js
bem-core.dev.bemhtml.js
bem-core.dev.bh.js
bem-core.dev.js+bemhtml.js
bem-core.dev.js+bh.js
bem-components

На данный момент доступны отдельные наборы файлов для трех платформ:

desktop
touch-pad
touch-phone

Однако каких-либо отличий в коде между touch-pad и touch-phone нет, поэтому планируется их объединение.

Каждый набор включает в себя:

bem-components.css # стили
bem-components.ie.css # стили для IE8 (подробнее)
bem-components.js # JS
bem-components.bemhtml.js # BEMHTML-шаблоны
bem-components.bh.js # BH-шаблоны
bem-components.js+bemhtml.js
bem-components.js+bh.js

И аналогичные dev-версии (с сохранием форматирования и комментариев):

bem-components.dev.css
bem-components.dev.ie.css
bem-components.dev.js
bem-components.dev.bemhtml.js
bem-components.dev.bh.js
bem-components.dev.js+bemhtml.js
bem-components.dev.js+bh.js

Схема подключения с CDN: //yastatic.net/название-библиотеки/версия/платформа/имя-файла. Например, //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bh.js.

Полный вариант базовой HTML-разметки

<!DOCTYPE html>
<html class="ua_js_no">
<head>
    <!--[if lt IE 9]><script src="https://yastatic.net/es5-shims/0.0.1/es5-shims.min.js"></script><![endif]-->
    <meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>bem-components dist</title>
    <script>(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");(function(d,n){d.documentElement.className+=" ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no");})(document,"createElementNS");</script>
    <!--[if gt IE 8]><!--><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css"/>
    <!--<![endif]--><!--[if lte IE 8]><link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.ie.css"/><![endif]-->
</head>
<body class="page page_theme_islands">
<!-- write your code here -->
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bh.js"></script>
</body>
</html>

9 years ago

Guria

Огонь :fire:, но почему на форум? Это же полноценная документация.

9 years ago

tadatuta

@Guria, пока предполагаю, что нужно распилить на часть про bem-core и bem-components соответственно и закоммитить в каждую из библиотек. Но получается изрядно копипаста. Есть идеи, куда еще по смыслу можно положить?

9 years ago

Guria

@tadatuta Про состав поставки поместить в соответствующий раздел README каждой библиотеки + ссылка на общую часть, опубликованную на сайте в разделе Руководства, например.

9 years ago

qfox

Есть идеи, куда еще по смыслу можно положить?

Кажется, что можно саму логику сборки унести в отдельный реп, в т.ч. и доки про неё, а в библиотеки положить только какие-то фиксы, которых не хватает (если вообще что-то такое есть).

Я думал на этот счет, но не придумал где хранить библиотеки, которые есть желание собирать. Можно в репе, можно в bower с префиксом или специальным тегом bem-library. Ну и ручками пересобирать дисты периодически (или тревисом).

9 years ago

tadatuta

@zxqfox я ничего не понял :)

Если ты про логику сборки dist, то она — просто частный случай сборки бандла и зависит от особенностей сборки библиотеки, в отдельный репозиторий выносить нечего.

Собранных вариантов в результате много и хранятся они в разных местах:

Пакет для выкладки на CDN — в приватном репо.
Собранные файлы для bower в имя-библиотеки-dist в организации bem.
Код про кастомную сборку — https://github.com/tadatuta/bem-dist-server (кстати, не откажусь от волонтерской помощи в доведении пепяки до нормального состояния).
История про ручную сборку — это вообще лишь знание, что нужно запустить npm run dist.

Пока я склоняюсь к варианту, предложенному @Guria.

9 years ago

qfox

Я про дисты библиотек вообще. Кроме bem-components и bem-core есть и другие ;-)

9 years ago

vithar

Хорошо бы этот же текст опубликовать на английской версии сайта.

Кто-то может помочь перевести?

9 years ago

ilyar

Есть идеи, куда еще по смыслу можно положить?

Сюда https://www.gitbook.com BEM Guide

9 years ago

mursya

Положим в блог (у нас там технические вещи тоже есть, например https://ru.bem.info/blog/bh-v4/ и https://ru.bem.info/blog/bem-components-v2/) и вынесем в библиотеки (каждый кусок куда нужно) + дадим ссылку на обсуждение сюда

Про подобное уже писали в блог https://ru.bem.info/blog/libs-distribution/

Про перевод подумаю, может дойду

9 years ago

vithar

@mursya в блог плохо класть документацию, он по определению новостная лента, убегает наверх и устаревает. Это нечто более фундаментальное.

9 years ago

qfox

@vithar Философский камень? :smirk_cat:

9 years ago

mursya

@vithar такие вещи как этот пост мы кладем в блог и давно. это в первую очередь новость, и доносим мы ее как новость. если ей место на форуме, то уж точно место в блоге. ничто не мешает положить эту же инфу как доку в те места, где она важна, или сослаться при надобности. но новости, а в первую очередь инфа является новостью, нужно узнавать через блог продукта и команды.

пост будет добавлен в блог со ссылкой на это обсуждение.

9 years ago

DimitryDushkin

Очень крутая тема с веб-мордной сборки.

Чтобы оставлять комментарии, необходимо авторизоваться.