Итак как и обещал начинаю серию статей по созданию сайта на полном стэке БЭМ технологий. Для начала определимся со структурой сайта и данными для него, а так же подготовим инфраструктуру.

Что за сайт будем делать?

В старые времена основной тестовой программой для демонстрации языка был классический Hello world! , потом технологии шагнули вперёд и стало модно делать в качестве демонстрации той или иной технологии блоги (типа «Блог на < ваша технология> за пять минут»). Сейчас в основном для этих целей делают ToDo App.

Ну, а я решил в качестве примера сделать интернет-магазин. Не полный конечно — только фронтэнд. Некую болванку. Почему именно магазин? A чорт его знает — сначала хотел тоже блог сделать, но показалось как-то банально, todo тоже как-то неинтересно, а вот интернет-магазин это вызов ну и в принципе может и пригодится кому.

Создаём проект

Назову я его нехитрым именем bem-shop-stub. Завёл соответствующий реп на гитхабе. Клонируем его куда-нибудь себе в удобное место.

1

$ git clone https://github.com/webhive/bem-shop-stub

Ставим БЭМ стэк

Забегая вперёд скажу, что у нас будет несколько бандлов. Но по какой-то неведомой причине бэмеры предпочитают, чтобы каждый бандл генерировал свой набор js/css кода. В то-же время что-то мне подсказывает, что было бы неплохо объединять все эти файлы в один. Именно так я и сделаю. По счастью в своё время эта проблема уже была поднята в сообществе и нам любезно предоставили готовый конфиг.

1
2
3

$ cd bem-shop-stub
$ wget -qO- https://github.com/bem/project-stub/archive/merged.zip | bsdtar -xvf- -s'|[^/]*/||'
$ npm install

Да-да — хоть я и экспериментировал с собственным конфигом для enb, но здесь предпочту project-stub, чтобы не переусложнять и так непростую задачу. Так-же буду использовать тот набор технологий, что предоставляет project-stub. Опять-же, чтобы не отвлекаться на ненужные в контексте данного повествования вещи.

Да кстати советую добавить ./node_modules/.bin себе в PATH, чтобы не париться с полным путём к командам БЭМ

Проверим?

1
2
3
4
5
6
7
8

$ enb make
15:34:16.174 - build started
15:34:16.193 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider
15:34:16.242 - [rebuild] [desktop.bundles/merged/merged.levels] levels
... проскипал тут длинный боян
15:34:17.115 - [rebuild] [desktop.bundles/index/index.min.css] borschik
15:34:17.121 - [rebuild] [desktop.bundles/merged/merged.min.css] borschik
15:34:17.123 - build finished - 1533ms

Как видим в desktop.bundles/merged/ у нас сбилдились нужные файлы. Пока предполагаем, что всё работает и БЭМ стэк у нас установлен и настроен.

Определяемся с бандлами

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

Итак пусть у нас будут следующие бандлы (страницы):

• Главная — index
• Раздел каталога — catalogue
• Страница товара — product
• Страница заказа — order
• Корзина — shopcart
• О компании — about
• Оплата и доставка — delivery
• Авторизация — login
• Регистрация — sign-up
• Результаты поиска — search

Думаю по минимуму этого будет достаточно. Создам что-ли папки для них. Ну и кстати зачистим существующий бандл index и папку merged. В каждой папке создадим bemjson файл по умолчанию — простейший вырожденный вариант. Фактически это заглушка, корневой элемент, нужный только для начала формирования дерева. Но об этом позже.

1
2
3
4

$ cd desktop.bundles
$ rm -rf index merged
$ mkdir index catalogue product order shopcart about delivery sign-up login search
$ for d (`ls`); do cd $d; echo "exports.blocks = [{ name: 'root', mods: { '$d': true } }]" > $d.bemdecl.js; cd ..; done

Напоминаю, что синтаксис для zsh
Теперь у нас есть болванки для бандлов. Давайте что-ли проверим будет ли это дело как-то работать.

1
2
3
4
5
6
7
8

$ enb make
17:18:44.036 - build started
17:18:44.065 - [rebuild] [desktop.bundles/about/about.bemjson.js] file-provider
17:18:44.066 - [rebuild] [desktop.bundles/catalogue/catalogue.bemjson.js] file-provider
... проскипал тут длинный боян
17:18:44.851 - [rebuild] [desktop.bundles/shopcart/shopcart.min.js] borschik
17:18:44.851 - [rebuild] [desktop.bundles/merged/merged.min.js] borschik
17:18:44.852 - build finished - 1548ms

Бинго! Всё работает — получаем в каждой папке кучу вского гуано нагенерированных файлов и среди них html, который однако состоит из пустых страниц, что впрочем совершенно верно.

Итог

У нас есть болванка проекта, который успешно собирается с помощью enb. Сделаны заготовки страниц сайта. Проект выложен на github

В следующей серии начнем определяться с содержимым страниц и начнём наполнять их блоками.