Skip to content

f-o-r/bbbem

Repository files navigation

BBBEM

Сборка

  • Сборка проекта: npm run build
  • Разработка: npm run dev

Описание уровней сборки

  1. desktop.bundles – страничные бандлы (common-bundle, page-bundle)
  2. desktop.libs – блоки с библиотеками (backbone, underscore, jquery)
  3. desktop.blocks – BEM-блоки с i-bem API и Yate шаблонами
  4. desktop.modules – модули с бизнес-логикой и хелперы
  5. desktop.mvc – Backbone: Model, View/Controller, Collection
  6. desktop.widgets – Приложения: Backbone + i-bem

Модульность

Все элементы из desktop.mvc подключаются и декларируются через модули Require

Зачем нужна BB View?

В случае, если кусок представления еще не существует в DOM, то нам необходимо его вставить, проинициализировать и после использовать. Так, как доступ к API блока мы можем получить, только после того, как он появится в DOM, то код создания вью (с бем блоком) нужно где-то хранить.

  • w-obligators-total VS w-bem-obligators-total – тут все ок, Backbone BemView легко заменяется чисто i-bem.js
  • w-obligators VS w-bem-obligators – а вот тут болт, и i-bem.js не готов к этой задаче

Концепция SPA

Приложение представляет из себя виджет (BEM блок), который объединяет в себе:

  1. Backbone: Model, View/Controller, Collection
  2. BEM-блоки с API для взаимодействия с ними из Backbone Controller

Сценарий работы приложения

  1. Объявляем в разметке виджет, который представляет из себя BEM-блок
  2. Декларируем в deps виджета зависимости от Backbone View/Controller
    1. Каждый Backbone View/Controller знает о своих зависимостях, таких, как:
      1. BEM-блок c API (он не привязан к Backbone и может использоваться без него)
      2. Backbone Model – конструктор модели
      3. Backbone Collection – конструктор коллекции
  3. Через Require-модуль прокидываем данные для Backbone Model или Collection через событие
  4. Инициализиурем виджет, в onSetMode виджета, слушаем Require-модуль и ждем данных, пишем логику взаимодействия компонентов приложения
    1. Создаем инстансы Backbone Collection или Backbone Model
    2. Создаем инстансы Backbone View/Controller и при необходимости прокидываем туда Backbone Collection или Backbone Model
  5. Двунаправленное взаимодействие View (DOM) с Backbone View/Controller происходит через API и события BEM-блока

Роутинг

? BB Router, добавление роутов относительно подключаемых виджетов

Вопросы

Концепция MPA

...coming soon...