MarionetteJS talk by Ksenia Redunova. OdessaJS conference, 2015.

1. MARIONETTE
SHALL WE DANCE?
Ксения Редунова
@Katidotk

2. BACKBONEJS
ПЛЮСЫ И МИНУСЫ

3. • Минималистичная, простая и гибкая
• Отличная событийная архитектура
• Реализация Model/Collection для REST
• Хорошее разделение кода MVW
ПЛЮСЫ

4. • Минималистичная :)
• Слишком легко прийти не туда
• Нет основного класса Application
• Нет вложенных иерархий вью
• Нет организации layouts (header/footer/sidebar/content etc)
• Метод render не делает ничего по умолчанию
• Управление памятью
МИНУСЫ

5. MARIONETTE

6. • Составная библиотека для упрощения разработки
крупномасштабных приложений
• Представляет набор общих паттернов проектирования и
реализации
• Сокращает объем стандартного кода благодаря типам
вью
• Содержит вложенные вью
• Управляет памятью
• Объединяет событийную архитектуру и агрегатор
событий

7. Marionette.Application
•Управление приложжением - start, stop, и другая
функциональность
•Модульность
•На самом деле,“application” это просто объект

8. MODULE
Is deprecated!
используйте AMD/CommonJS/ES6 modules

9. MARIONETTE VIEW MAGIC

10. MARIONETTE VIEW MAGIC
• Рендеринг есть и привязан к изменениям модели
• Управление шаблоном
• Содержит UI object
• Обеспечивает метод .close()
• Расширяемые

11. TEMPLATE HELPERS

12. TEMPLATE HELPERS

13. Marionette.ItemView
• Вью, который рендерится на основании данных модели
• атрибут “model”
• атрибут “template”
• рендерится автоматически
• modelEvents – методы вью вызываются на событиях
модели

14. UI OBJECT
UI объект создает кэшированные атрибуты, которые указывают
на объекты, выбранные jQuery

15. Marionette.CollectionView
• Вью рендерится на основании данных из Collection
• Автоматически перерендерится на событиях add/
remove/reset/etc
• Атрибут childView, который автоматически
инстанциируется и свяжется с model

16. COLLECTIONVIEWS

17. Marionette.CompositeView
• CompositeView = CollectionView + template
• Комбинация ItemView и CollectionView
• Рендерит элементы Backbone.Collection внутри wrapper
• Наследует Marionette.CollectionView

18. MODEL EVENTS & COLLECTION EVENTS

19. ЗОМБИ-АПОКАЛИПСИС

21. REGION
• Вью, предназначенное для управления жизненным циклом
других вью
• Рендерит экземпляр вью и добавляет в DOM
• “Мост” между DOM и backbone

22. ОТОБРАЖЕНИЕ ВЬЮ В
РЕГИОНЕ

23. LAYOUT
• Отличие от ItemView - содержит в себе регионы
• Хорошо подходит на роль “виджета” с несколькими вью

24. LAYOUT

25. BACKBONE.WREQR
& BACKBONE.RADIO

26. MESSAGING BUS
•Event события уровня приложения
•Commands исполнение команд
•Request/Response запрос определенных
значений/состояний

27. EVENT AGGREGATOR
• pub/sub
• trigger/bind
• Оповещение о событии разных частей приложения
(“user:logged-in”)
• События уровня приложения близки к глобальным
вызовам функций
• Различные типы событий, пространства имен
определяют семантику

28. EVENT AGGREGATOR

29. COMMANDS
Применяются для обеспечения функциональности,
которая обрабатывается в одной точке, но
возникает в разных точках
• Подписаться на исполнение команды - один раз
• Пример: сохранение
• cmd-s
• Clicking a toolbar button
• Choosing File => Save from the menubar

30. COMMANDS

31. REQUEST / RESPONSE
• Применяется, когда нам нужно запросить информацию
от другой части приложения
• Для данных уровня приложения (например, состояние
корзины пользователя)
• Отличие от Events - намерение. Событие возникает как
есть, а Request запрашивает специфичную информацию
• Исполняет запрос один подписчик
• Легко злоупотребить, как и в случае с другими
глобальными объектами

32. 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');

33. 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

34. ИТОГО

35. Управление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. Исполняет запрос
только один подписчик

36. ПОЛЕЗНОЕ
MarionetteJS.org (Derick Bailey)
BackboneRails.com (Brian Mann)
“Marionette: gentle introduction” by David Sulc

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