Как начать использовать БЭМ на полную?

nanervax commented 7 years ago

Очень понравилась идея независимых блоков, но возник ряд вопросв: 1) Мне нравится Django, я хочу применять БЭМ в проектах на этом фреймворке, натыкался на пост https://ru.bem.info/forum/483/ , есть ли способы это сделать проще, уже 2017 год.. 2) Непонятно, как организовать взаимодействие компонентов, типа нажал на кнопку "Купить", отреагировала корзина.. Смотрел вебинары, советуют через посредника делать, в общем блоке, но если я перенесу кнопку, и она окажется вне этого посредника, все может поломаться.. 3) Куда складывать библиотеки, типа всяких jqtree и прочих? Как отдельный блок? 4) Как обстоят дела с Angular2? 5) Как сделать так, чтобы с каждой динамической страницей Django, полученной через рендер шаблона, на клиент отдавалась статика, необходимая только для действительно необходимых компонентов Спасибо.

tadatuta commented 7 years ago

@nanervax

Мне нравится Django, я хочу применять БЭМ в проектах на этом фреймворке, натыкался на пост https://ru.bem.info/forum/483/ , есть ли способы это сделать проще, уже 2017 год..

БЭМ как способ организовывать проект не требует ничего специального при разработке на питоне. Специфику могут привносить только bem-xjst шаблоны, которые реализованы на JS. Так что если хочется именно такую шаблонизацию есть несколько вариантов:

Шаблонизироваться в браузере.
Поднять рядом с питоном ноду и вызывать ее через биндинг, через проксю или ходить в нее по http/через сокет.
Портировать шаблонизатор на питон.

Непонятно, как организовать взаимодействие компонентов, типа нажал на кнопку "Купить", отреагировала корзина.. Смотрел вебинары, советуют через посредника делать, в общем блоке, но если я перенесу кнопку, и она окажется вне этого посредника, все может поломаться..

Посредник может быть глобальным (см., например, https://ru.bem.info/platform/libs/bem-core/4.1.1/desktop/events/#Элемент-codechannelscode-блока-codeeventscode) либо, если мы говорим про i-bem.js, можно использовать микс с блоком, представленным сразу на нескольких DOM-узлах (см. https://ru.bem.info/platform/i-bem/html-binding/#Один-js-блок-на-нескольких-html-элементах).

Куда складывать библиотеки, типа всяких jqtree и прочих? Как отдельный блок?

Обычно библиотеки ставятся «как обычно» с помощью npm или bower, а потом создается блок, который подключает библиотеку (например, через borschik include). Пример: https://github.com/just-boris/o-board/blob/master/common.blocks/moment/moment.browser.js

Как обстоят дела с Angular2?

Слишком абстрактный вопрос. Что именно хочется узнать?

Как сделать так, чтобы с каждой динамической страницей Django, полученной через рендер шаблона, на клиент отдавалась статика, необходимая только для действительно необходимых компонентов

Скорее всего динамические страницы можно разделить на типы и для каждого типа заранее известен исчерпывающий список блоков, которые могут быть использованы. Соответственно необходимо для каждого типа написать декларацию, по которой будут собраны бандлы. Далее на каждый запрос будет отдаваться соответствующий бандл. В этом плане django ничем не отличается от проекта на любом другом языке/фреймворке.

qfox commented 7 years ago

https://github.com/bem-contrib/bem-proxy по такой схеме не хотите попробовать?

Обычно, так:

<div class="showcase i-bem" data-bem="{"showcase": {"id": "123"}}">
<div class="showcase__cart>...</div>
</div>
<div class="showcase i-bem" data-bem="{"showcase": {"id": "123"}}">
<div class="showcase__button">...</div>
</div>

BEMDOM.decl('showcase', {
onSetMod: {
js: {
  inited: function() {
    this.elem('cart').text('В корзине пустовато');
    this.bindTo(this.elem('button'), 'click', function(e){
      this.addToCart...;
    });
  }
}
}
});

Это можно на уровне сборки подклеивать из node_modules/libs. Если такого мало — то можно оформлять как отдельный блок, да
Я бы не смешивал i-bem/angular/react/whatever вместе, потому что они решают похожие задачи, но сам БЭМ никаких несовместимостей с ними не имеет, и всё хорошо.
Тут много разных вариантов.
- Собрать заготовки блоков, и подклеивать их в результат в рантайме.
- Собрать наборы заранее на этапе разработки для каждой страницы.
- Можно и в рантайме всё собирать, но обычно это не очень.

nanervax commented 7 years ago

Ребят, спасибо, человеческое Родилось еще несколько вопросов, напишу тут, чтобы не плодить темы: а) Django структура имеет apps, в каждом apps должен быть свой "корень" БЭМ, или делать глобальный на весь проект? Спрашиваю, так как я не имею опыта чтобы это осознать.. б) Куда пихать всякие классы типа wrap, clearfix и прочие хелперы? в) В разделе "Выступления" есть вебинары, выложено там три урока, все закончилось на "Декларативный JavaScript", а по структуре вебинаров было видно что их было заметно больше, есть ли публичные ссылки? Там много чего полезного рассказывает автор.

tadatuta commented 7 years ago

а) Django структура имеет apps, в каждом apps должен быть свой "корень" БЭМ, или делать глобальный на весь проект? Спрашиваю, так как я не имею опыта чтобы это осознать..

Что подразумевается под «корнем»?

б) Куда пихать всякие классы типа wrap, clearfix и прочие хелперы?

clearfix можно оформить как самый обычный блок и миксовать туда, где он нужен. А врапперов в принципе быть не должно. Подробнее см. https://ru.bem.info/forum/656/

в) В разделе "Выступления" есть вебинары, выложено там три урока, все закончилось на "Декларативный JavaScript", а по структуре вебинаров было видно что их было заметно больше, есть ли публичные ссылки? Там много чего полезного рассказывает автор.

Найти все прошедшие вебинары можно по тегу: https://ru.bem.info/forum/?labels=webinar Ну и видео на тему, конечно, не ограничиваются вебинарами. Для начала могу порекомендовать такую подборку:

про сборку https://ru.bem.info/forum/-686/
про шаблонизацию https://www.youtube.com/watch?v=1fo-6vJJdd0
i-bem https://www.youtube.com/watch?v=OBjKCY3TiJg
bem-components https://www.youtube.com/watch?v=ki9e6C93UFk

nanervax commented 7 years ago

а) Под корнем подразумевается исходная директория где лежат блоки, для каждого app должна быть своя такая директория, или это будет некий глобальный поставщик компонентов в корне самого проекта?

tadatuta commented 7 years ago

Под корнем подразумевается исходная директория где лежат блоки, для каждого app должна быть своя такая директория, или это будет некий глобальный поставщик компонентов в корне самого проекта?

Это зависит от задачи: можно сложить общие между apps-ами блоки в единое место и отдельно разложить блоки, которые требуются каждому app-у конкретно. Но можно и свалить все в одну кучу — в собранный бандл в любом случае попадет только то, что реально используется.

bem-site / bem-forum-content-ru

Как начать использовать БЭМ на полную? #1284