EN
mursya
mursya
13 июля 2015
Read-only

7 июля 2015 года мы провели третий вебинар по БЭМ, где научились писать JavaScript с использованием jQuery для наших блоков в соответствии с принципами методологии БЭМ.

В ходе вебинара мы расширили функциональность страницы нашего проекта (о том, что это за проект, можно узнать из видео 1 и видео 2), добавили валидацию для полей формы и обратный отсчёт до начала и конца акции, и продолжили собирать и оптимизировать его с помощью Gulp.

Видео вебинара

Презентация вебинара

Ответы на вопросы


Вопрос: Используются ли какие-то модули для JS? CommonJS/Require/ES6 modules?

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


Вопрос: Как с помощью jQuery можно добавить и убрать модификатор для элемента?

Ответ: Самый простой способ — toggleClass. Существуют библиотеки, добавляющие БЭМ-ориентированную функциональность. Например, jquery-bem. Разумеется, есть i-bem.js, про который мы расскажем на следующих вебинарах.


Вопрос: Почему у инпутов нет атрибута name? Его можно использовать вместо отдельного модификатора $('[name=email]').

Ответ: Идея в том, чтобы работать с любыми блоками консистентно. Если нужно как-то отличать похожие блоки, модификаторы будут работать универсально.


Вопрос: Как собрать все изображения в папку public/images, если блок на текущей странице не используется?

Ответ: Есть несколько вариантов:

  1. Переписать сборку так, чтобы собиралось все, что есть на файловой системе.
  2. Использовать в качестве списка необходимых для сборки сущностей не разметку, а отдельный JSON-файл.
  3. Использовать специальный файл для каждого блока, описывающий необходимые ему зависимости.

Мы на проектах используем комбинацию 2 и 3. Подробнее см. https://ru.bem.info/technology/deps/


Вопрос: Под компонентом имеется в виду сборка из одного или нескольких блоков?

Ответ: Компонент — это некая полезная штука на странице. Например, поле ввода или шапка. Компоненты могут состоять из нескольких вложенных компонентов поменьше. Сборка же — это процесс объединения кода всех используемых компонентов в один файл для отправки в браузер.


Вопрос: Как правильно собрать несколько страниц (сразу и простую, и pink)?

Ответ: Можно переписать конфиг, чтобы он содержал массив с нужными наборами параметров, и обходить его.


Вопрос: Блоки независимые, но что, если нужны зависимости между блоками? Например, при сабмите формы нужно обнулять блок countDown.

Ответ: Можно использовать паттерн «посредник» в упрощенном виде — добавить вышестоящему блоку, например, headline, прослушивание событий формы и дергание методов таймера. Примиксовав соответствующие элементы headline__form, headline__countdown к блокам. Подробнее можно прочесть на нашем форуме.


Вопрос: Как использовать готовые плагины для jQuery, физически куда их правильнее складывать?

Ответ: Можно использовать bower для этих целей, потом вставлять код плагинов при сборке в app.js.


Вопрос: Как уменьшить связанность кода, если на одной странице реализуется большой компонент с огромным количеством внутренных кнопок/переключателей.

Ответ: Можно воспользоваться MV*-подходом.


Вопрос: Будет ли правильно по технологии БЭМ создать js файлы для view, для model?

Ответ: Да, вполне. В качестве примера можно посмотреть библиотеку bem-mvc.


Вопрос: Как реализовать методологию БЭМ средствами PHP? Есть ли какие-то инструменты для этого?

Ответ: Сообщество уже позаботилось об этом. Реализацию можно посмотреть здесь.


Вопрос: Почему в библиотеке bem-components нет блоков-элеметов форм: form, label ... ?

Ответ: Они есть в bem-forms.


Вопрос: Есть ли возможность использовать angularjs c БЭМ-методологией? И как лучше это сделать? Есть ли примеры проектов использующих такую связку?

Ответ: Да, смотрите репозиторий ng-bem-components. Кроме того, есть доклад от Антона Виноградова из Альфа-Банка.


Вопрос: Почему вы не используете angularjs? И что думаете о нем?

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


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

Ответ: Зависит от того, какие у вас на него планы. Если планируется его дальше активно развивать, то, скорее всего, смысл есть.


Надеемся, что видео и ответы на вопросы помогают вам в ходе обучения.

До встречи на следующих «БЭМинарах» и Stay BEMed!