What's the difference between a Marionette Layout and a Region?

Question

Marionette provides two components named Regions and Layouts. At first glance, they seem to provide similar functionality: A location on the page for my application to place subviews, plus some additional event binding fairy dust.

Looking under the hood, it's fairly clear that each component is implemented in a very different way, but I'm not sure why and when I would want to use one over the other. What use cases are each component intended for?

Prevaricator

Answer 1

Layouts and Regions serve very different purposes: a layout is a type of view, but a region will display a view in your HTML/DOM for you. A region may be used to display a layout. And a layout will also contain regions. This creates a nested hierarchy that can extend infinitely.

Region

A Region manages the content that is displayed within an HTML element on your web page. This is often a div or other "container" like element. You provide a jquery selector for the region to manage, and then you tell the region to show various Backbone views in that region.

<div id="mycontent"></div>

MyRegion = new Backbone.Marionette.Region({
  el: "#mycontent"
});

myView = new MyView();
myRegion.show(myView);

A region, then, is not directly rendered and does not have it's own DOM interactions or updating. It is purely for the purpose of displaying a view at a specified point in the DOM, allowing different views to be swapped in and out, easily.

You can read more about Regions, here: http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

Layout

A Layout is a specialized type of view. It extends from Marionette.ItemView directly, which means it is intended to render a single template and may or may not have a model (or "item") associated with that template.

The difference between a Layout and an ItemView is that a Layout contains Regions. When you define a Layout, you give it a template but you also specify regions that the template contains. After rendering the layout, you can display other views within the layout using the regions that were defined.

<script id="my-layout" type="text/html">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

MyLayout = Backbone.Marionette.Layout.extend({
  template: "#my-layout",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

layout = new MyLayout();
layout.render();

layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());

Regions And Layouts Together

You can already see that Layouts and Regions are related, though they provide separate functionality. But a Layout and a Region can be used together to create sub-layouts and nested hierarchies of layouts, regions and views.

<script id="my-layout" type="text/html">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

<div id="container"></div>

container = new Backbone.Marionette.Region({
  el: "#container"
});

MyLayout = Backbone.Marionette.Layout.extend({
  template: "#my-layout",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

// Show the "layout" in the "container" region
layout = new MyLayout();
container.show(layout);

// and show the views in the layout
layout.menu.show(new MyMenuView());
layout.content.show(new MyContentView());

You can nest any number of layouts and regions together, with any number of views, using any view type that extends from Backbone.View (not just Marionette views).

Smithery

FYI, it looks like this answer is being maintained in the marionette repo here. – Theone

Also, another resource from the marionette repo explaining the different views in a concise manner. I like Marionette, but I was honestly confused on how to use the different views at first. – Singleminded

What about this? github.com/addyosmani/todomvc/blob/gh-pages/labs/… This appears not to call the Marionette Layout class, but is a Marionette module called Layout. Would this be implemented better using the Marionette Layout instead? – Siva

@Derick Bailey Nice explanation +1 for your you. – Buttonhook

Nice explanation, thx for that. It was being kind of difficult to me to understand how layouts are supposed to work in marionette, because in my backend xp (php, at least, using zend, CI or even laravel) we forced ourselves to imagine a layout as a main container, that is, the base html for many views, holding the html that is going to be the same for many pages. It looks like in Marionette this concept is quite different. – Jerry

Answer 2

A Region serves as a container for Views (that they're shown inside), while a Layout serves as a parent view for nesting child views inside it.

Since a Layout is an ItemView itself, it's shown inside a Region. A Layout will also contain Regions for showing its child views. If the child views shown in a Layout's Regions are Layouts themselves, they can have child views of their own. Hence, Layouts let you nest views into a tree-like structure.

Yeseniayeshiva