Upload
kseniya-redunova
View
797
Download
0
Embed Size (px)
Citation preview
MARIONETTESHALL WE DANCE?
Ксения Редунова @Katidotk
BACKBONEJSПЛЮСЫ И МИНУСЫ
• Минималистичная, простая и гибкая
• Отличная событийная архитектура
• Реализация Model/Collection для REST
• Хорошее разделение кода MVW
ПЛЮСЫ
• Минималистичная :)
• Слишком легко прийти не туда
• Нет основного класса Application
• Нет вложенных иерархий вью
• Нет организации layouts (header/footer/sidebar/content etc)
• Метод render не делает ничего по умолчанию
• Управление памятью
МИНУСЫ
MARIONETTE
• Составная библиотека для упрощения разработки крупномасштабных приложений
• Представляет набор общих паттернов проектирования и реализации
• Сокращает объем стандартного кода благодаря типам вью
• Содержит вложенные вью
• Управляет памятью
• Объединяет событийную архитектуру и агрегатор событий
Marionette.Application
•Управление приложжением - start, stop, и другая функциональность
•Модульность
•На самом деле, “application” это просто объект
MODULEIs deprecated!
используйте AMD/CommonJS/ES6 modules
MARIONETTE VIEW MAGIC
MARIONETTE VIEW MAGIC
• Рендеринг есть и привязан к изменениям модели
• Управление шаблоном
• Содержит UI object
• Обеспечивает метод .close()
• Расширяемые
TEMPLATE HELPERS
TEMPLATE HELPERS
Marionette.ItemView• Вью, который рендерится на основании данных модели
• атрибут “model”
• атрибут “template”
• рендерится автоматически
• modelEvents – методы вью вызываются на событиях модели
UI OBJECTUI объект создает кэшированные атрибуты, которые указывают
на объекты, выбранные jQuery
Marionette.CollectionView
• Вью рендерится на основании данных из Collection
• Автоматически перерендерится на событиях add/remove/reset/etc
• Атрибут childView, который автоматически инстанциируется и свяжется с model
COLLECTION VIEWS
Marionette.CompositeView
• CompositeView = CollectionView + template
• Комбинация ItemView и CollectionView
• Рендерит элементы Backbone.Collection внутри wrapper
• Наследует Marionette.CollectionView
MODEL EVENTS & COLLECTION EVENTS
ЗОМБИ-АПОКАЛИПСИС
REGION
• Вью, предназначенное для управления жизненным циклом других вью
• Рендерит экземпляр вью и добавляет в DOM
• “Мост” между DOM и backbone
ОТОБРАЖЕНИЕ ВЬЮ В РЕГИОНЕ
LAYOUT
• Отличие от ItemView - содержит в себе регионы
• Хорошо подходит на роль “виджета” с несколькими вью
LAYOUT
BACKBONE.WREQR& BACKBONE.RADIO
MESSAGING BUS
•Event события уровня приложения
•Commands исполнение команд
•Request/Response запрос определенных значений/состояний
EVENT AGGREGATOR• pub/sub
• trigger/bind
• Оповещение о событии разных частей приложения (“user :logged-in”)
• События уровня приложения близки к глобальным вызовам функций
• Различные типы событий, пространства имен определяют семантику
EVENT AGGREGATOR
COMMANDSПрименяются для обеспечения функциональности, которая обрабатывается в одной точке, но возникает в разных точках
• Подписаться на исполнение команды - один раз
• Пример: сохранение
• cmd-s
• Clicking a toolbar button
• Choosing File => Save from the menubar
COMMANDS
REQUEST / RESPONSE• Применяется, когда нам нужно запросить информацию от другой части приложения
• Для данных уровня приложения (например, состояние корзины пользователя)
• Отличие от Events - намерение. Событие возникает как есть, а Request запрашивает специфичную информацию
• Исполняет запрос один подписчик
• Легко злоупотребить, как и в случае с другими глобальными объектами
REQUEST / RESPONSE
// Set up an object to reply to a request. In this case, // whether or not its visible. myObject.reply('visible', this.isVisible);
// Get whether it's visible or not. var isViewVisible = myObject.request('visible');
Backbone.Radio.channel
// Get a reference to the channel named 'user' var userChannel = Backbone.Radio.channel('user');
userChannel.on('some:event', function() { console.log('An event has happened!'); });
userChannel.reply('some:request', 'food is good');
userChannel.trigger('some:event');
Объединение Backbone.Events and Radio.Requests
ИТОГО
Управление Views:• Дочерние views - Backbone.BabySitter
• Marionette.Region. Содержит html элемент и умеет в него вставлять содержимое других view
• Marionette.RegionManager
• Marionette.TemplateCache
Marionette.Application
Marionette.AppRouter
Шина сообщений:• Application.vent - экземпляр Backbone.Wreqr.EventAggregator. pub/sub.
• Application.commands - экземпляр Backbone.Wreqr.Commands. Подписаться на исполнение команды - 1 раз
• Application.reqres - экземпляр Backbone.Wreqr.RequestResponse. Исполняет запрос только один подписчик
ПОЛЕЗНОЕ
MarionetteJS.org (Derick Bailey)BackboneRails.com (Brian Mann)
“Marionette: gentle introduction” by David Sulc
СПАСИБО ЗА ВНИМАНИЕ!