Философия "не mvc" ?

Насколько я понял, методология придерживается идеи 1 страницы. Т.е. у нас нет $layout в котором лежит $content, где $content это какая-то view'ха. Как разрешить этот вопрос в рамках методологии БЭМ? Все что у нас есть это макеты в .bundlers и блоки в .blocks.

Если я правильно понял вопрос, layout это точно такой же блок, как и то, что лежит внутри него.

Предположим, что на вход у нас такие данные:

var data = [
    {
        "news": $newsForPage1,
        "content": $contentForPage1
    },
    {
        "news": $newsForPage2,
        "content": $contentForPage2
    },
    {
        "news": $newsForPage3,
        "content": $contentForPage3
    }
]

Для того, чтобы получить что-то типа такого HTML для каждой страницы

<div class="layout">
    <div class="layout__sidebar">
        <div class="news">$newsForPageN</div>
    </div>
    <div class="layout__content">
        <div class="content">$contentForPageN</div>
    </div>
</div>

потребуется примерно такая функция, генерирующая HTML:

data.forEach(function(page, index) {
    require('fs').writeFileSync('page' + index + '.html', BEMHTML.apply({
        block: 'layout',
        content: [
            elem: 'sidebar',
            content: {
                block: 'news', content: page.news
            },
            elem: 'content',
            content: {
                block: 'content', content: page.content
            }
        ]
    }));
});

Если я правильно понял вопрос, layout это точно такой же блок, как и то, что лежит внутри него.

Совершенно верно, можем ли мы физически разделить 1 bemjson на 2, по аналогии с layout и view в известных framework'ах?

P.S. Второй вопрос в силе :)

Нам снова надо пересобрать страничку через bem и отдать прогерам перезаписав работу бакендчиков? Как избежать этой боли?

Вам нужен bemjson и шаблоны. Если отдать шаблоны на пхп — будет все ок.

Я обновил комментарий, посмотрите.

Мы сверстали статику, и получили index.html, index.css, index.js, мы отдали это backend'у, на баке прогреры натыкают переменных которые пришли из контроллеров, и как только появляется необходимость поменять структуру странички, например добавить блок "заявки", то начинается боль. Нам снова надо пересобрать страничку через bem и отдать прогерам перезаписав работу бакендчиков? Как избежать этой боли?

Наиучший, но самый сложный к внедрению вариант: бекенд ничего не знает про фронденд, собирает данные и в виде JSON передаёт их фронтенду. Фронтенд трансформирует JSON в BEMJSON добавляя логику фрондента, а потом переводит BEMJSON в HTML на сервере или на клиенте.

@vegas0250 @vithar стоит заметить, что так же можно и сам bemjson склеивать.

И не стоит забывать про вариант, когда у вас есть тонкий слой шаблонизации для сборки страниц из html на сервере в виде nodejs приложения, или с помощью отдельной v8.

p.s. ну и про bh-php тоже — можно и в него посмотреть ;-)

@zxqfox @vithar Большое спасибо за развернутые, и своевременные ответы. Осталось раздуплить :) Вопросов больше не имею.

@vegas0250 удалось ли разобраться?

@tadatuta прочитал много материала и просмотрел несколько видео понял что исходный full-stack не очень подходит для легкой интергации с yii. bemtree накатывает данные на bemjson, bemjson трансформируется в html с учетом bemhtml.

Такой подход мне показался не очень удобным, и я решил что структуры bemjson у меня не будет. В связи с этим есть простой html, и правильно оформленные "blocks" и .deps.js. Напишу плагин gulp для получения всех используемых блоков, элементов и модификаций на странице в html (/protected/views), и передачи их сборщику для подтягивания всех используемых блоков на странице и их зависимостей. Ещё не решил подойдет ли стандартный сборщик если я ему отдам например fake bemjson, или напишу свой сразу с coffee.

Интересно знать пишу ли я велосипед?

P.S. для js попробую i-bem__dom

@vegas0250 да, скорее всего получится велосипед. Попробую помочь этого избежать.

Чтобы получить из правильно оформленного HTML декларацию со всеми использованными в нем блоками, можно применить html2bemjson, а на основании него собрать все необходимые файлы.

Пример сборки типичного проекта на основе HTML с помощью bem-tools есть тут, для ENB сделать по аналогии должно быть просто. Если потребуется, готов помочь.

Альтернативный вариант — это вообще не смотреть на HTML, создать файл декларации вручную, указать в нем лишь один родительский блок (например, page), а все остальные блоки указывать в deps.js-файлах.

PS: мы потихоньку движемся к тому, чтобы начать собирать БЭМ-проекты с помощью gulp, но каких-либо сроков по-прежнему нет.

@tadatuta

а все остальные блоки указывать в deps.js-файлах.

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

html2bemjson прекрасная вещь, то что нужно, не хочется bem или enb сервер для сборки подтягивать, можно ли как то оформить в библиотеку сборщик который на вход получает bemjson на выходе выбираем destination, и радуемся полному циклу для любого framework'a или CMS.

P.S. Ткните в исходники сборки для bemjson и deps.js. Не могу что-то найти и времени на поиск жалко, заранее спасибо :) (Жалко потому что на работе надо работать работу :))

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

В самом простом случае это будет выглядеть как page.deps.js, содержащий что-то типа

({
    shouldDeps: ['header', 'logo', 'main', 'sidebar', 'link', 'footer'] // и так далее
})

вроде вполне можно осилить?

можно ли как то оформить в библиотеку сборщик который на вход получает bemjson на выходе выбираем destination, и радуемся полному циклу

На самом деле можно, скажем, для gulp создать таск, который будет тупо запускать bem make или enb make, а потом перекладывать артефакты в destination. Это задача на 5 минут.

А вот задача про сборку deps без bem-tools/enb — уже гораздо сложнее. Сейчас работа идет над модулем bem-deps, который возьмет на себя часть задачи. Подробнее о том, что должен делать такой модуль см. https://github.com/bem-incubator/bem-deps/issues/2

Текущие технологии для сборки deps на ENB см. тут: https://github.com/enb-bem/enb-bem-techs/tree/master/techs (deps и deps-old). Для bem-tools — здесь: https://github.com/bem/bem-tools/blob/support/0.9.x/lib/techs/v2/deps.js.js.

@tadatuta

вроде вполне можно осилить?

Для макетов всех страниц да можно и руками, а на отдельные страницы постоянно править руками зависимости больно.

На самом деле можно, скажем, для gulp создать таск, который будет тупо запускать bem make или enb make, а потом перекладывать артефакты в destination. Это задача на 5 минут.

Попробую так :)

@tadatuta большое спасибо, завел цикл, но он не оптимизирован ибо пересобираются все страницы, буду признателен если дадите линк на грамотное руководство по enb make.

Сделал так, gulp.watch повесил на views/*.php => (html2bemjson) => получаем валидный bemjson.

И второй gulp.watch слушает *.bemjson.js => enb make

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

@vegas0250 хороших документов прямо сейчас вряд ли смогу посоветовать, мы потихоньку работаем над их написанием. Сейчас все, что есть, доступно по ссылкам на bem.info (https://ru.bem.info/tools/bem/enb-bem/).

Но я вчера обновил html2bemjson (появился парсинг модификаторов вместо миксов и несколько тестов), написал enb-html-to-bemjson и поддержал использование в https://github.com/tadatuta/bem-project-stub-he (см. последний коммит).