CODEWITHSUNDEEP
backbone.jsecmascript-6marionettebackbone-eventsbackbone-routing
Vernon
Vernon

Reputation: 443

Best to handle communication between Marionette modules without violating Law of Demeter

I’m currently working on rewriting our Marionette codebase using ES6 and Marionette v3.

I created a couple of submodules (ProductShowRoute, CartManager, etc.) which are all started from my main App.

I was wondering how you guys are managing the communication between modules. In our previous Marionette apps, communication was too hectic and too much was being sent around using Backbone.Wreqr.

When a user adds a product to their cart, our ProductsModule needs to let the CartModule know about this. How are you organizing this communication without writing too much spaghetti code? Backbone.Radio / Backbone.Wreqr are great tools, but when used incorrectly (or too much things happening in between modules) it’s hard to know which events end up where.

Also, I’m wondering how you are changing routes. I read a blog post by Derick Bailey who warned for the use of App.navigate(‘route’, { trigger: true }) but in Marionette Wires I saw this happening a couple of times. Is trigger: true really this bad to use? And what alternatives do we have? We used Backbone.Wreqr for this before, which calls the Router of each module and changes the route, but that seems like a lot of communication going back and forth as well.

Thanks a lot!

Vernon

Upvotes: 0

Views: 172

Answers (1)

neolaser
neolaser

Reputation: 6907

For communication between subApps, I like each subApp to trigger a method on their channel indicating their action, then have an event registry somewhere on the App. I like to do this so I can clearly see a list of actions when an event is fired. Also, in my opinion it shouldnt be the ProductsModules concern what happens after the event is fired

// Fire an event.
ProductsModuleChannel.trigger('product:added', productModel);

// Event Registry
App.listenTo(ProductModuleChannel, 'product:added', function (productModel) {
    CartManager.addProduct(productModel)
})

In regards to App.navigate('route', {trigger: true}); I don't like applications to be 'route driven'. Routes should be an entry point to an application, but thats it. I tend to do something like the following

...
showSomePage: function () {
    // Render some views and do other things

    // Update the route
    App.navigate('myRoute'); // Note no 'trigger: true'
}

Hope this helps

Upvotes: 0

Related Questions