https://github.com/vitkarpov/parket-st
Верстка интернет-магазина «Паркет СТ» на полном БЭМ-стеке
https://github.com/vitkarpov/parket-st
Last synced: about 2 months ago
JSON representation
Верстка интернет-магазина «Паркет СТ» на полном БЭМ-стеке
- Host: GitHub
- URL: https://github.com/vitkarpov/parket-st
- Owner: vitkarpov
- Created: 2015-12-14T20:58:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-16T16:15:14.000Z (about 9 years ago)
- Last Synced: 2025-01-17T23:19:44.690Z (3 months ago)
- Language: JavaScript
- Size: 1.15 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Верстка интернет-магазина «Паркет СТ» на полном БЭМ-стеке
## [Демо](http://wemakesites.ru/projects/parket/pages/home.html)
[Список всех страниц](http://wemakesites.ru/projects/parket/)
## Рабочая копия
```
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-ручке бекенда, но в большинстве случаев это так