More than 2 years have passed since the 3rd version began to be developed and finally it was released today! So, who cares, who was waiting and working with Marionette.js - welcome to the tackle.
The guys from the core team did a very good job and added a couple of good changes.
Let's start.

View

Marionette.View has noticeably transformed. Now this is not just an unused class, as we remember from the version 2 documentation

Note: The Marionette.View class is not intended to be used directly

and a full View.

Moreover, it now contains both Marionette.View, and, Marionette.ItemViewand Marionette.LayoutView. Yes, as you understand now we no longer have Marionette.ItemViewneither Marionette.LayoutView, they were deleted. To use the third version of the code you need to replace your only Marionette.ItemViewand Marionette.LayoutViewat Marionette.Viewall.

Let's look at a small example:

import Mn from 'backbone.marionette';
const MyView = Mn.View.extend({
  template: _.template('
Превый заголовок для 3-й версии
'),
  onRender() {
    console.log('Моя вью была отрендерена')
  }
});

Living example

And an example of how to use ViewasLayoutView

import Mn from 'backbone.marionette';
const MyView = Mn.View.extend({
  regions: {
    region1:'#region1',
    region2: '#region2'
  },
  onRender() {
    this.showChildView('region1', childView1);
    this.showChildView('region2', childView2);
  }
});

Living example

We figured it out. Move on.

Compositeview

Marionette.CompositeView has become deprecatedwhat causes many questions at once. How do I now create a tablet or tree menu as recommended in the documentation? Everything is very simple, for this you need to use Marionette.Viewand Marionette.CollectionView. The guys prepared good comparative examples for both tables and tree menus .

By the way, the documentation for the new version has improved markedly. Scott Walton did a good job of it, aka Marionette Guides .

Collectionview

Marionette.CollectionView remained basically unchanged. Methods getChildViewand getEmptyViewhave been deleted. Instead, you can do so

Mn.CollectionView({
  childView() {
    // мой код
  },
  emptyView() {
    // мой код
  }
});

Also Backbone.BabySitterremoved from dependencies and fully integrated into the core of the framework. Now let's just refresh the memory with a small example.

import Mn from 'backbone.marionette';
const data = [
  {
    item: 'Превая запись'
  },
  {
    item: 'Вторая запись'
  },
  {
    item: 'Третья запись'
  }
];
const collection = new Backbone.Collection(data);
const childViewTemplate = _.template('<%= item %>');
const ChildView = Mn.View.extend({
  template: childViewTemplate
});
const collectionView = new Mn.CollectionView({
  el: 'body',
  childView: ChildView,
  collection: collection
});
collectionView.render();

Living example

View.Events

The life cycle of View has changed. Events before:showand showhave been deleted. Now it looks like this:

before:render -> render -> before:attach -> attach -> dome:refresh
before:detach -> detach -> before:destroy -> destroy

Example

import Mn from 'backbone.marionette';
const MyView = Mn.View.extend({
  template: false,
  onBeforeRender() {
    console.log(1)
  },
  onRender() {
    console.log(2)
  },
  onbeforeDestroy() {
    console.log(3)
  },
  onDestroy() {
    console.log(4);
  }
});
const myView = new MyView();
myView.render();
myView.destroy();

Living example

Childview events

The API has changed a bit and now childEventsneeds to be used instead childViewEvents.

import Mn from 'backbone.marionette';
const MyView = Mn.View.extend({
  childViewEvents: {
    'some:event': 'eventHandler'
  }
  eventHandler() {
    console.log('Событие дочернего елемента');
  }
});

Living example

Templates

templateHelperswas renamed to templateContext.

import Mn from 'backbone.marionette';
const MyView = Mn.View.extend({
  template: template,
  templateContext() {
    return {
      version: '3.0'
    }
  }
});

Living example

Backbone.Radio

Replaced Backbone.Wreqrby Backbone.Radio - a powerful library for communication between modules in the application.
Backbone.Radiotightly integrated into Marionette.Objectwhich makes it possible to listen to all the events of the application in one place.

Living example

API changes

 - `bindEntityEvents` ->  `bindEvents`
 - `unbindEntityEvents ` -> `unbindEvents`
 - `normalizeUIString`, `normalizeUIKeys`, `normalizeUIValues` -> `normalizeMethods`
 - `proxyGetOption` -> `getOption`
 - `proxyBindEntityEvents` -> `bindEvents`
 - `proxyUnbindEntityEvents` -> `unbindEvents`

What was deleted?

• Marionette.Controller
• Marionette.Module
• Marionette.RegionManager

Переезд на новую версию должен быть не очень болезненным.
Вот коммиты одного из лидеров кор команды Paul Falgout в один из своих проектов:

templateHelpers -> templateContext
Marionette.ItemView -> Marionette.View
Marionette.LayoutView -> Marionette.View
childEvents -> childViewEvents
render:collection / onRenderCollection -> render:children / onRenderChildren
before:show / show / onBeforeShow / onShow -> attach etc

Чтобы облегчить жизнь разработчикам, была создана баблиотека marionette-v3-compat.
Так же есть примеры третьей версии с разными сборщиками проектов.

Marionette.js github репозиторий