marionette talk 2016
TRANSCRIPT
MARIONETTESHALL WE DANCE?
KSENIA REDUNOVA
BACKBONE.JSPROS & CONS
• Simple & flexible• Event-driven architecture• Model/Collection implementation for REST• MVW
PROS
• Simple :)• Too easy to go in wrong direction • No main Application class• No nesting of views• No layouts (header/footer/sidebar/content etc) • Method render does nothing by default• Memory management
CONS
MARIONETTEComplex lib intended for large-scale apps development
• Has a bunch of common design patterns• Lowers amount of standard code because of
view types• Has nested views• Manages memory• Combines event-driven architecture and event
aggregator
Marionette.Application
• App management - start, stop, and other functionality
• Modularity• “application” is just an object
MODULEIs deprecated!
use AMD/CommonJS/ES6 modules
MARIONETTE VIEW MAGIC
MARIONETTE VIEW MAGIC• Rendering connected to model changes• Template management• Has UI object• Has .close() method• Extensible
TEMPLATE HELPERS
TEMPLATE HELPERS
Marionette.ItemView• View is rendered based on model data• “model” attribute• “template” attribute• is rendered automatically• modelEvents – view methods are called on
model events
UI OBJECTUI hash in the view maps UI elements by their jQuery selectors
Marionette.CollectionView• View is rendered based on Collection data• Automatic re-render on add/remove/reset/etc
events• childView attribute is automatically
instantiated and linked with model
COLLECTION VIEWS
Marionette.CompositeView
• CompositeView = CollectionView + template• combination of ItemView and CollectionView • renders elements of Backbone.Collection inside
wrapper• inherits Marionette.CollectionView
MODEL EVENTS & COLLECTION EVENTS
ZOMBIE APOCALYPSE
REGION
• View intended to manage the lifecycle of other views• Renders view instance and adds it to DOM• It’s a bridge between DOM and backbone• Nested regions - LayoutView class
DISPLAY A VIEWIN A REGION
LAYOUT
• Unlike ItemView it contains regions• Is good to be a widget with several views
LAYOUT
BACKBONE.WREQR& BACKBONE.RADIO
MESSAGING BUS
• Event - app-level events• Commands - run commands• Request/Response - request of specific
values/states
EVENT AGGREGATOR• pub/sub• trigger/bind• Notifies the app about events in different parts
(“user:logged-in”)• App level events are like global function calls• Different event types, namespaces define the
semantics
EVENT AGGREGATOR
COMMANDSCommands are used to make any component tell another component to perform an action without a direct reference to it.• Subscribe for a command - only once• Example: Save command
• cmd-s• Clicking a toolbar button• Choosing File => Save from the menubar
COMMANDS
REQUEST / RESPONSE• Request Response is a means for any
component to request information from another component without being tightly coupled.
• For app level data (e. g. shopping cart status)• Requests have intention• The requests are 'one-to-one'
REQUEST / RESPONSE
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');
Combination of Backbone.Events and Radio.Requests
SUMMARYMESSAGING BUS
• Application.vent - instance of Backbone.Wreqr.EventAggregator. pub/sub.
• Application.commands - instance of Backbone.Wreqr.Commands. Subscribe to command execution - once
• Application.reqres - instance of Backbone.Wreqr.RequestResponse. Only one subscriber performs the request
• Backbone.Radio.channel
• Child views - Backbone.BabySitter
• Marionette.RegionManager
• Marionette.TemplateCache
OTHER COOL THINGS FORVIEWS MANAGEMENT
LINKSMarionetteJS.com (Derick Bailey)BackboneRails.com (Brian Mann)
“Marionette: gentle introduction” by David Sulchttp://benmccormick.org/2015/01/26/backbone-radio
/
THANK YOU!