Дзен BEM: где держать .bemjson?

Question

[Роман Якимчук]

Добрый день.

Познаю дзен БЭМ'а. Очень хочу осознать, как правильно должен декомпозироваться BEMJSON между бандлами и блоками используемыми этим бандлом.

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

Пример:

У нас есть два бандла.
Каждый из бандлов содержит на странице блок со следующей структурой (BEMJSON этого блока):

{
    block: 'b-menu',
    content: [
        { elem: 'caption', content: 'Заголовок меню' },
        { elem: 'button', content: 'Кнопка в меню' }
    ]
}

Где должен находиться этот BEMJSON, в папке блока, или в .bemjson файле каждого из бандлов?

Можно ли вообще собирать BEMJSON бандла указав в нем названия только используемых блоков (в иерархии), и не описывая их контент?

Answer 1

[Алексей Ярошевич]

В bemjson описывается структура в блоках/элементах и данные страницы, бандлы — это, суть, ваши страницы.
Кажется, теперь очевидно, что bemjson нужно класть в папки бандлов.

Для чего он нужен? Для того, чтобы знать как собирается страница и из чего она состоит. Фактически, из этого файла собираются все артефакты, а процесс сборки выглядит так:
1. Собираются все названия блоков и элементов, описанных в файле bemjson;
2. Из блоков собираются файлы *.deps.js и общий список нужных файлов дополняется блоками из этих файлов, и таких же файлов этих блоков (рекурсивно);
3. Полный список файлов записывается как bemdecl.js;
4. Собираются все описанные в сборке технологии (файлы js/css/шаблоны);
5. Если сборка была из bemjson — генерируется еще и html из bemjson и шаблонов (иначе — просто шаблоны);
6. Минификация и обфускация css/js файлов (или же еще и компиляция less/stylus/sass в css, es6/coffee в js, etc.).

Как-то так)

Comments

[Роман Якимчук]

Получается, .bemjson это дерево страницы, которое держим в бандле. Тогда что из себя представляет блок? Блок не имеет разметки?

И будет очень классно, если ты сможешь рассказать как BH (модификатор нод) коррелирует со всем этим делом.

Пока нет четкой картины (именно верной) как это хозяйство держать в файловой структуре, а именно: .bemjson бандла, разметка блоков, и .bh файлы которые модифицируют разметку.

[Алексей Ярошевич]

Разметка в блоке есть и она описывает внутреннюю хтмл-структуру блока.

BH, как раз, умеет описывать для каждого блока его внутреннюю структуру. Например:

bh.match('блок', function (ctx, json) {
// у корневого элемента хотим тег section
ctx.tag('section');
// хотим еще пару атрибутов
ctx.attrs({ a: '1', b: '2' });
// и еще хотим внутри ветоньки развесить
ctx.content([
'просто текст',
{ произвольный bemjson },
'еще текст',
{ block : 'еще-блок' }
]);
});

И штука еще и в том, что таким образом все матчеры будут применены для всего bemjson дерева — как явно заданного, так и описанного в шаблонах. А еще мы можем переопределять, доопределять разметку (очень полезно для базовых компонент, или библиотек).

Как держать: Блоки отдельно (как компоненты), бандлы отдельно (как страницы из этих компонент).

Блоки — ингридиенты, бандлы или страницы — рецепты.

Самый простой вариант:
blocks/
block1/
block1.bh.js
block1.styl
block2/
block2.bh.js
bundles/
main-page/
main-page.bemjson.js

[Алексей Ярошевич]

отступы съело ;-( надеюсь, понятно, что тут в корне 2 папки: blocks и bundles, и в них все хозяйство.

[Роман Якимчук]

Леш, спасибо за ответ. Это именно то что я искал, и, получается, сейчас понимание верное. 5+ за ответ)

[Алексей Ярошевич]

RomanYakimchuk: Наздоровье ;-)