MarionetteJS. Shall we dance?

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

СПАСИБО ЗА ВНИМАНИЕ!