MarionetteJS: Better Backbone Apps

Backbone.js introduced us to a more modular way of developing today’s web applications by separating our code into semantic and reusable pieces. Backbone’s main crutch was that it offered only the bare minimum so that it was easy to learn and didn’t force you to do anything that you didn’t want to do, but we were left on our own to figure out how to handle much of the implementation details. Marionette is here to help with that.

MarionetteJS

MarionetteJS provides several new pieces to the Backbone puzzle, which gives you plenty more to learn, but, like Backbone, you can often pick and choose which pieces to use, so you can use it right away after learning only one piece of the puzzle. Below I’ll walk through a bunch of the pieces and explain why they’re awesome.

1. Specialized views: Marionette introduces several new View classes that make your life notably simpler:
   • View: Located under Marionette.View, this class is the base for all the other classes. It offers all the main new functionality for the other views to extend, which eliminates a lot of boilerplate code. Don’t bother using this class. Instead use ItemView.
   • ItemView: This view is designed for rendering a single model. It handles the render function for you. You just tell it the template, supply the model to the view instance, and render will automatically work. This eliminates a lot of boilerplate code that you would normally have to write over and over. You can also write beforeRender or onRender functions to be run just before or just after the render function is called.
   • CollectionView and CompositeView: These two handle rendering multiple subviews for each model within a collection. They can both have an ItemView specified for use when rendering a single model, but if CompositeView doesn’t have one specified, it will default to using another instance of a CompositeView for that.
   • Layout: This is a hybrid of ItemViews and Regions, which allows you to render a template and then assign subviews to regions within the layout’s template. Very nice and can be used to create an infinitely deep view structure.
2. Application: This is a centralized piece of the application architecture. This is essentially the go-to piece of the application. It has a mechanism for easily creating modules that are properties of the application, so that everything in the application can be access from this object.
3. AppRouter and Controllers: The AppRouters are exactly the same as a normal Backbone Router, except that you specify a controller and then the router looks for the methods on the controller rather than on itself. Controllers aren’t actually provided because they don’t need anything special. They just need to be objects with functions on them that match up to the router’s route callback names.
4. EventAggregator: One of these is attached to the application automatically at app.vent and allows you to watch for application-wide events. You can use this to keep your application more decoupled. Instead of components talking directly with one another, they can just listen for global events. But as with all the components, you can take it or leave it… or use it in some way other than specified.

There are several other components, but most of them are used more in the background, though it is possible to use them explicitly. I’ve just mentioned the components that people are most likely to use. In the future I’ll walk through some of these, probably in videos such as the Backbone ones, and teach you about them more in-depth.

For now, though, you can just check out these websites and articles to learn more:

• MarionetteJS GitHub Repo
• MarionetteJS Home Page
• MarionetteJS Documentation
• Developing Backbone.js Applications Chapter 8 talks about using Marionette

I’d probably start by reading the Developing Backbone.js Applications link and then move on to the official API so you have a little bit of context before you try to go in and interpret the API docs. In a previous article I mentioned using LayoutManager, but this handles the main functionality of that in a slightly simpler fashion and adds much more on.

I like the AppRouter and controllers idea that Marionette uses, but I think we can take this one step further and eliminate even needing to set up the routers. I think the BackboneMVC library handles this beautifully. I may end up writing a post on that some time too.