... un framework ?
... une librairie ?
une surcouche sur Backbone
http://marionettejs.com
marionettejs/backbone.marionette
Et que dit le README.md ?
The Backbone framework
Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in applications.
Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in applications.
Marionette brings an application architecture to Backbone, along with built in view management and memory management. It's designed to be a lightweight and flexible library of tools that sits on top of Backbone, providing the framework for building a scalable application.
Like Backbone itself, you're not required to use all of Marionette just because you want to use some of it. You can pick and choose which features you want to use. This allows you to work with other Backbone frameworks and plugins easily. It also means that you are not required to engage in an all-or-nothing migration to begin using Marionette.
TL;DR
une collection de patterns pour architecturer une application
Share complex UI interactions across views.
Behaviors are like mixins, without all of the pain associated with property collision.
A Behavior is an isolated set of DOM / user interactions that can be mixed into any View or another Behavior.
Behaviors allow you to blackbox View specific interactions into portable logical chunks, keeping your Views simple and your code DRY.
c'est du code ...
... isolé,
... qu'on peut partager,
... appliqué à des vues
ça sert pour ...
... des manipulations du DOM
... des interactions utilisateurs
Utiliser les behaviors, ça permet ...
... d'avoir des vues simples (KISS),
... de ne pas se répéter (DRY)
...en gros c'est (FUN)
En langage technique, c'est:
Marionette.Behavior.extend({
events: {
click: 'onClick'
},
onClick: function (event) {
// ...
}
});Propriétés `ui` et `events`
Marionette.Behavior.extend({
ui: {
label: '.label'
},
events: {
'click @ui.label': 'onClick'
}
});events
ui, events
Marionette.ItemView.extend({
ui: {
foo: '.foo'
},
behaviors: {
Foo: {
behaviorClass: behaviors.foo
}
}
});Propriété `ui`
Marionette.Behavior.extend({
ui: {
label: '.label'
},
events: {
'click @ui.label': 'onClick'
},
onClick: function (event) {
// this.ui = behavior.ui + view.ui
// {
// label: '.label'
// foo: '.foo'
// }
this.ui.foo.addClass('bar');
}
});view
behavior
Marionette.Behavior.extend({
modelEvents: {
'change:name': 'onNameChange'
},
onNameChange: function (model) {
// ...
}
});Propriétés `modelEvents` et `collectionEvents`
Marionette.Behavior.extend({
collectionEvents: {
add: 'onCollectionAdd'
},
onCollectionAdd: function (model) {
// ...
}
}); modelEvents
collectionEvents
Propriété `triggers`
Marionette.Behavior.extend({
triggers: {
'click .foo': 'click:foo',
'click @ui.foo': 'click:ui:foo'
}
});Marionette.ItemView.extend({
behaviors: {
Foo: {
behaviorClasS: behaviors.foo
}
},
onClickFoo: function (event) {
// called by triggers 'click:foo'
},
onClickUiFoo: function (event) {
// called by triggers 'click:ui:foo'
}
});triggers
view react to trigger
Marionette.Behavior.extend({
foo: function () {
// ...
this.el.classList.add('foo');
}
});Propriétés `el` et `$el`
Marionette.Behavior.extend({
foo: function () {
// ...
this.$el.addClass('foo');
}
});this.el
this.$el
Marionette.Behavior.extend({
foo: function () {
// ...
this.$('.foo'); // = this.view.$('.foo');
}
});Propriété `$`
Marionette.Behavior.extend({
foo: function () {
// ...
this.view.foo('bar');
}
});Propriété `view`
var MyView = Marionette.ItemView.extend({
});
<div class="view">
<header>
<button class="button--close">
<span><!-- --></span>
</button>
<h1>It's awesome</h1>
</header>
<div class="content">
<form><!-- --></form>
</div>
</div>vue
template
var MyView = Marionette.ItemView.extend({
ui: {
"closeButton": ".button--close"
},
events: {
"click @ui.closeButton": "close"
},
// ...
close: function() {
// ...
this.destroy()
}
});
var MyView = Marionette.ItemView.extend({
ui: {
"closeButton": ".button--close"
},
events: {
"click @ui.closeButton": "close"
},
// ...
});
var MyView = Mn.ItemView.extend({
ui: {
"closeButton": ".button--close"
},
events: {
"click @ui.closeButton": "close"
},
close: function() {
// ...
this.destroy()
},
// ...
});
var CloseButtonBehavior = Mn.Behavior.extend({
ui: {
"closeButton": ".button--close"
},
events: {
"click @ui.closeButton": "close"
},
close: function() {
// ...
this.destroy()
}
});
var MyView = Mn.ItemView.extend({
behaviors: {
CloseButton: {
behaviorClass: CloseButtonBehavior
}
},
// ...
});view
view
behavior
Avant
Après
Où se cache les behaviors ?
Deux méthodes:
fournir la classe lors de l'instanciation du behavior
spécifier la propriété behaviorsLookup()
Mn.Behaviors.behaviorsLookup = function () {
return window.behaviors;
};Marionette.Behaviors.behaviorsLookup
si vous aimez les variables globales :)
// http://marionettejs.com/docs/v2.4.1/marionette.behaviors.html#behaviorclass
define(['marionette', 'lib/tooltip'], function(Marionette, Tooltip) {
return Marionette.ItemView.extend({
behaviors: {
Tooltip: {
behaviorClass: Tooltip,
message: "hello world"
}
}
});
});Utilisation de la propriété `behaviorClass`
Life Cycle Methods
Paramétrisation
Nested behavior
Marionette.Behavior.extend({
onRender: function () {
// ...
},
onShow: function () {
// ...
},
onDestroy: function () {
// ...
}
});Life Cycle Methods d'une vue (1/3)
Life Cycle Methods d'une vue (2/3)
tout appel à context.triggerMethod('foo:bar') fonctionne:
<Behavior>.onFooBar()
avec context = la vue
au-delà de :
onBeforeRender, onRender, onShow, onDomRefresh, ...
Marionette.Behavior.extend({
onFooBar: function () {
// yeah!
}
});Appel à triggerMethod depuis la vue
behavior
Marionette.ItemView.extend({
foo: function () {
this.triggerMethod('foo:bar');
}
});view
Life Cycle Methods d'une vue (3/3)
behaviors.foo = Marionette.Behavior.extend({
onFoo: function () {
this.view.triggerMethod('bar');
}
});
Appel à triggerMethod depuis un behavior
behavior
Marionette.ItemView.extend({
behaviors: {
Foo: {
behaviorClass: behaviors.foo
},
Bar: {
behaviorClass: behaviors.bar
}
},
});view
behaviors.foo = Marionette.Behavior.extend({
onFoo: function () {
this.view.triggerMethod('bar');
}
});
behaviors.bar = Marionette.Behavior.extend({
onBar: function () {
// yeah!
}
});
Marionette.Behavior.extend({
defaults: {
label: 'foo'
},
onRender: function () {
this.options.label;
}
});passage d'options ou paramétrage d'un behavior
behavior
Marionette.ItemView.extend({
behaviors: {
Foo: {
behaviorClass: behaviors.foo
}
}
});view
Paramétrage par défaut
Marionette.Behavior.extend({
defaults: {
label: 'foo'
},
onRender: function () {
this.options.label; // foo
}
});Marionette.Behavior.extend({
defaults: {
label: 'foo'
},
onRender: function () {
this.options.label;
}
});passage d'options ou paramétrage d'un behavior
behavior
Marionette.ItemView.extend({
behaviors: {
Foo: {
behaviorClass: behaviors.foo
label: 'bar'
}
}
});view
Surcharge des paramètres par défaut par la vue
Marionette.Behavior.extend({
defaults: {
label: 'foo'
},
onRender: function () {
this.options.label; // bar
}
});// CloseButtonBehavior
Mn.Behavior.extend({
ui: {
button: '.button--close'
},
events: {
'click @ui.button': 'close'
},
close: function (event) {
// do something
}
});behavior
Mn.ItemView.extend({
behaviors: {
CloseButton: CloseButtonBehavior
},
// ...
});
view
Demande: ajout d'un effet "touch" sur les boutons
// CloseButtonBehavior
Mn.Behavior.extend({
ui: {
button: '.button--close'
},
events: {
'click @ui.button': 'close'
},
close: function (event) {
// do something
}
});behavior
Mn.ItemView.extend({
behaviors: {
CloseButton: CloseButtonBehavior
},
// ...
});
view
// TouchButtonBehavior
Mn.Behavior.extend({
events: {
click: 'onClick'
},
onClick: function (event) {
// do something
}
});touch behavior
Demande: ajout d'un effet "touch" sur les boutons
// CloseButtonBehavior
Mn.Behavior.extend({
behaviors: {
TouchButton: TouchButtonBehavior
},
ui: {
button: '.button--close'
},
events: {
'click @ui.button': 'close'
},
close: function (event) {
// do something
}
});this.trigger('foo:bar')
Mn.ItemView.extend({
behaviors: {
// ...
},
foo: function () {
this.trigger('foo');
}
});Mn.Behavior.extend({
events: {
'foo'
},
foo: function () {
this.trigger('foo');
}
});this.triggerMethod('foo:bar')
Mn.ItemView.extend({
behaviors: {
// ...
},
foo: function () {
this.triggerMethod('foo');
}
});Mn.Behavior.extend({
onFoo: function () {
// do something
}
});Exécution d'une methode directement sur la vue: this.view
Mn.ItemView.extend({
bar: function () {
alert("I've been called by someone");
}
});Mn.Behavior.extend({
foo: function () {
this.view.bar()
}
});Trigger d'un event:
this.view.trigger
Mn.ItemView.extend({
events: {
'bar': 'onBar'
},
onBar: function () {
alert("I've been trigger by bar event");
}
});Mn.Behavior.extend({
foo: function () {
this.view.trigger('bar');
}
});Trigger d'une méthode:
this.view.triggerMethod
Mn.ItemView.extend({
onBar: function () {
alert("I've been trigger by bar event");
}
});Mn.Behavior.extend({
foo: function () {
this.view.triggerMethod('bar');
}
});boutons
formulaire
loader
toolbar
confirmation
déclenchement d'animations de vue
mise en place d'un slider
scroll infini
Exemple d'une toolbar
Exemple d'un bouton de recherche
Exemple d'un bouton de recherche
Différenciation OS
iOS
Android
Différenciation OS : iOS (1/2)
Différenciation OS : Android (2/2)
Différenciation OS : iOS (1/2)
Différenciation OS : Android (2/2)
Mise en place d'un bouton de confirmation
Gestion d'un formulaire complexe
Formulaire
Marionette.LayoutView.extend({
// ...
regions: {
geolocation: '[data-widget="geolocation"]',
image: '[data-widget="images"]'
},
ui: {
iconClose: '.icon--close',
}
// ...
});Gestion d'un formulaire et de l'affichage d'erreurs
Marionette.LayoutView.extend({
// ...
behaviors: {
Form: {
behaviorClass: behaviors.form
},
FormValidationDisable: {
behaviorClass: behaviors.formValidation
}
},
// ...
});confirmation avant fermeture de la vue
Marionette.LayoutView.extend({
// ...
triggers: {
'click @ui.iconClose': 'cancel'
},
behaviors: {
Confirm: {
behaviorClass: behaviors.confirm,
dialog: 'cancel:confirm'
}
},
onCancelConfirmed: function () {
this.trigger('close');
},
// ...
});Gestion des widgets de geolocalisation et d'ajout d'images
Marionette.LayoutView.extend({
// ...
regions: {
geolocation: '[data-widget="geolocation"]',
image: '[data-widget="images"]'
},
ui: {
iconClose: '.icon--close',
},
behaviors: {
Geolocation: {
behaviorClass: behaviors.geolocation,
region: 'geolocation'
},
AddImage: {
behaviorClass: behaviors.addImage,
region: 'image'
}
},
// ...
});Surchage du formulaires
function (PublishView, rules) {
'use strict';
return PublishView.extend({
formEvents: {
trigger: 'publish:action',
listeners: {
success: 'publish:action:success',
error: 'publish:action:error'
}
},
rules: rules
});
});function (PublishView, rules) {
'use strict';
return PublishView.extend({
formEvents: {
trigger: 'publish:news',
listeners: {
success: 'publish:news:success',
error: 'publish:news:error'
}
},
rules: rules
});
});Formulaire d'action
Formulaire de news
Faire attention aux collisions de méthodes
Light
Comment
Share
Faire attention aux collisions de méthodes
var LightBehavior = Mn.Behavior.extend({
onSuccess: function () {
// do something
},
onError: function () {
// do something
}
});var ShareBehavior = Mn.Behavior.extend({
onSuccess: function () {
// do something
},
onError: function () {
// do something
}
});Faire attention aux collisions de méthodes
var LightBehavior = Mn.Behavior.extend({
onLightSuccess: function () {
// do something
},
onLightError: function () {
// do something
}
});var ShareBehavior = Mn.Behavior.extend({
onShareSuccess: function () {
// do something
},
onShareError: function () {
// do something
}
});=> Préférable d'utiliser un namespace
onLight<Action>
onShare<Action>
les instances des behaviors sont disponibles dans une variable _behaviors
À éviter pour un découplage propre
var LightBehavior = Mn.Behavior.extend({
// ...
});
var CommentBehavior = Mn.Behavior.extend({
// ...
});
var ShareBehavior = Mn.Behavior.extend({
// ...
});
var View = Mn.ItemView.extend({
Behaviors: {
Light: {},
Comment: {}
Share: {}
}
});
var view = new View();
// -> `_behaviors` is an array of
// behavior instances
view._behaviors
Uniquement Marionette #major
var Foo = Marionette.Behavior.extend({
ui: {
foo: '.foo'
},
events: {
'click @ui.foo': 'onFooClick'
},
onFooClick: function () {
console.log('foo');
}
});Uniquement Marionette #major
var SecondView = Marionette.View.extend({
ui: {
"foo": ".foo-btn"
},
behaviors: {
Foo: {
// no options
}
}
});var FirstView = Marionette.View.extend({
behaviors: {
Foo: {
// no options
}
}
});Uniquement Marionette #major
L'icone de fermeture d'une vue peut ainsi être représentée par un même behavior
https://slides.com/stephanebachelier/marionettebehaviors
sbachelier
stephanebachelier
