Сейчас на рынке есть множество фронтенд-библиотек, которые так или иначе реализуют MVC-паттерн. По сути, они нужны для облегчения создания и поддержки интерактивных веб-приложений. Для этих же целей и мы разработали библиотеку bem-mvc — она облегчает разработку веб-приложений на существующем БЭМ-стеке. Так, для реализации моделей в bem-mvc используются те же компоненты, что и в библиотеках bem-bl/bem-core. А провязки с представлением осуществляются в БЭМ-терминах для контролов из библиотеки bem-components или произвольных БЭМ-блоков. На прошлых BEMup я уже рассказывал об основных элементах библиотеки bem-mvc и способах их применения. Но то была теория, а на этот раз — меньше слов, больше дела! В прямом эфире мы создадим небольшое приложение для демонстрации возможностей bem-mvc. Пройдем путь от статического макета к действующему приложению. В процессе мы научимся организовывать код приложения, создавать модели, осуществлять провязку моделей и представления и создавать свои типы провязки.

2. Организация приложения
на основе bem-mvc
Сергей Максимов, руководитель группы
интерфейсов Справочника и Директа, Яндекс
!
BEMup в Москве, 17 мая 2014

3. Обо мне
ddos@yandex-team.ru
@dosyara
разрабатывал поисковые интерфейсы
теперь — руковожу группой
разработкой интерфейсов Справочника
и Директа
http://bit.ly/bemup-msk-mvc
3

4. Директ

5. Директ

6. Директ

7. Директ

8. bem-mvc
набор блоков для реализации MVC-паттерна на
существующем БЭМ-стеке
8

9. bem-mvc: части
9
M
BEM.MODEL
MODEL
V *
C i-bem блок

10. bem-mvc: зависимости
master:
bem-bl
bem-components
!
v2:
bem-core
bem-components
10

11. bem-mvc: особенности
декларативные модели
декларативные провязки с представлением
ориентация на БЭМ-стек
11

12. Модели
// декларация модели
MODEL.decl('todo-item', {
text: 'string',
done: 'boolean'
});
!
// создание модели
MODEL.create(‘todo-item’, {
text: 'строка',
done: true
});
!
// получение модели из хранилища
MODEL.get(‘todo-item');
!
!
!
!
!
12

13. Модели
// получить значение поля
model.get('text');
// установить значение поля
model.set('text', 'текстовое поле');
!
// подписаться на изменение поля
model.on('text', 'change', function() {...});
!
!
!
!
!
!
!
!
!
!
!
13

14. Биндинги
{
block: 'form',
content: [
{
block : 'input',
mods : { theme : 'simple', size : 'm' },
name: 'text',
val : ''
}
]
}
!
!
!
!
!
!
!
!
14

15. Биндинги
{
block: 'form',
mix: [
{
block: 'glue',
js: {
modelName: 'todo-item',
modelData: {
text: 'bla',
done: true
}
}
}
],
content: [ … ]
}
!
!
15

16. Биндинги
{
block : 'input',
mix: [
{
block: 'glue',
elem: 'model-field',
js: {
name: 'text',
type: 'input'
}
}
],
mods : { theme : 'simple', size : 'm' },
name: 'text',
val : ''
}
!
!
!
16

17. Демонстрация

18. Спасибо!

19. 19
ddos@yandex-team.ru
@dosyara
dosyara
Сергей Максимов
!
руководитель группы
интерфейсов Справочника и
Директа