Поиск по БЭМ-сущностям в проекте

Добрый день. Немного предистории.

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

Так как почти все страницы в проекте имеют бизнес-логику, страницы не используют bemjson и строятся по технологии bemtree, и соответственно блоки покрыты deps.js Тогда я начал костылять утилиту, которая строила граф по deps.js и визуализировала его (На примере bem-components http://eugenegantz.ru/page/bem-dep-gr-link_pseudo/)

Но видно, что это неполноценное решение:

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

В итоге такой вопрос знатокам: Существует ли адекватный способ производить поиск по БЭМ сущностям в проектах и строить структуру проекта?

К примеру, на случай если в проекте новый человек или проект ведут много специалистов.

Потому что мне думается что-то уже должно было быть придумано для таких случаев.

8 years ago

tadatuta

@blond, @zxqfox расскажите, пожалуйста, что есть

8 years ago

qfox

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

Эта задача сводится к 1) поиск: bem-walk + on('data') со сборкой нужных путей к файлам, в которых потенциально может быть этот код, определение наличия нужной бизнес логики в файле и фильтрация лишнего, 2) изменение кода сущности, 3) изменение зависимостей.

(1) https://github.com/bem-sdk/bem-walk/blob/387e909cebdb0995f0fd2755991ec0579d88438a/README.ru.md#5-Получите-информацию-о-найденных-файлах + https://github.com/benjamn/recast ? (2)

const deps = require('bem-deps');
// Читаем имеющиеся на уровнях зависимости
const relationsPromise = deps.load({levels: ['level1', 'level2'], options: {…}});
// ... и строим по ним граф.
const graphPromise = relations.then(deps.buildGraph);

graphPromise.then((graph) => {
  // Получаем из графа список сущностей, от которых зависит page__css
  graph.dependenciesOf([{block: 'page', elem: 'css'}]);
  // ... или более реально, только в нужной технологии
  graph.dependenciesOf([{block: 'page', elem: 'css'}], 'js');
});

И дальше уже работать с БЭМ-сущностями из зависимостей.

(3) Пока ничего толком нет, но есть наработки у @yeti-or, может быть поделится. Ну или https://github.com/benjamn/recast ?

Не сразу ясно какие блоки зависят от найденных, не ясно какие страницы сообщать тестировщикам.

Тут немного сложнее, потому что после раскрытия надо еще иметь список всех страниц, но не сильно. После dependenciesOf нужного блока можно сделать bemdecl.intersect, но надо учесть, что там формат описания БЭМ-сущностей более простой и надо будет раскрытые зависимости к нему привести. Но кажется, что правильнее будет его тоже сначала раскрыть (через graph.dependenciesOf).

Тогда я начал костылять утилиту, которая строила граф по deps.js и визуализировала его (На примере bem-components http://eugenegantz.ru/page/bem-dep-gr-link_pseudo/)

Связи можно получить на шаге relations. На каком-то из хакатонов похожую визуализацию пытались сделать, емнип, @awinogradow, @yeti-or, @blond, но тогда не было ничего из bem-sdk и там всё кустарными методами решалось.

Нет гарантий если разработчик упустил что-нибудь при оформлении deps.js, или например, зная контекст вынес deps на другой уровень

От этого тулза никак не защищена, но можно сделать линтер, который по каким-то признакам будет сообщать разработчику о потенциальных или реальных ошибках, забытых зависимостях, тем самым давая какой-то минимальный уровень защиты. Прототип у нас есть на bemhint, но руки не ясно когда дойдут оформить.

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

bem find ?

Структура проекта не самый понятный термин, но если имеется ввиду блоков и по зависимостям, то есть нюансы. Нужно начинать с bem-deps, bem-graph и его метода dependenciesOf. А дальше — куда понесёт, там и решение.

К примеру, на случай если в проекте новый человек или проект ведут много специалистов.

Проблема известная, и в частом случае мы как-то её решаем, но до общего решения без общих примеров невозможно дойти. Спасибо за ваш опыт, надеюсь, что тоже чем-то помог.

8 years ago

tadatuta

@eugenegantz Кстати, а задача не решается генерацией сайта а-ля https://ru.bem.info/libs/bem-components/3.0.0/desktop/button/ ?

8 years ago

eugenegantz

@tadatuta Кажется я не уловил суть предложенного. Ты имеешь ввиду писать JSDoc и на его базе генерировать описание к блокам?

Если да, то JSDoc'и писались, но генерация описания к блокам, насколько я понял, был вопрос будущего. Но при помощи JSDoc, граф с зависимостями не получить. Хотелось иметь карту зависимостей, чтобы, скажем, поменяв какую-нибудь разновидность popup'a, можно было увидеть в каких блоках и на какой странице его можно увидеть воочую.

8 years ago

tadatuta

Я именно про такую схему, как на bem.info — с живыми примерами, с подробным описанием (JSDoc в том числе, конечно), ссылками на исходники и так далее.

Для этого есть специальный пакет — https://github.com/bem-site/bem-lib-site.

8 years ago

belozer

Прилинкую к этому issue Карты использования блоков при проектировании проекта

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