Сергей Максимов — Мастер-класс: Организация...
19
-
Upload
yandex -
Category
Technology
-
view
332 -
download
3
description
Сейчас на рынке есть множество фронтенд-библиотек, которые так или иначе реализуют MVC-паттерн. По сути, они нужны для облегчения создания и поддержки интерактивных веб-приложений. Для этих же целей и мы разработали библиотеку bem-mvc — она облегчает разработку веб-приложений на существующем БЭМ-стеке. Так, для реализации моделей в bem-mvc используются те же компоненты, что и в библиотеках bem-bl/bem-core. А провязки с представлением осуществляются в БЭМ-терминах для контролов из библиотеки bem-components или произвольных БЭМ-блоков. На прошлых BEMup я уже рассказывал об основных элементах библиотеки bem-mvc и способах их применения. Но то была теория, а на этот раз — меньше слов, больше дела! В прямом эфире мы создадим небольшое приложение для демонстрации возможностей bem-mvc. Пройдем путь от статического макета к действующему приложению. В процессе мы научимся организовывать код приложения, создавать модели, осуществлять провязку моделей и представления и создавать свои типы провязки.
Transcript of Сергей Максимов — Мастер-класс: Организация...
Организация приложения на основе bem-mvc
Сергей Максимов, руководитель группы интерфейсов Справочника и Директа, Яндекс !BEMup в Москве, 17 мая 2014
Обо мне[email protected]
@dosyara
разрабатывал поисковые интерфейсы
теперь — руковожу группой разработкой интерфейсов Справочника и Директа
http://bit.ly/bemup-msk-mvc
3
Директ
Директ
Директ
Директ
bem-mvc
набор блоков для реализации MVC-паттерна на существующем БЭМ-стеке
8
bem-mvc: части
9
M BEM.MODEL MODEL
V *
C i-bem блок
bem-mvc: зависимостиmaster:
bem-bl bem-components
!v2:
bem-core bem-components
10
bem-mvc: особенности
декларативные модели
декларативные провязки с представлением
ориентация на БЭМ-стек
11
Модели // декларация модели MODEL.decl('todo-item', { text: 'string', done: 'boolean' });! // создание модели MODEL.create(‘todo-item’, { text: 'строка', done: true });! // получение модели из хранилища MODEL.get(‘todo-item');!!!!!
12
Модели // получить значение поля model.get('text'); // установить значение поля model.set('text', 'текстовое поле');! // подписаться на изменение поля model.on('text', 'change', function() {...});!!!!!!!!!!!
13
Биндинги{ block: 'form', content: [ { block : 'input', mods : { theme : 'simple', size : 'm' }, name: 'text', val : '' } ]}!!!!!!!!
14
Биндинги{ block: 'form', mix: [ { block: 'glue', js: { modelName: 'todo-item', modelData: { text: 'bla', done: true } } } ], content: [ … ]}!!
15
Биндинги{ block : 'input', mix: [ { block: 'glue', elem: 'model-field', js: { name: 'text', type: 'input' } } ], mods : { theme : 'simple', size : 'm' }, name: 'text', val : ''}!!!
16
Демонстрация
Спасибо!
19
@dosyaradosyara
Сергей Максимов !руководитель группы интерфейсов Справочника и Директа
