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!