Очень не хватает таких туториалов :) Спасибо!

@tadatuta Владимир! Благодарю за описание процесса. Ваш пост и ответ Виталия Харисова представляют общий контекст взаимодействия БЭМ технологий. Но пока не вижу руководства как начать. Поэтому прошу вас дать инструкцию по практическому созданию конкретного блока. Например, блока nav. Куда я должен его прописать, чтобы он прошел все уровни генерации? Допустим у меня есть bundle index и в нем лежит файл index.deps.js котором уже перечислены другие блоки. Есть я пропишу в него "nav" а в bemhtml опишу логику отображения. будет ли этого достаточно? Как мне разместить мой блок и как обеспечить вложенность блоков, чтобы блок nav оказался внутри блока header?

@mathetes вам не надо ничего делать с index.deps.js.

Вам достаточно использовать nav в page и прописать его в page.deps.js, смотрите, как это сделано в bem.info

Получается, что вызов блоков производится в родительских блоках в папке common.blocks. Так я вижу в примере bem.info и заготовке tadatuta. Таким образом формируется структура DOM и не нужно в одном файле писать портянку как это делается вручную при описании bemjson. Правильно я понял?

Да. Каждый блок знает, как сформировать себя из данных (bemtree) и сгенерировать HTML (BEMHTML)

А как разруливать ситуацию если много страничек и на каждой разные данные. В root городить условия?

@JiLiZART Можно, например, так:

block('root').replace()(function() {
    return {
        block: 'page',
        mods: { view: this.ctx.view } // где view указывает на нужную страницу
    };
});

Либо уже в самом page:

block('page').content()(function() {
    return { block: this.data.view }; // при условии, что view пробросили в глобальную data
});

Тогда для каждого типа страницы создается свой собственный блок.

Ну и всякие промежуточные варианты типа:

block('page').content()(function() {
    return [
        { block: 'header' },
        { block: this.data.view },
        { block: 'footer' }
    ];
});

когда использую vm для загрузки .bemtree.js то в контексте можно указать глобальный объект для всех блоков

var context = VM.createContext({
    console: console,
    Vow: Vow,
    ...
    glob: glob
});
...
block('logo')(
    content()(function(){
         return [
            {
                 elem:'name'
                 content: glob.sitename
            },
            .....
         ]
    })
)

а как сделать по другому ?

@rustam-mh В моем предыдущем комментарии есть ответ: можно положить необходимые данные в произвольное поле корневого блока, а затем в шаблоне этого блока положить их в this, тогда данные будут достпны всем потомкам:

var data = require('./path/to/data.json');
require('./bemtree-bundle.js').BEMTREE.apply({ block: 'root', data: data });

block('root').def()(function() {
    this.data = this.ctx.data;
    return applyNext();
});

block('child').content()(function() {
    return this.data;
});

При этом удобно вводить специальный корневой блок именно для пробрасывания данных и не создавать для него отдельный DOM-узел, чтобы при необходимость мочь применять шаблоны для произвольной части дерева. Поэтому можно использовать replace(), чтобы сразу заменять корневой блок на необходимый:

block('root').replace()(function() {
    this.data = this.ctx.data;
    return { block: 'page' };
});

Все-таки непонятно как реализовывать страницы сайта, чтоб на каждой были свои блоки, подключались свои стили и скрипты.

С этим ответом ознакомился https://ru.bem.info/forum/716/#comment-158405153 Получается, что различные страницы будут реализованы в рамках одного бандла. В этом бандле мы задаем только один файл *.bemdecl.js

exports.blocks = [{ name: 'root' }];

А уже в root.bemtree.js мы в зависимости от контекста будем указывать модификатор для блока page или указывать для его содержимого определенные блоки. Но как при таком подходе разделять скрипты и стили? Они все соберутся в одном большом бандле, а это не всегда хорошо.

А полагаю, что каждая страница должна быть представлена отдельным бандлом. Ну или не каждая страница, а каждый раздел сайта. Чтоб для этого раздела собирались свои стили и скрипты. А как это правильно сделать?

Правильно ли реализовывать каждую страницу через модификатор блока page? Если страниц будет много, то много будет модификаторов у блока page, будет каша.

Или правильнее каждую страницу реализовывать отдельным блоком?

@v-bornov В зависимости от задачи имеет смысл комбинировать все перечисленные варианты.

В частности в репозитории https://github.com/tadatuta/bem-bemtree-static-project-stub в ветке master предполагается подход один бандл — одна страница.

В нем же, но в ветке https://github.com/tadatuta/bem-bemtree-static-project-stub/tree/one-bundle-gulp-watcher один общий бандл и генерация страниц на основе массива записей в модели.

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

block('page').content()(function() {
    return [
        { block: 'header' },
        { block: this.data.view },
        { block: 'footer' }
    ];
});

Это то что нужно. Но для особо одаренных объясните пожалуйста:

