Skip to content

Latest commit

 

History

History
86 lines (52 loc) · 4 KB

README.md

File metadata and controls

86 lines (52 loc) · 4 KB
Raw

Верстка интернет-магазина «Паркет СТ» на полном БЭМ-стеке

Демо

Список всех страниц

Рабочая копия

npm install && bower install

Сборка

Дев-сервер

npm start

Страницы отвечают по запросу localhost:8080/dist/{page}.html. Первый запрос обрабатывается долго — идет сборка, на последующие запросы блоки, которые не менялись кешируются, перебилдивается только то, что изменилось.

Версия для прода

npm run build

Декларация блоков

Список страниц в pages.json. Все страницы собираются из одного и того же bemdecl-файла:

module.exports = [{ block: "root" }];

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

  • parket.min.css
  • parket.min.js

Которые браузер получил на первый запрос любой страницы и закешируется.

Файловая система

Библиотеки:

  • libs/bem-core
  • libs/bem-components

Проектные блоки:

  • common.blocks
  • pages.blocks

В common находятся:

  • доопределения библиотечных блоков: тема parket для bem-components
  • предметнонезависимые блоки: ссылка, карта, ...
  • общие для страниц блоки: шапка, футер, ...

В pages находятся:

  • большие, специфичные блоки страниц из которых и строится конечный интерфейс

Конечная bemjson-декларация страницы формируется с помощью bemtree блоков уровня pages: каждый блок умеет построить себя по данным.

Статика собирается в папке dist. Кроме автоматически генерируемых файлов, там есть:

  • dummy: папка с картинками, которые в реальной верстке будут другими — картинки товаров и т.д.
  • i: картинки, которые нужны для верстки

По большей части, все картинки в продовской версии css заинлайнены через base64

Данные

Это статичная верстка — бекенда нет, поэтому исходные данные захардкожены в bemtree блоков.

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

Примерная схема такая:

  • каждый блок умеет построить себя по данным с помощью bemtree
  • все данные, которые нужны всем страницам разбиты на модельки: товар, коллекция товаров, адрес и т.д.
  • каждый блок может обратиться к различным моделям, чтобы получить необходимые для своей отрисовки данные
  • модель не обязательно соответствует одной http-ручке бекенда, но в большинстве случаев это так