Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MarionetteJS. Shall we dance?

829 views

Published on

MarionetteJS talk by Ksenia Redunova. OdessaJS conference, 2015.

Published in: Technology
  • Be the first to comment

MarionetteJS. Shall we dance?

  1. 1. MARIONETTE SHALL WE DANCE? Ксения Редунова @Katidotk
  2. 2. BACKBONEJS ПЛЮСЫ И МИНУСЫ
  3. 3. • Минималистичная, простая и гибкая • Отличная событийная архитектура • Реализация Model/Collection для REST • Хорошее разделение кода MVW ПЛЮСЫ
  4. 4. • Минималистичная :) • Слишком легко прийти не туда • Нет основного класса Application • Нет вложенных иерархий вью • Нет организации layouts (header/footer/sidebar/content etc) • Метод render не делает ничего по умолчанию • Управление памятью МИНУСЫ
  5. 5. MARIONETTE
  6. 6. • Составная библиотека для упрощения разработки крупномасштабных приложений • Представляет набор общих паттернов проектирования и реализации • Сокращает объем стандартного кода благодаря типам вью • Содержит вложенные вью • Управляет памятью • Объединяет событийную архитектуру и агрегатор событий
  7. 7. Marionette.Application •Управление приложжением - start, stop, и другая функциональность •Модульность •На самом деле,“application” это просто объект
  8. 8. MODULE Is deprecated! используйте AMD/CommonJS/ES6 modules
  9. 9. MARIONETTE VIEW MAGIC
  10. 10. MARIONETTE VIEW MAGIC • Рендеринг есть и привязан к изменениям модели • Управление шаблоном • Содержит UI object • Обеспечивает метод .close() • Расширяемые
  11. 11. TEMPLATE HELPERS
  12. 12. TEMPLATE HELPERS
  13. 13. Marionette.ItemView • Вью, который рендерится на основании данных модели • атрибут “model” • атрибут “template” • рендерится автоматически • modelEvents – методы вью вызываются на событиях модели
  14. 14. UI OBJECT UI объект создает кэшированные атрибуты, которые указывают на объекты, выбранные jQuery
  15. 15. Marionette.CollectionView • Вью рендерится на основании данных из Collection • Автоматически перерендерится на событиях add/ remove/reset/etc • Атрибут childView, который автоматически инстанциируется и свяжется с model
  16. 16. COLLECTIONVIEWS
  17. 17. Marionette.CompositeView • CompositeView = CollectionView + template • Комбинация ItemView и CollectionView • Рендерит элементы Backbone.Collection внутри wrapper • Наследует Marionette.CollectionView
  18. 18. MODEL EVENTS & COLLECTION EVENTS
  19. 19. ЗОМБИ-АПОКАЛИПСИС
  20. 20. REGION • Вью, предназначенное для управления жизненным циклом других вью • Рендерит экземпляр вью и добавляет в DOM • “Мост” между DOM и backbone
  21. 21. ОТОБРАЖЕНИЕ ВЬЮ В РЕГИОНЕ
  22. 22. LAYOUT • Отличие от ItemView - содержит в себе регионы • Хорошо подходит на роль “виджета” с несколькими вью
  23. 23. LAYOUT
  24. 24. BACKBONE.WREQR & BACKBONE.RADIO
  25. 25. MESSAGING BUS •Event события уровня приложения •Commands исполнение команд •Request/Response запрос определенных значений/состояний
  26. 26. EVENT AGGREGATOR • pub/sub • trigger/bind • Оповещение о событии разных частей приложения (“user:logged-in”) • События уровня приложения близки к глобальным вызовам функций • Различные типы событий, пространства имен определяют семантику
  27. 27. EVENT AGGREGATOR
  28. 28. COMMANDS Применяются для обеспечения функциональности, которая обрабатывается в одной точке, но возникает в разных точках • Подписаться на исполнение команды - один раз • Пример: сохранение • cmd-s • Clicking a toolbar button • Choosing File => Save from the menubar
  29. 29. COMMANDS
  30. 30. REQUEST / RESPONSE • Применяется, когда нам нужно запросить информацию от другой части приложения • Для данных уровня приложения (например, состояние корзины пользователя) • Отличие от Events - намерение. Событие возникает как есть, а Request запрашивает специфичную информацию • Исполняет запрос один подписчик • Легко злоупотребить, как и в случае с другими глобальными объектами
  31. 31. 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');
  32. 32. 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
  33. 33. ИТОГО
  34. 34. Управление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. Исполняет запрос только один подписчик
  35. 35. ПОЛЕЗНОЕ MarionetteJS.org (Derick Bailey) BackboneRails.com (Brian Mann) “Marionette: gentle introduction” by David Sulc
  36. 36. СПАСИБО ЗА ВНИМАНИЕ!

×