1. { block: this.data.view } что это за блок? где он рождается? понятно что это функция - "показать данные", а от куда они придут?
2. Планируется несколько страниц. Каким образом показать сборщику различия в контенте? Опять - { block: this.data.view }, а где мне это содержимое закодить?
3. Некоторые страницы статичные, должны собраться без внешних данных, только из блоков своей библиотеки и bem-components. Как дать понять сборщику, о разном содержании страниц?

2 и 3 вопрос различается этим - для динамики/для статики

В плане сборки динамика и статика может либо не отличаться вообще, если собирать по bemdecl-у, либо отличаться шагом автоматической генерации декла из bemjson-а. Главное, что нужно понимать, что сборка для динамики должна включать все возможные варианты блоков, которые могут быть использованы в рантайме, т.е. их все следует перечислить в соответствующих bemdecl-ах.

А пример того, как подсунуть данные можно посмотреть в bem-express: https://github.com/bem/bem-express/blob/master/server/index.js#L67

Хорошо. Попытаюсь по-другому сформулировать.

• Существует файл index.bemdecl.js в папке - desktop.bundles/index. Имеет содержимое - exports.blocks = [{ name: 'root' }];
• Существует файл contact.bemdecl.js в папке - desktop.bundles/contact. Имеет содержимое - exports.blocks = [{ name: 'root' }];

Планируется:

• Общее содержание страниц:

block('page').content()(function() {
    return [
        { block: 'header' },
        { block: 'footer' }
    ];
});

То есть общее, это { block: 'header' }, { block: 'footer' }

• Различающееся содержание страниц: index.bemdecl.js имеет:

block('content').content() {
    { block: 'video' },
    { block: 'text' },
    { block: 'map' }
});

contact.bemdecl.js имеет:

block('content').content() {
    { block: 'about' },
    { block: 'map' }
});

Считаю что block('content') - имеет разное содержимое. Следовательно он и есть - { block: this.data.view } Следующий код дает понять, что содержимое меняется в зависимости от страницы, но так же существуют общие блоки:

block('page').content()(function() {
    return [
        { block: 'header' },
        { block: this.data.view },
        { block: 'footer' }
    ];
});

Этот код лежит в файле page.bemhtml.js и является шаблоном блока page находящийся common.blocks/page/

1. В каком файле и директории, мне нужно подсунуть данные?
2. desktop.bundles/contact/ и desktop.bundles/index/ - какой набор файлов должны содержать, и с каким содержимым?

Залил на гитхаб bem-bemtree-static-project-stub с добавленными кастомными блоками, для разбора полетов. Или может ссылкой поделитесь с реализацией, где можно найти решения на данные вопросы!?

Словами, без кода не понятно. Код без слов, тоже малопонятен. Парадокс! )))) Код с разъяснением на примерах понятен. Документация с примерами сразу понимается, если там не абстракция (b_e.ctx и т.д.).

Ну так-то я к предыдущим своим словам привел ссылку на код ;)

Под { block: this.data.view } подразумевается не то, что там будет один блок с разным контентом, а просто разные блоки. Чтобы не путать их с остальными, мы их именуем с префиксом page-. Т.е. будут блоки page-index и page-contact, которые и опишут разное между страницами.

И именно они будут указаны в соответствующих бандлах помимо root.

Теперь понятнее или все-таки нужно показать в коде?

PS: обновил bem-bemtree-static-project-stub, есть смысл апнуться.

bem-bemtree-static-project-stub обновил. Там появился пример .bem/bemjson.js логика примерно понятна - entity.block подменяет значения на нужное. Даже после просмотра вебинара Трехзвенная архитектура веб-сервисов на bem-xjst структура проекта не понятна. Ясно что вариативность может быть разная, т.к. это JS. Но хотя бы рабочий вариант для многостраничника покажите пожалуйста. Не ясно:

1. Структура проекта под разные страницы.

   common.bloks/
    page-index
    page-contact
    page-еще 80 блоков разных страниц
   

   это подразумевается? Или всё таки где-то в bundles держим эти декларации?
2. Блок root - он остается неизменным и его структура переопределяется кодом из вашего примера .bem/bemjson.js ?
3. В каком файле храним код из примера .bem/bemjson.js?
4. Какой код должны содержать файлики desktop.bundles/*/*.bemdecl.js ?

Лирика: Конечно было бы круто на сайте bem.info иметь пример проекта для bemtree в разделе "учебные материалы", по примеру Создаём свой проект на БЭМ.

cc @tadatuta

Володя пожалуйста помоги с примером реализации.

Честно, я пробовал, перечитал всю документацию, пересмотрел видео. Да, я научился... разобрался немного в ym, даже javascript стал немного понимать (при чтении + пару скриптов написал), писать рабочие шаблоны bemhtml, но не смог реализовать с bemtree требуемое выше.